富⽂本编辑器tinymce在vue中的使⽤
前⾔
前⾯两篇介绍的是lodop打印，本篇介绍的富⽂本编辑器tinymce在我的项⽬中与之有所关联。
正⽂
tinymce在富⽂本编辑器中绝对是第⼀梯队的，⽽且⽆需后端做什么，前端引⼊也简单。
引⼊项⽬中：
npm install tinymce -Shtml富文本框
npm @tinymce/tinymce-vue -S
import tinymce from 'tinymce/tinymce'
import Editor from '@tinymce/tinymce-vue'
引⼊插件(插件很多，我这⾥只是做表格需要的，如果你需要更多，可去中⽂⽂档⽹站内的插件使⽤中查):
import 'tinymce/plugins/table'
import 'tinymce/plugins/contextmenu'
将node_moudles⾥⾯tinymce⾥的skins⽂件复制，放⼊public中。
中⽂语⾔包zh_CN.js也需要放⼊⽬录中，然后在配置中引⼊。
template：
<div class="tinymce-editor">
<editor v-model="myValue" :init="init"></editor>
</div>
script：
import tinymce from 'tinymce/tinymce'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/plugins/table'
import 'tinymce/plugins/contextmenu'
import 'tinymce/themes/modern/theme'
components: { Editor },
data() {
return {
myValue: '',
init: {
selector: '#tinymce', // 容器，可使⽤css选择器
language_url: '/static/tinymce4.7.5/langs/zh_CN.js', //public⽬录下
language: 'zh_CN',
height: 300,
branding: false, // 去掉底部⽔印
// statusbar: false, // 隐藏编辑器底部的状态栏(如果隐藏，则拖拽功能也隐藏)
elementpath: false, // 禁⽤编辑器底部的状态栏
menubar: false, // 隐藏最上⽅menu
plugins: ['table contextmenu'], // 引⼊插件
toolbar: 'bold italic underline strikethrough table | fontsizeselect | alignleft aligncenter alignright alignjustify |outdent indent blockquote | undo redo | removeformat' // 菜单配置（⼀个单词代表了⼀个功能）        }
}
}
如果报“theme.js:1 Uncaught SyntaxError: Unexpected token <”这个错，很可能是你在配置项plugins属
性中写了⼀个插件，但没有使⽤import引⼊此插件
如果要使⽤打印功能，我上篇写了⼀个lodop打印⼯具，tinymce和lodop结合如下（预览功能）：
this.LODOP = getLodop() // 获取Lodop
var strFormHtml="<body>" + Value + "</body>";
LODOP.ADD_PRINT_HTML(0,0,"210mm","297mm",strFormHtml);
this.LODOP.PREVIEW();

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。