vue中使用tiny-mce的使用心得

哎呦妈呀，可累死我了，这个富文本搞了我好几天，终于有点眉目了，效果如图

首先安装两个npm包

npm install @tinymce/tinymce-vue -S
npm install tinymce -S

安装之后，在 node_modules 中找到 tinymce/skins 目录，然后将 skins 目录拷贝到 static 目录下

tinymce 默认是英文界面，所以还需要下载一个中文语言包

然后将这个语言包放到 static 目录下，为了方便管理，我新建了一个tinymce目录

---

然后在页面中引入如下文件

import Editor from '@tinymce/tinymce-vue'

Editor 需要在 components 中注册，然后直接使用

components:{
    Editor
}

<Editor api-key="no-api-key" :init="editorInit" v-model="tinymceHtml"/>

最后需要在 data 中配置tinymce

data(){
    return{
        editorInit: {
                language_url: '/static/tinymce/zh_CN.js',//你下载的语言包的路径
                language: 'zh_CN',
                skin_url: '/static/tinymce/skins/ui/oxide',//主题
                height: 700,
                max_height:700,
                menubar:false,//隐藏默认菜单栏
                branding: false,//隐藏右下角商标
                plugins: 'preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template code bbcode codesample table charmap hr pagebreak nonbreaking anchor insertdatetime advlist lists wordcount imagetools textpattern help autosave bbcode',//这里所有的插件需要先引入，否则会报错
                //toolbar 数组的每一项代表每一行,超出会换行, | 代表分组，每个插件用空格隔开
                toolbar: ['code codesample undo redo restoredraft | cut copy paste pastetext | forecolor backcolor bold italic underline strikethrough link anchor | alignleft aligncenter alignright alignjustify',
                        '|  outdent indent | styleselect  fontselect fontsizeselect | bullist numlist | blockquote subscript superscript removeformat | table image media charmap emoticons hr pagebreak insertdatetime \
                         print preview | fullscreen | bdmap indent2em lineheight formatpainter axupimgs'],
                fontsize_formats: '12px 14px 16px 18px 24px 36px 48px 56px 72px',
                font_formats: '微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings,zapf dingbats;知乎配置=BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei, sans-serif;小米配置=Helvetica Neue,Helvetica,Arial,Microsoft Yahei,Hiragino Sans GB,Heiti SC,WenQuanYi Micro Hei,sans-serif',
            }
    }
}

 

这样就可以在页面上使用tinymce了,具体的配置详情见官网