Wangeditor-plugin-float-image NPM

wangEditor 图片浮动插件

介绍

wangEditor 图片浮动插件。

npm.io npm.io

安装

yarn add wangeditor-plugin-float-image

或者

npm i wangeditor-plugin-float-image

使用

注册到编辑器

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

// 注册。要在创建编辑器之前注册，且只能注册一次，不可重复注册。
Boot.registerModule(floatImageModule)

配置

编辑器配置

import { IEditorConfig } from '@wangeditor/editor'

const editorConfig: Partial<IEditorConfig> = {
  hoverbarKeys: {
    // 在编辑器中，选中链接文本时，要弹出的菜单
    link: {
      menuKeys: [ // 默认的配置可以通过 `editor.getConfig().hoverbarKeys.image` 获取
        'imageWidth30',
        'imageWidth50',
        'imageWidth100',
        '|',               // 分割符
        'imageFloatNone',  // 增加 '图片浮动' 菜单
        'imageFloatLeft',
        'imageFloatRight',
        '|',               // 分割符
        'editImage',
        'viewImageLink',
        'deleteImage',
      ],
    },
  },
  
  // 其他...
}

然后创建编辑器和工具栏，会用到 editorConfig 。具体查看 wangEditor 文档。

显示 HTML

一个 float-image 节点产出的 HTML 格式如下

<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>