xr-editor-vue

西软wangeditor富文本编辑器二次封装

安装

npm install --save xr-editor-vue

使用

//在入口文件处注册
import XrEditor from "xr-editor-vue"
import 'xr-editor-vue/lib/editor.css';

Vue.use(XrEditor);

/** 直接在所需页面中使用
<XrEditor
  ref="editor"
  :bodyContent="bodyContent"
  :insertKeys="['jump', 'positioning']"
  @onChange="onChange"
  @uploadImage="uploadImage"
  @uploadAttachment="uploadAttachment"
>
</XrEditor>
**/

//属性及事件作用
const handler ={
    bodyContent: "编辑的内容",
    insertKeys: "拓展的功能数组",
    onChange: "编辑器内容发生变更时触发",
    uploadImage: "上传图片时触发",
    uploadAttachment: "上传附件时触发"
}

//获取富文本内容后回显
const content = "<p>回显内容</p>";
this.$refs.editor.setHtml(content);

其他

ps：xr-editor-vue只是将wangeditor做了简单封装,统一了module的注册、简化开发步骤。拓展的功能实现依赖于wangeditor-xr-expand。