vue-cli3.0使用富文本编辑器vue-ueditor-wrap

vue

2019-09-09

62

1

参考文档:vue-ueditor-wrap

该文档主要介绍的是再vue-cli2中的使用。

而我的项目用的是vue-cli3.x,所以下面主要介绍在vue-cli3.0中的使用。

1.下载UEditor

下载地址:UEditor官方下载

UEditor文档:UEditor官方文档

 

2.安装

npm i vue-ueditor-wrap -S
# 或者 
yarn add vue-ueditor-wrap -S

3.引入

import VueUeditorWrap from 'vue-ueditor-wrap' // ES6 Module
// 或者
const VueUeditorWrap = require('vue-ueditor-wrap') // CommonJS

4.注册组件

// 在.vue组件中注册
components: {
  VueUeditorWrap
}

// 在main.js中注册
Vue.component('vue-ueditor-wrap', VueUeditorWrap)

5.绑定数据

<vue-ueditor-wrap v-model="msg"></vue-ueditor-wrap>

data () {
  return {
    msg: '<h2><img src="http://img.baidu.com/hi/jx2/j_0003.gif"/>Vue + UEditor + v-model双向绑定</h2>'
  }
}

到此,初始化UEditor便OK了。

 

6.自定义配置

// 添加config属性,可修改菜单
<vue-ueditor-wrap v-model="msg" :config="myConfig"></vue-ueditor-wrap>

