vue tinymce安装及使用

vue-tinymce-example

第一步，安装

npm i tinymce @packy-tang/vue-tinymce

第二步，搬运

复制node_modules/tinymce目录下所有文件至public/目录下

cp node_modules/tinymce/ public/

复制后大致是这样的

public/tinymce

然后在public/index.html页面全局引入tinymce

<div id="app"></div>

<!-- built files will be auto injected -->

<script src="./tinymce/tinymce.min.js"></script><!-- tinymce -->

全局引入的本地化处理

将zh_CN.js文件直接放到public/tinymce/langs/目录下就可以了，配置时加上{language: zh_CN }的设置就能实现。

第三步，引入并安装插件

import tinymce from tinymce

import VueTinymce from @packy-tang/vue-tinymce

Vue.prototype.$tinymce = tinymce // 将全局tinymce对象指向给Vue作用域下

Vue.use(VueTinymce) // 安装vue的tinymce组件

具体看main.js

第四步，使用插件

<VueTinymce id="tinymce"  v-model="content" :setting="setting"></VueTinymce>

<script>

export default {

    name: app ,

    data(){

        return {

            content: 123123123 ,

            setting: {

                menubar: false,

                toolbar: "undo redo | fullscreen | formatselect alignleft aligncenter alignright alignjustify | link unlink | numlist bullist | image media table | fontselect fontsizeselect forecolor backcolor | bold italic underline strikethrough | indent outdent | superscript subscript | removeformat |",

                toolbar_drawer: "sliding",

                quickbars_selection_toolbar: "removeformat | bold italic underline strikethrough | fontsizeselect forecolor backcolor",

                plugins: "link image media table lists fullscreen quickbars",

                language: zh_CN , //本地化设置

                height: 350

            }

        }

    }

}</script>