第一步，安装
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>