data () {
  return {
    msg: '<h2><img src="http://img.baidu.com/hi/jx2/j_0003.gif"/>Vue + UEditor + v-model双向绑定</h2>',
    myConfig: {
      // 编辑器不自动被内容撑高
      autoHeightEnabled: false,
      // 初始容器高度
      initialFrameHeight: 240,
      // 初始容器宽度
      initialFrameWidth: '100%',
      // 上传文件接口(这个地址是我为了方便各位体验文件上传功能搭建的临时接口,请勿在生产环境使用!!!)
      serverUrl: 'http://35.201.165.105:8000/controller.php',
      // UEditor 资源文件的存放路径,如果你使用的是 vue-cli2.0 生成的项目,通常不需要设置该选项,默认是:UEDITOR_HOME_URL: '/static/UEditor/'
      //但是 vue cli 3.x 生成的项目中,默认值是 process.env.BASE_URL + 'UEditor/',如果项目不是部署在根目录下,则需要自己配置路径,我的项目是在根目录下,手动下载的UEditor放在了public目录下
      UEDITOR_HOME_URL: '/UEditor/',
      // 自定义菜单
      toolbars: [
          ['fullscreen', 'undo', 'redo', 'fontfamily', 'fontsize', 'bold', 'italic', 'underline', 'forecolor', 'fontborder', 'pasteplain','background', 'backcolor', 'strikethrough', 'superscript', 'subscript', 'spechars', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', 'horizontal']
        ]
    }
  }
}

7.获取UEditor实例

<vue-ueditor-wrap @ready="ready"></vue-ueditor-wrap>

methods: {
  ready (editorInstance) {
    console.log(`编辑器实例${editorInstance.key}: `, editorInstance)
  }
}

8.设置是否在组件的beforeDestroy钩子里销毁UEditor实例

<vue-ueditor-wrap :destroy="true"></vue-ueditor-wrap>

9.选择v-model的实现方式

双向绑定的实现依赖对编辑器内容变化的监听,由于监听方式的不同,会带来监听效果的差异性,你可以自行选择,但建议使用开箱即用的默认值。

<vue-ueditor-wrap mode="listener"></vue-ueditor-wrap>

可选值:observer,listener

默认值:observer

参数说明:

observer 模式借助 MutationObserver API。优点在于监听的准确性,缺点在于它会带来一点额外的性能开销。你可以通过 observerDebounceTime 属性设置触发间隔,还可以通过 observerOptions 属性有选择的设置 MutationObserver 的监听行为。该 API 只兼容到 IE11+,但 vue-ueditor-wrap 会在不支持的浏览器中自动启用 listener 模式。

<vue-ueditor-wrap
  mode="observer"
  :observerDebounceTime="100"
  :observerOptions="{ attributes: true, characterData: true, childList: true, subtree: true }"
  >
</vue-ueditor-wrap>
listener 模式借助 UEditor 的 contentChange 事件,优点在于依赖官方提供的事件 API,无需额外的性能消耗,兼容性更好,但缺点在于监听的准确性并不高,存在如下方 [常见问题 5] 中的提到的 BUG。

10.是否支持Vue SSR?

自 2.4.0 版本开始支持服务端渲染!本组件提供对 Nuxt 项目开箱即用的支持。但如果你是自己搭建的 Vue SSR 项目,你可能需要自行区分服务端和客户端环境并结合 forceInit 属性强制初始化编辑器

11.二次开发

本组件提供了 beforeInit 钩子,它会在 UEditor 的 scripts 加载完毕之后、编辑器初始化之前触发,你可以在此时机,通过操作 window.UE 对象,来进行诸如添加自定义按钮、弹窗等的二次开发。beforeInit 的触发函数以 编辑器 id 和 配置参数 作为入参。下面提供了一个简单的自定义按钮和自定义弹窗的示例,DEMO 仓库中也提供了自定义“表格居中”按钮的示例,如果有更多二次开发的需求,你可以参考官方 API 或者 UEditor 源码 中的示例。

// 自定义按钮Demo
<vue-ueditor-wrap v-model="msg" @beforeInit="addCustomButtom"></vue-ueditor-wrap>

addCustomButtom (editorId) {
  window.UE.registerUI('test-button', function (editor, uiName) {
    // 注册按钮执行时的 command 命令,使用命令默认就会带有回退操作
    editor.registerCommand(uiName, {
      execCommand: function () {
        editor.execCommand('inserthtml', `<span>这是一段由自定义按钮添加的文字</span>`)
      }
    })
 
    // 创建一个 button
    var btn = new window.UE.ui.Button({
      // 按钮的名字
      name: uiName,
      // 提示
      title: '鼠标悬停时的提示文字',
      // 需要添加的额外样式,可指定 icon 图标,图标路径参考常见问题 2
      cssRules: "background-image: url('/test-button.png') !important;background-size: cover;",
      // 点击时执行的命令
      onclick: function () {
        // 这里可以不用执行命令,做你自己的操作也可
        editor.execCommand(uiName)
      }
    })
 
    // 当点到编辑内容上时,按钮要做的状态反射
    editor.addListener('selectionchange', function () {
      var state = editor.queryCommandState(uiName)
      if (state === -1) {
        btn.setDisabled(true)
        btn.setChecked(false)
      } else {
        btn.setDisabled(false)
        btn.setChecked(state)
      }
    })
 
    // 因为你是添加 button,所以需要返回这个 button
    return btn
  }, 0 /* 指定添加到工具栏上的哪个位置,默认时追加到最后 */, editorId /* 指定这个 UI 是哪个编辑器实例上的,默认是页面上所有的编辑器都会添加这个按钮 */)
}



// 自定义弹窗Demo
<vue-ueditor-wrap v-model="msg" @beforeInit="addCustomDialog"></vue-ueditor-wrap>

addCustomDialog (editorId) {
  window.UE.registerUI('test-dialog', function (editor, uiName) {
    // 创建 dialog
    var dialog = new window.UE.ui.Dialog({
      // 指定弹出层中页面的路径,这里只能支持页面,路径参考常见问题 2
      iframeUrl: '/customizeDialogPage.html',
      // 需要指定当前的编辑器实例
      editor: editor,
      // 指定 dialog 的名字
      name: uiName,
      // dialog 的标题
      title: '这是一个自定义的 Dialog 浮层',
      // 指定 dialog 的外围样式
      cssRules: 'width:600px;height:300px;',
      // 如果给出了 buttons 就代表 dialog 有确定和取消
      buttons: [
        {
          className: 'edui-okbutton',
          label: '确定',
          onclick: function () {
            dialog.close(true)
          }
        },
        {
          className: 'edui-cancelbutton',
          label: '取消',
          onclick: function () {
            dialog.close(false)
          }
        }
      ]
    })
 
    // 参考上面的自定义按钮
    var btn = new window.UE.ui.Button({
      name: 'dialog-button',
      title: '鼠标悬停时的提示文字',
      cssRules: `background-image: url('/test-dialog.png') !important;background-size: cover;`,
      onclick: function () {
        // 渲染dialog
        dialog.render()
        dialog.open()
      }
    })
 
    return btn
  }, 0 /* 指定添加到工具栏上的那个位置,默认时追加到最后 */, editorId /* 指定这个UI是哪个编辑器实例上的,默认是页面上所有的编辑器都会添加这个按钮 */)
}

// 弹出层中的 HTML 页面 customizeDialogPage.html
<!DOCTYPE html>
<html>
 
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="renderer" content="webkit">
  <!--页面中一定要引入internal.js为了能直接使用当前打开dialog的实例变量-->
  <!--internal.js默认是放到 UEditor/dialogs 目录下的-->
  <script type="text/javascript" src="./UEditor/dialogs/internal.js"></script> 
</head>
 
<body>
  <h1>hello vue-ueditor-wrap</h1>
  <script>
    //可以直接使用以下全局变量
    //当前打开dialog的实例变量
    console.log('editor: ' + editor);
    //一些常用工具
    console.log('domUtils: ' + domUtils);
    console.log('utils: ' + utils);
    console.log('browser: ' + browser);
    dialog.onok = function() {
      editor.execCommand('inserthtml', '<span>我点击了确定</span>');
    };
    dialog.oncancel = function() {
      editor.execCommand('inserthtml', '<span>我点击了取消</span>');
    };
  </script> 
</body>
 
</html>

 

发表评论

全部评论:1条

神秘网友 2019-09-10

火火恍恍惚惚

lmy233

努力工作学习生活的人呐~~

联系方式

神圣之子仅供学习交流
E-mail:limengyu233@163.com
github:https://github.com/lmy01