TinyMCE富文本编辑器在vue项目中如何配置

以下直接展示配置过程，插件api及介绍可以查看 中文文档 或者 英文官网

一、安装

npm install tinymce -S
npm install @tinymce/tinymce-vue -S

注意：不同版本tinymce和@tinymce/tinymce-vue可能存在不匹配的情况，我在尝试多次后，将@tinymce/tinymce-vue选定为一年前发布的版本，具体安装信息为

npm install [email protected] -S

npm install @tinymce/[email protected] -S

二、插件配置

//TinyEditor.vue组件编写
<template>
  <editor
    v-model="myValue"
    :init="init"
    :disabled="disabled">
  </editor>
</template>
<script>
  import tinymce from "tinymce"
  import Editor from "@tinymce/tinymce-vue"
  import "tinymce/themes/silver"
  import "tinymce/icons/default"
  import "tinymce/plugins/table"
  import "tinymce/plugins/lists"
  import "tinymce/plugins/link"
  import "tinymce/plugins/image"
  import "tinymce/plugins/imagetools"
  import "tinymce/plugins/media"
  import "tinymce/plugins/code"
  import "tinymce/plugins/codesample"
  import "tinymce/plugins/anchor"
  import "tinymce/plugins/emoticons/js/emojis.min"
  import "tinymce/plugins/emoticons"
  import "tinymce/plugins/wordcount"
  import "tinymce/plugins/preview"
  import "tinymce/plugins/fullpage"
  import "tinymce/plugins/fullscreen"

  export default {
    props: {
      value: {
        type: String,
        default: ""
      },
      text: {
        type: String,
        default: ""
      },
      disabled: {
        type: Boolean,
        default: false
      },
      plugins: {
        type: [String, Array],
        default:
          'table lists link image imagetools media code codesample anchor emoticons wordcount preview fullpage fullscreen'
      },
      toolbar: {
        type: [String, Array],
        default() {
          return [
            'bold italic underline strikethrough removeformat | fontsizeselect fontselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | code | bullist numlist | outdent indent blockquote | undo redo | link unlink | codesample preview'
          ];
        }
      }
    },
    data() {
      return {
        init: {
          theme: "silver", //主题
          skin_url: "/static/tinymce/skins/ui/oxide", //皮肤，从node_modules拷贝至/static/tinymce
          content_css: "/static/tinymce/plugins/prism/tomorrow-night.css", //自定义样式，这里使用prism.js来实现代码高亮，从prism.js官网下载
          height: "700px",
          width: '100%',
          menubar: true, //菜单栏
          toolbar: this.toolbar, //工具栏
          elementpath: false,
          branding: false, //展示技术支持(如由Tiny驱动)
          language_url: "/static/tinymce/zh_CN.js", //语言包，从开头的 中文文档 站点下载
          language: "zh_CN", //语言
          codesample_global_prismjs: true,
          codesample_languages: [
            {text: 'JavaScript', value: 'js'},
            {text: 'HTML', value: 'html'},
            {text: 'CSS', value: 'css'},
            {text: 'NodeJS', value: 'nodejs'},
            {text: 'Java', value: 'java'},
            {text: 'Python', value: 'python'},
            {text: 'PowerShell', value: 'powershell'},
            {text: 'nginx', value: 'nginx'},
            {text: 'Markdown', value: 'md'},
            {text: 'JSON5', value: 'json5'},
            {text: 'Log file', value: 'log'}
          ],
          plugins: this.plugins, //插件
          zIndex: 1101,
        },
        myValue: this.value
      };
    },
    mounted() {
      tinymce.init({});
    },
    methods: {
      getText() {
        const activeEditor = tinymce.activeEditor; 
        const editBody = activeEditor.getBody(); 
        activeEditor.selection.select(editBody); 
        return activeEditor.selection.getContent({ 'format' : 'text' }).replace(/\r?\n/g, ' ');
      }
    },
    components: {
      Editor
    },
    watch: {
      value(newValue) {
        this.myValue = newValue;
      },
      myValue(newValue) {
        this.$emit("input", newValue);
      }
    }
  };
</script>

三、TinyEditor组件使用

//在test.vue页面中使用
<template>
  <div>
    <TinyEditor ref="tinyEditor" :value="content" @input="(res)=> content=res" />
  </div>
</template>

<script>
  import TinyEditor from '@/components/TinyEditor'

  export default {
    data() {
      return {
        content: null
      }
    },
    methods: {
      //获取富文本编辑器内纯文本内容的方法，不包含链接图片视频
      getText() {
        return this.$refs.tinyEditor.getText();
      }
    },
    components: {
      TinyEditor
    }
  }
</script>

完成以上配置，不出意外，编辑器就可以使用了。

原文链接：https://www.helloque.site/article/4