vue.js引入tinymce富文本編輯器

1. 在官網下載tinymce生產用法所需要的所有文件；

   https://www.tinymce.com/

2. 在index.html文件中引入tinymce.min.js文件；<script src="static/tinymce/tinymce.min.js"></script>
3. 將tinymce插件內全部文件複製至項目中static文件夾內；
4. 在項目內新建公共組件

   <template>
     <div class='tinymce-container editor-container'>
       <textarea class='tinymce-textarea' :id="id"></textarea>
     </div>
   </template>
   <script>
     export default {
       name: 'tinymce',
       props: {
         id: {
           type: String,
           default: 'tinymceEditor'
         },
         value: {
           type: String,
           default: ''
         },
         toolbar: {
           type: Array,
           required: false,
           default() {
             return [
                       'undo redo | bold italic underline strikethrough removeformat | forecolor backcolor | fontselect fontsizeselect | alignleft aligncenter alignright alignjustify | separator link joinfimage'
                   ]
           }
         },
         data() {
           return {
             hasChange: false,
             hasInit: false
           }
         },
         menubar: {
           default: ''
         },
         height: {
           type: Number,
           required: false,
           default: 360
         }
       },
       watch: {
         value(val) {
           if (!this.hasChange && this.hasInit) {
             this.$nextTick(() => tinymce.get(this.id).setContent(val))
           }
         }
       },
       mounted() {
         const _this = this;
         tinymce.init({
           selector: `#${this.id}`,
           language: 'zh_CN',
           height: this.height,
           body_class: 'panel-body',
           object_resizing: true,
           toolbar: this.toolbar,
           menubar: false,
                   statusbar: false,
                   font_formats:"微軟雅黑=微軟雅黑,Microsoft YaHei;宋體=宋體,SimSun;黑體=黑體, SimHei;隸書=隸書, SimLi;楷體=楷體,楷體_GB2312, SimKai;andale mono=andale mono;arial=arial, helvetica,sans-serif;arial black=arial black,avant garde;comic sans ms=comic sans ms;impact=impact,chicago;Arial=Arial;Verdana=Verdana;Georgia=Georgia;Times New Roman=Times New Roman;Trebuchet MS=Trebuchet MS;Courier New=Courier New;Impact=Impact;Comic Sans MS=Comic Sans MS;Calibri=Calibri",
              images_upload_url: this.html_url+'/common/uploadFile', 
              imagetools_cors_hosts: ['www.tinymce.com', 'codepen.io'],
           plugins: [
            'advlist autolink lists link image preview anchor'
           ,'searchreplace visualblocks code fullscreen'
           ,'charmap colorpicker directionality emoticons nonbreaking'
           ,'tabfocus textcolor joinfimage'
         ],
         fontsizeFormats: '8pt 9pt 10pt 11pt 12pt 14pt 16pt 18pt 20pt 24pt 36pt 48pt',
         default_link_target: '_blank',
         link_title: false,
           init_instance_callback: editor => {
             if (_this.value) {
               editor.setContent(_this.value)
             }
             _this.hasInit = true;
             editor.on('NodeChange Change KeyUp', () => {
               this.hasChange = true;
               this.$emit('input', editor.getContent({ format: 'raw' }));
             });
           },
           setup(editor) {
             editor.addButton('h2', {
               title: '小標題', // tooltip text seen on mouseover
               text: '小標題',
               onclick() {
                 editor.execCommand('mceToggleFormat', false, 'h2');
               },
               onPostRender() {
                 const btn = this;
                 editor.on('init', () => {
                   editor.formatter.formatChanged('h2', state => {
                     btn.active(state);
                   });
                 });
               }
             });
             editor.addButton('p', {
               title: '正文',
               text: '正文',
               onclick() {
                 editor.execCommand('mceToggleFormat', false, 'p');
               },
               onPostRender() {
                 const btn = this;
                 editor.on('init', () => {
                   editor.formatter.formatChanged('p', state => {
                     btn.active(state);
                   });
                 });
               }
             });
             editor.on('joinimageuploadstart',function(e){
               _this.$message({duration:0,message:"正在上傳圖片..."});
             });
             editor.on('joinimageuploadend',function(e){
               _this.$message.closeAll();
             });
             editor.on('joinimageuploaderror',function(e){
                 _this.$message({duration:0,message:e.errMsg});
                 setTimeout(function(){
                     _this.$message.closeAll();
                 },3000);
             });
           }
         });
       },
       destroyed() {
         tinymce.get(this.id).destroy();
       }
     }
   </script>
   <style scoped>
     .tinymce-container {position: relative}
     .tinymce-textarea {visibility: hidden;z-index: -1;}
     .editor-custom-btn-container {position: absolute;right: 15px;top: 18px;}
     .editor-upload-btn {display: inline-block;}
   </style>

    

5. 在須要使用富文本編輯器的地方引入組建      

   import tinymce from 'components/assembly/tinymce'
   
   <tinymce :height=400 ref="editor" v-model="viewModel.content"></tinymce>
   
   
   

 　　6.上傳圖片使用 jquery.form.js