富文本编辑器tinymce

富文本编辑器tinymce

安装

npm i tinymce@5.10.3 @tinymce/tinymce-vue@3.2.8 -S

1.在node_modules中找到tinymce

2.复制skins文件夹，下载中文包

中文包下载地址

中文包下载连接，点击即可下载

1.在public中新建 tinymce 文件夹

2.将中文包下载好后解压出来，将langs文件夹复制到public/tinymce

3.把node_modules中tinymce下的skins文件夹复制到public/tinymce

3.在components文件夹中新建tinymce_editor.vue

<template>
  <div class="tinymce-editor">
    <Editor
        :id="editorId"
        v-model="editorValue"
        :init="editorInit"
    />
  </div>
</template>

<script>
// 引入组件
import tinymce from 'tinymce/tinymce';
import Editor from '@tinymce/tinymce-vue';
import 'tinymce/icons/default/icons';
import 'tinymce/themes/silver';
// 引入富文本编辑器主题的js和css
import 'tinymce/themes/silver/theme.min';
import 'tinymce/skins/ui/oxide/skin.min.css';
// 扩展插件

import "tinymce/themes/silver/theme";
import "tinymce/icons/default/icons";
import "tinymce/plugins/image"; // 插入上传图片插件
import "tinymce/plugins/media"; // 插入视频插件
import "tinymce/plugins/table"; // 插入表格插件
import "tinymce/plugins/link"; // 超链接插件
import "tinymce/plugins/code"; // 代码块插件
import "tinymce/plugins/lists"; // 列表插件
import "tinymce/plugins/contextmenu"; // 右键菜单插件
import "tinymce/plugins/wordcount"; // 字数统计插件
import "tinymce/plugins/colorpicker"; // 选择颜色插件
import "tinymce/plugins/textcolor"; // 文本颜色插件
import "tinymce/plugins/fullscreen"; // 全屏
import "tinymce/plugins/help"; // 帮助
import "tinymce/plugins/charmap";
import "tinymce/plugins/paste";
import "tinymce/plugins/print"; // 打印
import "tinymce/plugins/preview"; // 预览
import "tinymce/plugins/hr"; // 水平线
import "tinymce/plugins/anchor";
import "tinymce/plugins/pagebreak";
import "tinymce/plugins/spellchecker";
import "tinymce/plugins/searchreplace";
import "tinymce/plugins/visualblocks";
import "tinymce/plugins/visualchars";
import "tinymce/plugins/insertdatetime";
import "tinymce/plugins/nonbreaking";
import "tinymce/plugins/autosave";
import "tinymce/plugins/fullpage";
import "tinymce/plugins/toc";
import "tinymce/plugins/advlist";
import "tinymce/plugins/autolink";
import "tinymce/plugins/codesample";
import "tinymce/plugins/directionality";
import "tinymce/plugins/imagetools";
import "tinymce/plugins/noneditable";
import "tinymce/plugins/save";
import "tinymce/plugins/tabfocus";
import "tinymce/plugins/textpattern";
import "tinymce/plugins/template";


export default {
  name: 'TinymceEditor',
  components: {Editor},
  props: {
    height: {
      type: Number,
      default: 500
    },
    id: {
      type: String,
      default: 'tinymceEditor'
    },
    value: {
      type: String,
      default: ''
    },
    plugins: {
      type: [String, Array],
      default: 'link lists image code table wordcount media fullscreen preview paste contextmenu textcolor'
    },
    toolbar: {
      type: [String, Array],
      default: 'fontselect | bold italic underline strikethrough | link unlink image | undo redo | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | code | removeformat'
    }
  },
  data() {
    return {
      editorInit: {
        // language_url: '/tinymce/langs/zh_CN.js',
        language_url: 'https://lab.uxfeel.com/node_modules/tinymce/langs/zh_CN.js',
        language: 'zh_CN',
        skin_url: '/tinymce/skins/ui/oxide',
        content_css: '/tinymce/skins/content/default/content.css',
        height: this.height,
        content_style: '* { padding:0; margin:0; } img {max-width:100% !important }',
        plugin_preview_width: 375, // 预览宽度
        plugin_preview_height: 668,
        browser_spellcheck: true, // 拼写检查
        lineheight_val: "1 1.1 1.2 1.3 1.35 1.4 1.5 1.55 1.6 1.75 1.8 1.9 1.95 2 2.1 2.2 2.3 2.4 2.5 2.6 2.7 2.8 3 3.1 3.2 3.3 3.4 4 5",
        fontsize_formats: "8pt 10pt 11pt 12pt 13pt 14pt 15pt 16pt 17pt 18pt 24pt 36pt",
        font_formats: "微软雅黑='微软雅黑';宋体='宋体';黑体='黑体';仿宋='仿宋';楷体='楷体';隶书='隶书';幼圆='幼圆';Andale Mono=andale mono,times;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Trebuchet MS=trebuchet ms,geneva;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings",
        plugins: "advlist anchor autolink autosave code codesample colorpickercontextmenu directionalityfullscreen hr image imagetools insertdatetime link lists media nonbreaking noneditable pagebreak paste preview print save searchreplace spellchecker tabfocus table template textcolor textpattern visualblocks visualchars wordcount",
        powerpaste_word_import: 'merge',
        toolbar: this.toolbar,
        paste_data_images: true, // 允许粘贴图像
        statusbar: true, // 底部的状态栏
        menubar: true, // 最上方的菜单
        branding: false, // 水印“Powered by TinyMCE”
        // 图片上传时触发，将图片传给后端，后端返回图片的url
        images_upload_handler: (blobInfo, success, failure) => {
          // this.$emit('handleImgUpload', blobInfo, success, failure);
          const formData = new FormData();
          formData.append('img', blobInfo.blob());
          try {
            // const res = this.uploadFile(formData);
            this.$axios.post(this.$URL + 'qiniu/imageurl/', formData).then(res => {
              // success接收返回的图片url
              success(res.data.url);
            })
          } catch (e) {
            console.log(e);
            failure('上传失败:' + e);
          }
        }
      },
      editorId: this.id,
      newValue: ''
    };
  },
  watch: {
    newValue(newValue) {
      this.$emit('input', newValue);
    }
  },
  mounted() {
    tinymce.init({});
  },
  computed: {
    editorValue: {
      get() {
        return this.value;
      },
      set(val) {
        this.newValue = val;
      }
    }
  },
  methods: {
    // https://github.com/tinymce/tinymce-vue => All available events
    clear() {
      this.editorValue = '';
    }
  }
};
</script>

使用

<template>
<div class="article">
    <div class="tinymce-editor">
      <tinymce_write
          :id="tinymce_editor"
          v-model="content"
      />
    </div>
</div>
</template>
<script>
// 引入组件
import tinymce_editor. from "@/components/tinymce_editor.";

export default {
  // 注册组件
  components: {tinymce_editor},
  data() {
    return {
	  // 内容
      content: '',
	}
  }
}
</script>