2. 在template中添加富文本组件

<tinymce v-model="noticeForm.content"
          :toolbar="[ 'bold italic underline strikethrough  alignleft aligncenter alignright alignjustify bullist   numlist  styleselect removeformat hr   subscript superscript  formatselect   fontselect fontsizeselect forecolor backcolor  preview anchor pagebreak insertdatetime  table emoticons charmap fullscreen']"
          :menubar="'file edit view format '"

其中所有入参的参数,都需要在组建inti方法中初始化,不然入参没有用
Tinymc初始化实例:

tinymce.init({
    selector: 'textarea',
    toolbar: 'undo redo | styleselect | bold italic | link image',
    menubar: 'file edit'
});

TinyMCE默认的工具栏按钮列表:

lineheight(行高 5.5新增)
newdocument(新文档)
bold(加粗)
italic(斜体)
underline(下划线)
strikethrough(删除线)
alignleft(左对齐)
aligncenter(居中对齐)
alignright(右对齐)
alignjustify(两端对齐)
styleselect(格式设置)
formatselect(段落格式)
fontselect(字体选择)
fontsizeselect(字号选择)
cut(剪切)
copy(复制)
paste(粘贴)
bullist(项目列表UL)
numlist(编号列表OL)
outdent(减少缩进)
indent(增加缩进)
blockquote(引用)
undo(撤销)
redo(重做/重复)
removeformat(清除格式)
subscript(下角标)
superscript(上角标)

默认menubar控件:

lineheight(行高 5.5新增)
newdocument(新文档))
undo(撤销))
redo(重做/重复)
visualaid(网格线)
cut(剪切)
copy(复制))
paste(粘贴))
selectall(全选)
bold(加粗))
italic(斜体))
underline(下划线))
strikethrough(删除线))
subscript(下角标))
superscript(上角标))
removeformat(清除格式))
formats(格式)

3. 实现效果如下

tinyMCE 富文本编辑器 line-height 行高插件。 tinyMCE富文本编辑器line-height行高插件,下载后放在tinyMCE插件的plugins文件夹中,之后初始化中引入plugins,即可在toolbar中展示 tinyMCE line-height 行高插件 [removed][removed] <tinymce height=200 ref=editor v-model=editForm.fdcNote></tinymce>          在其他子文件中引入这个 import tinymce from '../components/Tinymce'; components: { tinymce 然后就可以调用起这 upfilepluginminjsupfilepluginminjsupfile是我自定义插件名称,位置tinymcepluginsupfiletinymcepluginsupfilewwwtinyclouddocsapitinymcetinymceaddonmanagerwwwt。 配置项所属插件描述newdocument核心创建新文档bold核心加粗italic核心斜体underline核心下划线strikethrough核心删除线alignleft核心居左aligncenter核心居中alignright核心居右alignjustify核心两端对齐alignnone核心清除styleselect核心格式选择下拉框(缩进、行高)formatselect核心段落选择下拉框(段落、标题)fontselect核心字体选择下拉框fontsizeselect核心字号选择下拉框cut核心剪切c. vue-cli 版本 :@vue/cli 4.5.15查看脚手架版本的方法:Win + R 打开运行输入: cmd ,打开控制台输入 vue -Vvue 版本:"vue": "^2.6.11",