Vue+Webpack完美整合富文本編輯器TinyMce的方法

2019-11-19 12:26:30

字體：大中小

來源：轉載

供稿：網友

選擇一個合適的富文本編輯器對于一個前端項目至關重要，這次我基于Vue來開發我項目中的前端部分，經過權衡選擇了tinymce。其在UI，功能都很適合，tinymce官方文檔：點擊打開鏈接；

引入tinymce 我選用的版本4.7.4

npm install tinymce -S

將tinymce創建為Vue的組件，便于日后復用，創建組件editor.vue

<template>    <textarea :id="id" :value="value"></textarea></template><script>  // Import TinyMCE  import tinymce from 'tinymce/tinymce';  import 'tinymce/themes/modern/theme';  import 'tinymce/plugins/paste';  import 'tinymce/plugins/link';  const INIT = 0;  const CHANGED = 2;  var EDITOR = null;  export default {    props: {      value: {        type: String,        required: true      },      setting: {}    },    watch: {      value: function (val) {        console.log('init ' + val)        if (this.status == INIT || tinymce.activeEditor.getContent() != val){          tinymce.activeEditor.setContent(val);        }        this.status = CHANGED      }    },    data: function () {      return {        status: INIT,        id: 'editor-'+new Date().getMilliseconds(),      }    },    methods: {    },    mounted: function () {      const _this = this;      const setting =        {          selector:'#'+_this.id,          language:"zh_CN",          init_instance_callback:function(editor) {            EDITOR = editor;            console.log("Editor: " + editor.id + " is now initialized.");            editor.on('input change undo redo', () => {              var content = editor.getContent()              _this.$emit('input', content);            });          },          plugins:[]        };      Object.assign(setting,_this.setting)      tinymce.init(setting);    },    beforeDestroy: function () {      tinymce.get(this.id).destroy();    }  }  </script>

在鉤子mounted 進行了tinymce的初始化工作，調用 tinymce.init(setting),setting為配置信息這樣我們便初步配置完成了editor組件

在其他頁面使用組件

<template>  <div class="app-container">    <div>      <!-- 組件有兩個屬性 value 傳入內容雙向綁定 setting傳入配置信息 -->      <editor class="editor" :value="content" :setting="editorSetting" @input="(content)=> content = content"></editor>    </div>   </div></template><script>  import editor from '@/components/editor'  export default {    name: "editor-demo",    data: function () {      return {        content:'我是富文本編輯器的內容',        //tinymce的配置信息 參考官方文檔 https://www.tinymce.com/docs/configure/integration-and-setup/        editorSetting:{          height:400,        }      }    },    components:{      'editor':editor    }  }</script><style scoped></style>

此刻我們已經完成了百分之90的配置，最后只需將node_modules/_tinymce@4.7.4@tinymce/文件夾下的skins文件夾放置于項目根目錄下，這樣tinymce才可獲取皮膚css文件

下載并解壓語言包langs文件夾放置項目根目錄，中文下載鏈接，其他語言包選擇；

之后在頁面輕松使用組件