Skip to content

Latest commit

 

History

History
95 lines (69 loc) · 2.01 KB

README-en.md

File metadata and controls

95 lines (69 loc) · 2.01 KB
Raw

wangEditor float-image plugin

中文文档



Introduction

wangEditor float-image plugin.

Installation

yarn add wangeditor-plugin-float-image

or

npm i wangeditor-plugin-float-image

Usage

Register to editor

import { Boot } from '@wangeditor/editor'
import floatImageModule from 'wangeditor-plugin-float-image'

// Register
// You should register this before create editor, and register only once (not repeatedly).
Boot.registerModule(floatImageModule)

Configuration

Editor config

import { IEditorConfig } from '@wangeditor/editor'

const editorConfig: Partial<IEditorConfig> = {
  hoverbarKeys: {
    // hover menus when selected link text
    link: {
      menuKeys: [ // Get default config by `editor.getConfig().hoverbarKeys.image`
        'imageWidth30',
        'imageWidth50',
        'imageWidth100',
        '|',
        'imageFloatNone', // add 'Convert to float-image' menu
        'imageFloatLeft',
        'imageFloatRight',
        '|',
        'editImage',
        'viewImageLink',
        'deleteImage',
      ],
    },
  },

  // others...
}

Then create editor and toolbar, you will use editorConfig.

Render HTML

You will get a float-image HTML format like this

<div class="w-e-image-container" style="width: 30%;">
  <img src="https://news-bos.cdn.bcebos.com/mvideo/log-news.png" style="width: 100%; float: right">
</div>

Others

Support i18n.

LICENSE

MIT