tinymce在vue中使用

​

 vue2.0环境

1、安装

npm install --save "@tinymce/tinymce-vue@^3"
npm install tinymce -S

2、将node_modules文件夹中tinymce文件夹复制到public/static 下

3、具体代码参考一下文件，注意路径参照自己的写，zh-CH文件见tinymce.ax-z.cn/static/tiny…

<template>
    <div class='tinymce'>
        <h1>tinymce</h1>
        <editor id='tinymce' v-model='tinymceHtml' :init='init'></editor>
<!--        <div v-html='tinymceHtml'></div>-->
    </div>
</template>

<script>
    import tinymce from 'tinymce/tinymce'
    import 'tinymce/themes/silver/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'
    import 'tinymce/icons/default/icons.min.js'
    export default {
        name: 'fwenben2',
        data () {
            return {
                tinymceHtml: '请输入内容',
                init: {
                   language_url: '/static/zh_CN.js',
                    language: 'zh_CN',
                    skin_url: '/static/tinymce/skins/ui/oxide',
                    height: 300,
                    plugins: 'link lists ',
                    toolbar:
                        'bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | undo redo | link unlink image code | removeformat',
                    branding: false,
                    init_instance_callback : function(editor) {
                        //监听初始化完成事件
                           //在dialog中使用此组件需要有下面这句，否则设置框会在dialog的下面
                        //document.querySelector(".tox-tinymce-aux").style.zIndex = 10000
                    }
                }
            }
        },
        mounted () {
            tinymce.init({})
        },
        components: {Editor}
    }
</script>

4、最后成果截图

​

\

​