vue typescript 使用tinymce5富文本编辑器

谁借莪１个温暖的怀抱￠ 2023-03-14 13:22 18阅读 0赞

#### 1.安装tinymce、tinymce ts声明文件 ####

npm install tinymce -S
    npm install @types/tinymce -S

安装之后，在 node\_modules 中找到 tinymce/skins 目录，然后将 skins 目录复制到 public/tinymce目录下  
同时下载简体中文[语言包][Link 1]文件，复制到 public/tinymce目录下  
![在这里插入图片描述][20200518164049307.png]  
skins文件夹及zh\_CN.js的路径在后面封装组件初始化tinymce时`init`配置中的`language_url`、`skin_url`会用到

#### 2.安装tinymce-vue ####

npm install @tinymce/tinymce-vue -S

#### 3.封装组件 ####

<template>
        <div>
            <editor :id="id" v-model="content" :init="init"></editor>
        </div>
    </template>
    
    <script lang="ts"> import { Component, Prop, Vue, Watch } from 'vue-property-decorator'; import tinymce from 'tinymce'; import Editor from '@tinymce/tinymce-vue'; import 'tinymce/themes/silver/theme'; import 'tinymce/plugins/image'; import 'tinymce/plugins/link'; import 'tinymce/plugins/code'; import 'tinymce/plugins/table'; import 'tinymce/plugins/lists'; import 'tinymce/plugins/contextmenu'; import 'tinymce/plugins/wordcount'; import 'tinymce/plugins/colorpicker'; import 'tinymce/plugins/textcolor'; import 'tinymce/plugins/media'; import 'tinymce/plugins/fullscreen'; import 'tinymce/plugins/preview'; import 'tinymce/plugins/pagebreak'; import 'tinymce/plugins/insertdatetime'; import 'tinymce/plugins/hr'; import 'tinymce/plugins/paste'; import 'tinymce/plugins/codesample'; import 'tinymce/icons/default/icons'; console.log(tinymce); @Component({ name: 'TinymceEditer', components: { Editor } }) export default class extends Vue { //设置prop id @Prop({ default: 'vue-tinymce-' + +new Date() }) id!: string; //默认高度 @Prop({ default: 300 }) height!: number; @Prop({ default: '' }) private value!: string; private content: string = ''; @Watch('value') private onChangeValue(newVal: string) { this.content = newVal; } @Watch('content') private onChangeContent(newVal: string) { this.$emit('input', newVal); } //富文本框init配置 private get init() { return { selector: '#' + this.id, //富文本编辑器的id language: 'zh_CN', //语言 language_url: '/tinymce/zh_CN.js', //语言包 skin_url: '/tinymce/skins/ui/oxide', //编辑器需要一个skin才能正常工作，所以要设置一个skin_url指向之前复制出来的skin文件 menubar: false, //菜单条 plugins: 'link lists image code table colorpicker textcolor wordcount contextmenu media table fullscreen preview pagebreak insertdatetime hr paste codesample emoticons', //插件 toolbar: 'bold italic underline strikethrough | fontselect | fontsizeselect | formatselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | removeformat| undo redo | link unlink image media insertdatetime table hr pagebreak codesample | code fullscreen preview', //工具条 font_formats: 'Arial=arial,helvetica,sans-serif; 宋体=SimSun; 微软雅黑=Microsoft Yahei; Impact=impact,chicago;', //字体 fontsize_formats: '11px 12px 14px 16px 18px 24px 36px 48px 64px 72px', //文字大小 height: this.height, //高度 branding: false, //水印 elementpath: false, //底部元素路径 paste_data_images: true, //允许粘贴图片 //初始化前执行 setup: (editor: any) => { }, //实例化执行 init_instance_callback: (editor: any) => { this.content && editor.setContent(this.content); //this.hasInit = true editor.on('NodeChange Change KeyUp SetContent', () => { //this.hasChange = true this.content = editor.getContent(); }); }, //视频设置回调 video_template_callback: (data: any) => { return `<video width=" ${ data.width} " height="${ data.height}" ${ data.poster ? 'poster="' + data.poster + '"' : ''} controls="controls"> <source src="${ data.source}"/> </video>`; }, //粘贴图片回调 images_upload_handler: (blobInfo: any, success: Function, failure: Function) => { this.handleImgUpload(blobInfo, success, failure); }, }; } private mounted() { this.content = this.value; } //上传图片 private handleImgUpload(blobInfo: any, success: Function, failure: Function) { this.$emit('upload', blobInfo, success, failure); } } </script>
    
    <style lang="scss"> .tox-tinymce-aux { z-index: 3000 !important; } </style>

配置项文档：[https://www.tiny.cloud/docs/configure/][https_www.tiny.cloud_docs_configure]  
插件文档：[https://www.tiny.cloud/docs/plugins/][https_www.tiny.cloud_docs_plugins]  
官方示例：[https://www.tiny.cloud/docs/demo/full-featured/][https_www.tiny.cloud_docs_demo_full-featured]  
中文文档：[http://tinymce.ax-z.cn/][http_tinymce.ax-z.cn]

#### 4.组件使用 ####

<template>
       <tinymce v-model="content" />
    </template>
    
    <script lang="ts"> import { Component, Vue } from 'vue-property-decorator'; import Tinymce from '@/components/tinymce/tinymce.vue'; @Component({ components: { Tinymce, }, }) export default class extends Vue { private content: string = ''; } </script>
    
    <style lang="scss" scoped></style>

#### 5.效果图 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpaGVmZWlfY29kZXI_size_16_color_FFFFFF_t_70]

插件列表

<table> 
 <thead> 
  <tr> 
   <th>名称</th> 
   <th>功能</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>advlist</td> 
   <td>高级列表</td> 
  </tr> 
  <tr> 
   <td>anchor</td> 
   <td>锚点插件</td> 
  </tr> 
  <tr> 
   <td>autolink </td> 
   <td>自动链接</td> 
  </tr> 
  <tr> 
   <td>autoresize </td> 
   <td>编辑器自适应</td> 
  </tr> 
  <tr> 
   <td>autosave </td> 
   <td>自动存稿</td> 
  </tr> 
  <tr> 
   <td>bbcode</td> 
   <td>特定格式简写输出，如加粗：[b]...[b]</td> 
  </tr> 
  <tr> 
   <td>charmap </td> 
   <td>特殊字符</td> 
  </tr> 
  <tr> 
   <td>code </td> 
   <td>编辑源码</td> 
  </tr> 
  <tr> 
   <td>codesample </td> 
   <td>代码示例</td> 
  </tr> 
  <tr> 
   <td>directionality </td> 
   <td>文字方向</td> 
  </tr> 
  <tr> 
   <td>emoticons </td> 
   <td>表情插件</td> 
  </tr> 
  <tr> 
   <td>fullpage </td> 
   <td>文档属性</td> 
  </tr> 
  <tr> 
   <td>fullscreen </td> 
   <td>全屏</td> 
  </tr> 
  <tr> 
   <td>help </td> 
   <td>帮助</td> 
  </tr> 
  <tr> 
   <td>hr </td> 
   <td>水平分割线</td> 
  </tr> 
  <tr> 
   <td>image </td> 
   <td>插入编辑图片</td> 
  </tr> 
  <tr> 
   <td>imagetools </td> 
   <td>图片编辑工具</td> 
  </tr> 
  <tr> 
   <td>importcss </td> 
   <td>引入css</td> 
  </tr> 
  <tr> 
   <td>insertdatetime </td> 
   <td>插入日期时间</td> 
  </tr> 
  <tr> 
   <td>legacyoutput </td> 
   <td>输出HTML4</td> 
  </tr> 
  <tr> 
   <td>link </td> 
   <td>超链接</td> 
  </tr> 
  <tr> 
   <td>lists </td> 
   <td>列表插件</td> 
  </tr> 
  <tr> 
   <td>media </td> 
   <td>插入编辑媒体</td> 
  </tr> 
  <tr> 
   <td>nonbreaking </td> 
   <td>插入不间断空格</td> 
  </tr> 
  <tr> 
   <td>noneditable </td> 
   <td>不可编辑元素</td> 
  </tr> 
  <tr> 
   <td>pagebreak </td> 
   <td>插入分页符</td> 
  </tr> 
  <tr> 
   <td>paste </td> 
   <td>粘贴插件</td> 
  </tr> 
  <tr> 
   <td>preview </td> 
   <td>预览</td> 
  </tr> 
  <tr> 
   <td>print </td> 
   <td>打印</td> 
  </tr> 
  <tr> 
   <td>quickbars </td> 
   <td>快速工具栏</td> 
  </tr> 
  <tr> 
   <td>save </td> 
   <td>保存</td> 
  </tr> 
  <tr> 
   <td>searchreplace </td> 
   <td>查找替换</td> 
  </tr> 
  <tr> 
   <td>spellchecker </td> 
   <td>拼写检查</td> 
  </tr> 
  <tr> 
   <td>tabfocus </td> 
   <td>tab切入切出</td> 
  </tr> 
  <tr> 
   <td>table </td> 
   <td>表格插件</td> 
  </tr> 
  <tr> 
   <td>template </td> 
   <td>内容模板</td> 
  </tr> 
  <tr> 
   <td>textcolor </td> 
   <td>文字颜色</td> 
  </tr> 
  <tr> 
   <td>textpattern </td> 
   <td>快速排版</td> 
  </tr> 
  <tr> 
   <td>toc </td> 
   <td>目录生成器</td> 
  </tr> 
  <tr> 
   <td>visualblocks </td> 
   <td>显示元素范围</td> 
  </tr> 
  <tr> 
   <td>visualchars </td> 
   <td>显示不可见字符</td> 
  </tr> 
  <tr> 
   <td>wordcount </td> 
   <td>字数统计</td> 
  </tr> 
 </tbody> 
</table>

[Link 1]: https://www.tiny.cloud/get-tiny/language-packages/
[20200518164049307.png]: /images/20230312/8689d3b3e3f94d3cbf58003d583751fe.png
[https_www.tiny.cloud_docs_configure]: https://www.tiny.cloud/docs/configure/
[https_www.tiny.cloud_docs_plugins]: https://www.tiny.cloud/docs/plugins/
[https_www.tiny.cloud_docs_demo_full-featured]: https://www.tiny.cloud/docs/demo/full-featured/
[http_tinymce.ax-z.cn]: http://tinymce.ax-z.cn/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpaGVmZWlfY29kZXI_size_16_color_FFFFFF_t_70]: /images/20230312/5318b522b61b4a89806632435cb7e82f.png