TinyMce-Vue使用心得

首先解释一下tinymce是什么？它是一款基于vue的前端编辑器插件。

ok，一句话解释完，不说废话，直接撸代码。

通过npm install tinymce-vue --save 安装完成之后，打开node_moudles --> @tinymce-->tinymce-vue.js 可以看到整个js文件包装成var Editor=(function(){});

所以我们的初始化方法以及引入的组件也就和Editor有很大关系

components:{'editor':Editor}

在script中可以建一个div包裹起来Editor如：

上面的init显然就是一个初始化的方法

data(){

      return{

            init:{

                 language_url:'/static/tinymce/zh_CN.js',

                language:'zh_CN',

                skin_url:'/static/tinymce/skins/lightgray',

                height:630,

               plugins:'link lists code table colorpicker textcolor wordcount  

                               contextmenu'

               toolbar:'bold italic underline strikethrough | fontsizeselect | forecolor backcolor | aligncenter aligncenter alignright alignjustify | bullist numlist |outdent indent blockquote | undo redo | link unlink image code | removeformat'

             branding:false                

            }

     }

}    

ok ,凯哥码完上面的init，就有疑惑了，这样就行了?

不是，还需要导入很多的文件

第一点，你需要在nodemoudles中找到tinymce里面的skin文件夹将它拷贝到static文件夹中

并且下载一个zh_CN.js文件与skin放在同一个目录下。

第二点，需要引入一堆头文件，但是其实可以根据自己的需求酌情引入

import tinymce from 'tinymce/tinymce' 

import 'tinymce/themes/modern/theme'

import Editor from '@tinymce/tinymce-vue'

import 'tinymce/plugins/image'

import 'tinymce/plugins/link'

import 'tinymce/plugins/code'

import 'tinymce/plugins/table'

import 'tinymce/plugins/lists'

import 'tinymce/plugins/contextmenu'

import 'tinymce/plugins/wordcount'

import 'tinymce/plugins/colorpicker'

import 'tinymce/plugins/textcolor'

怎么样是不是吓一跳？其实这里的原理就是将需要的js包引入到当前文件中

OK,第三点，马上就能出现我们想要的页面了在mounted初始化方法中初始化我们的tinymce

mounted(){

tinymce.init()；

}

OK ，终于可以看到我们的编辑器页面了

完美编辑器