vue tinymce安装及使用

vue tinymce安装及使用

参考

参考 vue-tinymce-example

第一步，安装

npm i tinymce @packy-tang/vue-tinymce

第二步，搬运tinymce

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

cp node_modules/tinymce/ public/

复制后在根目录下public里

public/tinymce

第三步，全局引入的本地化处理

中文包或其他语言下载地址：官方语言包地址
将zh_CN.js文件直接放到public/tinymce/langs/目录下就可以了，配置时加上{language: ‘zh_CN’}的设置就能实现。

第四步，引入并挂载插件

main.js 增加代码

import tinymce from 'tinymce'

import VueTinymce from '@packy-tang/vue-tinymce'

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

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

第五步，使用插件

在所需页面html里增加

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

在js里增加

<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>

详细配置请参考 tinymce官网和tinymce中文网

tinymce官网
tinymce中文网