js转TinymceEditor编辑器

Hello world!

<template>
<div>
  <editor id="tinymceEditor" :init="tinymceInit" v-model="tinymceContent" :key="tinymceFlag"></editor>
  <el-upload
    id="tinymce-upload"
    class="uploader"
    :action="uploadUrl"
    name="FileData"
    :data="uploadAccountForm"
    :show-file-list="false"
    :on-success="handleAccountSuccess"
    :before-upload="beforeAccountUpload"
  ></el-upload>
  <el-dialog :close-on-click-modal="false" title="Insert link" :visible.sync="dialogTableVisible">
    <el-form ref="linkRef" label-position="left" label-width="120px" :model="linkForm" :rules="rule">
      <el-form-item label="Link Text" prop="text">
        <el-input v-model="linkForm.text"></el-input>
      </el-form-item>
      <el-form-item label="Link URL" prop="url">
        <el-row>
          <el-col :span="11">
            <el-input v-model="linkForm.url"></el-input>
          </el-col>
          <el-col :span="11" style="margin-left: 10px">
            <el-select v-model="link" filterable clearable placeholder="Quick Select" @change="linkSelect">
              <el-option
                v-for="item in linkList"
                :key="item.id"
                :label="item.label"
                :value="item.id">
              </el-option>
            </el-select>
          </el-col>
          <span class="link-tip">Example: http://www.example.com</span>
        </el-row>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm">Confirm</el-button>
        <el-button @click="dialogTableVisible = false">Cancel</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</div>
</template>

<script>
import tinymce from 'tinymce/tinymce'
import 'tinymce/themes/silver/theme'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/plugins/textcolor'
import 'tinymce/plugins/advlist'
import 'tinymce/plugins/table'
import 'tinymce/plugins/lists'
import 'tinymce/plugins/paste'
import 'tinymce/plugins/preview'
import 'tinymce/plugins/fullscreen'
import 'tinymce/plugins/link'
export default {
  name: 'TinymceEditor',
  components: {
    'editor': Editor
  },
  data () {
    return {
      dialogTableVisible: false,
      tinymceFlag: 1,
      tinymceInit: {},
      tinymceContent: '',
      linkForm: {
        url: "",
        text: ""
      },
      link: "",
      rule: {
        url: [
            { required: true, trigger: 'blur' }
          ],
        text: [
          { required: true, trigger: 'change' }
        ],
      }
    }
  },
  props: {
    basePath: {
      type: String,
      default: ""
    },
    data: {
      type: Object,
      default: {}
    },
    linkList: Array
  },
  watch: {
    tinymceContent(val) {
      this.$emit("change", val);
    }
  },
  methods: {
    // 插入图片至编辑器
    // element upload
    handleAccountSuccess(res) {
      if (res.status == 1) {
        let url = res.data[0].savepath;
        tinymce.execCommand('mceInsertContent', false, `<img src=${url}>`)
      } else {
        this.$notify({
          title: "warning",
          message: res.msg,
          type: "warning"
        });
      }
    },
    beforeAccountUpload(res) {},
    initContent(val) {
        this.tinymceContent = val;
    },
    linkSelect(val) {
      let url = '#/app/help?id=' + val;
      this.linkForm.url = url;
    },
    submitForm() {
      this.$refs.linkRef.validate((valid) => {
        if(valid) {
          tinymce.execCommand('mceInsertContent', false, `<a href=${this.linkForm.url}>${this.linkForm.text}</a>`);
          this.dialogTableVisible = false;
        }
      })
    }
  },
  created () {
    const that = this;
    //修改富文本编辑器图片上传路径
    this.uploadUrl = this.basePath;
    this.uploadAccountForm = this.data;
    var urlPrefix = './'
    if(process && process.env && process.env.VUE_APP_RESOURCE_PREFIX) {
      urlPrefix = process.env.VUE_APP_RESOURCE_PREFIX
    }
    this.tinymceInit = {
      skin_url: urlPrefix + 'tinymce/skins/ui/oxide',
      height: document.body.offsetHeight - 300,
      browser_spellcheck: true, // 拼写检查
      branding: false, // 去水印
      // elementpath: false,  //禁用编辑器底部的状态栏
      statusbar: false, // 隐藏编辑器底部的状态栏
      paste_data_images: true, // 允许粘贴图像
      menubar: false, // 隐藏最上方menu
      plugins: 'advlist table lists paste preview fullscreen',
      toolbar: 'fontselect fontsizeselect forecolor backcolor bold italic underline strikethrough alignleft aligncenter alignright alignjustify imageUpload link quicklink h2 h3 blockquote table numlist bullist preview fullscreen',
      setup: (editor) => {
        editor.ui.registry.addButton('imageUpload', {
          tooltip: 'Insert image',
          icon: 'image',
          onAction: () => {
            document.querySelector("#tinymce-upload input").click();
          }
        })
        editor.ui.registry.addButton('link', {
          tooltip: 'Insert link',
          icon: 'link',
          onAction: () => {
            this.dialogTableVisible = true;
          }
        })
      }
    }
  },
  activated () {
    this.tinymceFlag++
  },
  mounted () {},
}
</script>

<style lang="scss" scoped>
.link-tip {
    display: inline-block;
    margin-top: 10px;
    font-size: 12px;
    color: #777;
}
</style>