vue中TinyMCE编辑器的使用

vue中TinyMCE编辑器的使用

• TinyMCE是一个轻量级的基于浏览器的所见即所得编辑器。富文本编辑器
• UEditor：百度前端的开源项目，功能强大，基于 jQuery，但已经没有再维护，而且限定了后端代码，修改起来比较费劲
• bootstrap-wysiwyg：微型，易用，小而美，只是 Bootstrap + jQuery…
• 所以项目中用到的是TinyMCE，可前后端分离。
• 可购买 tinymce 的服务，可以参考 tinymce-vue 的说明，通过 api-key 直接使用 tinymce。也可以下载 tinymce来使用。
• 安装与使用：
  1. 安装：npm install tinymce -S
  2. 安装之后，在 node_modules 中找到 tinymce/skins 目录，然后将 skins 目录拷贝到 static 目录下。tinymce 默认是英文界面，所以还需要下载一个中文语言包zh_CN.js
  3. 下载中文语言包，附上地址下载链接
     
  4. 扩展插件：
     添加plugins.js插件和toolbar.js工具栏插件

plugins.js
// Any plugins you want to use has to be imported
// Detail plugins list see https://www.tinymce.com/docs/plugins/
// Custom builds see https://www.tinymce.com/download/custom-builds/

const plugins = ['advlist anchor autolink autosave code codesample colorpicker colorpicker contextmenu directionality emoticons fullscreen hr image imagetools importcss insertdatetime legacyoutput link lists media nonbreaking noneditable pagebreak paste preview print save searchreplace spellchecker tabfocus table template textcolor textpattern visualblocks visualchars wordcount']

export default plugins

toolbar.js
// Here is a list of the toolbar
// Detail list see https://www.tinymce.com/docs/advanced/editor-control-identifiers/#toolbarcontrols

const toolbar = ['bold italic underline strikethrough alignleft aligncenter alignright outdent indent undo redo removeformat code preview fullscreen', 'link charmap insertdatetime media table forecolor backcolor']

export default toolbar

项目中使用：

组件：

在页面中使用：
    
      
参数
      
    
import Tinymce from '@/components/Tinymce'
  components: { Tinymce},