tinymce富文本在vue3中使用

tinymce富文本在vue3中使用_第1张图片
可配置接口上传图片和视频、禁用状态、限制字符长度、自定义宽高、自定义配置项

  1. 引入tinymce
    npm install tinymce
    版本 “tinymce”: “^5.10.7”,
  2. 将tinymce静态资源包复制到public中(其中包括皮肤和中文包)

Editor.vue文件








tinymce.ts文件

export const plugins = [
  'image advlist anchor autolink code codesample  directionality  fullscreen hr insertdatetime link lists media nonbreaking noneditable pagebreak preview print save searchreplace spellchecker tabfocus  template  textpattern visualblocks visualchars wordcount wordlimit',
];

export const toolbar = [
  'fontsizeselect lineheight searchreplace bold italic underline strikethrough alignleft aligncenter alignright outdent indent  blockquote undo redo removeformat subscript superscript code codesample bullist numlist link  preview anchor pagebreak insertdatetime forecolor backcolor image media fullscreen wordcount',
];

插件参考中文文档:http://tinymce.ax-z.cn/

你可能感兴趣的:(vue.js)