tinymce在vue中使用

最新推荐文章于 2025-07-19 10:42:11 发布

原创最新推荐文章于 2025-07-19 10:42:11 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue

本文介绍了如何在Vue2.0环境下安装并使用TinyMCE编辑器，包括将tinymce文件夹复制到public/static下，以及代码实现和路径配置的注意事项，并提供了中文语言包的获取链接及最终成果的截图展示。

vue2.0环境

1、安装

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

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

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

<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、最后成果截图