富文本编辑器tinymce在vue中的使用

Posted zhangdongya

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了富文本编辑器tinymce在vue中的使用相关的知识，希望对你有一定的参考价值。

前言

 前面两篇介绍的是lodop打印，本篇介绍的富文本编辑器tinymce在我的项目中与之有所关联。

正文

tinymce在富文本编辑器中绝对是第一梯队的，而且无需后端做什么，前端引入也简单。

英文官网：https://www.tiny.cloud/docs/
中文文档：http://tinymce.ax-z.cn/

引入项目中：

npm install tinymce -S
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‘

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>" + this.myValue + "</body>";
LODOP.ADD_PRINT_HTML(0,0,"210mm","297mm",strFormHtml);
this.LODOP.PREVIEW();

 

如果要把富文本功能写入公共组件，可参考此文章：https://blog.csdn.net/Amanda_wmy/article/details/88550155

 

以上是关于富文本编辑器tinymce在vue中的使用的主要内容，如果未能解决你的问题，请参考以下文章

vue项目中使用tinymce富文本的踩坑经历

vue中引入Tinymce富文本编辑器

在 Vue 项目中引入 tinymce 富文本编辑器

富文本编辑器TinyMCE的使用(React Vue)

在vue cli 3脚手架里引入tinymce 5富文本编辑器

tinymce富文本编辑器