Skip to content

wangEditor 的图片浮动插件,主要是在编辑文档图片时使用的一个 hoverbar 插件

License

Notifications You must be signed in to change notification settings

hqwlkj/wangEditor-plugin-float-image

Repository files navigation

wangEditor 图片浮动 插件

English Documentation



介绍

wangEditor 图片浮动 插件。

安装

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>

其他

支持 i18n 多语言

许可证

MIT

About

wangEditor 的图片浮动插件,主要是在编辑文档图片时使用的一个 hoverbar 插件

Resources

License

Stars

Watchers

Forks

Packages

No packages published