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

以下间接展现配置过程，插件 api 及介绍能够查看 中文文档 或者 英文官网

一、装置

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

留神：不同版本 tinymce 和 @tinymce/tinymce-vue 可能存在不匹配的状况，我在尝试屡次后，将 @tinymce/tinymce-vue 选定为一年前公布的版本，具体装置信息为

npm install tinymce@5.8.2 -S

npm install @tinymce/tinymce-vue@3.2.2 -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