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

Vue

2019-09-09

195

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.绑定数据


  

data () {
  return {
    msg: '

Vue + UEditor + v-model双向绑定

' } }

到此,初始化UEditor便OK了。

 

6.自定义配置

// 添加config属性,可修改菜单

  

data () {
  return {
    msg: '

Vue + UEditor + v-model双向绑定

', 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实例


  

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

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


  

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

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


  

可选值:observer,listener

默认值:observer

参数说明:

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


   
  
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

  

addCustomButtom (editorId) {
  window.UE.registerUI('test-button', function (editor, uiName) {
    // 注册按钮执行时的 command 命令,使用命令默认就会带有回退操作
    editor.registerCommand(uiName, {
      execCommand: function () {
        editor.execCommand('inserthtml', `这是一段由自定义按钮添加的文字`)
      }
    })
 
    // 创建一个 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

  

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


 

  
  
  Title
  
  
  
  
  
  
  
  
   


 

hello vue-ueditor-wrap

 

发表评论

全部评论:1条

神秘网友 2019-09-10

火火恍恍惚惚

lmy233

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

联系方式

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