Vue+Tinymce富文本编辑器

tinymce

安装

npm install @tinymce/tinymce-vue -save
npm install tinymce -save

在node_modules 文件夹中找到 tinymce/skins 文件，然后将 skins 目录复制到 public/tinymce目录下（在public 文件夹里面创建一个tinymce文件夹）。

使用（组件形式）

<template>
  <div class="tinymce">
  	<el-button type="primary" @click="handlerAdd">插入内容</el-button>
    <editor v-model="tempData" :init="init"></editor>
  </div>
</template>

<script>
//导入要使用的插件（）
import axios from 'axios';
import tinymce from 'tinymce/tinymce.js';
import 'tinymce/themes/silver/theme';
import Editor from '@tinymce/tinymce-vue';
import 'tinymce/skins/ui/oxide/skin.css';
import 'tinymce/skins/content/default/content.css';
import 'tinymce/plugins/image';
import 'tinymce/plugins/link';
import 'tinymce/plugins/code';
import 'tinymce/plugins/table';
import 'tinymce/plugins/lists';
import 'tinymce/plugins/advlist';
// import 'tinymce/plugins/contextmenu';
import 'tinymce/plugins/wordcount';
// import 'tinymce/plugins/colorpicker';
// import 'tinymce/plugins/textcolor';
import 'tinymce/icons/default/index';

export default {
  name: 'tinymce',
  props: {
    tinymceHtml: {
      type: String,
    },
  },
  data() {
    return {
      tempData: '',
      init: {
        convert_urls: false,
        language_url: '/tinymce/zh_CN.js',
        language: 'zh_CN',
        skin_url: '/tinymce/skins/ui/oxide',
        height: 700,
        //要导入插件后，才能显示
        plugins: 'link lists,advlist image code table wordcount',
        toolbar:
          'bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | undo redo | link unlink image code | removeformat',
        branding: false,
        paste_word_valid_elements: '*[*]', // word需要它
        paste_data_images: true, // 粘贴的同时能把内容里的图片自动上传，非常强力的功能
        paste_convert_word_fake_lists: false, // 插入word文档需要该属性
        // 此处为图片上传处理函数，这个直接用了base64的图片形式上传图片，
        images_upload_handler: (blobInfo, success, failure) => {
        },
        //文件上传处理函数
        file_picker_callback(callback, value, meta) {
        },
      },
    };
  },
  methods: {
    //插入内容
  	handlerAdd() {
      //光标在哪，就在哪里插入内容
      tinymce.activeEditor.insertContent('<span>插入内容</span>');
    },
   },
  mounted() {
    tinymce.init({});
  },
  components: { Editor },
  watch: {
  //外面传进来的富文本内容
    tinymceHtml: {
      handler(newVal) {
        this.tempData = newVal;
      },
      immediate: true,
      deep: true,
    },
    //编辑时富文本内容的变化，通过emit传出去
    tempData: {
      handler(newVal) {
        this.$emit('getData', newVal);
      },
      immediate: true,
      deep: true,
    },
  },
};
</script>

调用事件

// 确认插入内容
    

其他富文本编辑器：wangEditor