在vue3中使用@tinymce/tinymce-vue进行富文本的编写以及外部插件的引用_vue3 tinymce-vue

前言：看文章，推荐的都是下载然后移入public，然后引入一大堆文件，事后发现，tinymce中提供了vue3的用法，而且不需要移动、引入，只需要在配置项里配置。

1.下载@tinymce/tinymce-vue组件库

npm install @tinymce/tinymce-vue

附带官方链接将 TinyMCE 包与 Vue.js 框架一起使用

2.创建tinymce组件

<template>
  <div v-html="content"></div>
  <div class="tinymce-boxz">
    <Editor v-model="content" :api-key="tiny.apiKey" :init="tiny.init"/>
  </div>
</template>

<script lang="ts">
import {defineComponent, defineAsyncComponent, ref} from 'vue'
import Editor from "@tinymce/tinymce-vue";

export default defineComponent({
  components: {
    Editor
  },
  setup() {
    const content = ref("");
    const tiny = reactive({
      apiKey: "", //https://www.tiny.cloud/auth/signup/(获取key链接，要记得自己申请)
      init: {
        language: "zh_CN", //语言类型
        placeholder: "在这里输入文字", //textarea中的提示信息
        min_width: 320,
        min_height: 220,
        height: 500, //注：引入autoresize插件时，此属性失效
        resize: "both", //编辑器宽高是否可变，false-否,true-高可变，'both'-宽高均可，注意引号
        branding: true, //tiny技术支持信息是否显示
        // statusbar: false,  //最下方的元素路径和字数统计那一栏是否显示
        // elementpath: false, //元素路径是否显示
        draggable_modal: true,
        menubar: false,//菜单栏配置
        // menubar: "file edit my1", //菜单栏配置，设为false则隐藏，不配置则默认显示全部菜单，也可自定义配置--查看 http://tinymce.ax-z.cn/configure/editor-appearance.php --搜索“自定义菜单”
        plugins: 'preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media' +
            ' code codesample table charmap pagebreak nonbreaking anchor insertdatetime advlist lists wordcount' +
            ' autosave autoresize accordion',//插件配置，因为一些功能需要插件
        toolbar: ['undo redo | fontfamily fontsize forecolor backcolor bold italic underline | lineheight outdent indent',
          'alignleft aligncenter alignright alignjustify| image media table charmap| bullist numlist| accordion accordionremove',
            'preview',//工具栏配置，数组代表一行，以|进行分组

        ],
        // images_upload_url: '/apib/api-upload/uploadimg',  //后端处理程序的url，建议直接自定义上传函数image_upload_handler，这个就可以不用了
        // images_upload_base_path: '/demo',  //相对基本路径--关于图片上传建议查看--http://tinymce.ax-z.cn/general/upload-images.php
        fontsize_formats: '12px 14px 16px 18px 24px 36px 48px 56px 72px',
        font_formats: '微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;',
        paste_data_images: true, //图片是否可粘贴
        file_picker_types: "image", //file image media分别对应三个类型文件的上传：link插件，image和axupimgs插件，media插件。想屏蔽某个插件的上传就去掉对应的参数
        // 文件上传处理函数
        automatic_uploads: false,
        images_upload_handler(blobInfo: any, success: any, failure: any) {
          return new Promise((resolve, reject) => {
            console.log(blobInfo.base64())
            resolve('data:' + blobInfo.blob().type + ';base64,' + blobInfo.base64());
          })
        }
      }
    })
    return {
      content,
      tiny
    }
  },
})
</script>

<style lang="less" scoped></style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65

参数数据：TinyMCE Vue.js 集成技术参考

3.插入额外插件（以数学公式为例）

在node_modules->@tinymce->tintmce-vue->package.josn中可以看到如下参数
封装了4、5、6，默认版本为6，在初始化init的时候，可以通过cloud-channel进行修改。
综合考虑，使用mathtype，使用组件库为@wiris/mathtype-tinymce
官方链接MathType for TinyMCE记得直接点击Frontend目录，这才是我们需要的！
注：这里我按官方文档走并没有成功，我使用的以下途径

1.下载

npm install @wiris/mathtype-tinymce6（根据tinymce的版本确定数字）

2.配置

 init: {
 ...同组件代码一言，不在展示
        external_plugins: {'tiny_mce_wiris': '/node_modules/@wiris/mathtype-tinymce6/plugin.min.js',},//node_modules前必须加/

        extended_valid_elements: '*[.*]',
        toolbar: ['...tiny_mce_wiris_formulaEditor...',
            '...',//工具栏配置
        ],
      }
1
2
3
4
5
6
7
8
9

4.运行效果