TinyMce 富文本编辑器

TinyMCE是一款易用、且功能强大的所见即所得的富文本编辑器。

关于富文本自定义菜单栏，用setup属性

init: {
    images_upload_handler: (blobInfo, success, failure) => {
        const img = 'data:image/jpeg;base64,' + blobInfo.base64()
        success(img)
    },
    setup: (editor) => {
        editor.ui.registry.addButton('imgbutton', {
            text: '图片素材库',
            onAction: () => {
                this.handleSelectImg(editor)
            }
        })
    }
}

完整代码

<template>
  <div class="tinymce-editor">
    <Editor v-model="myValue" :init="init" :disabled="disabled" @onClick="onClick"></Editor>
    <v-dialog v-model="showDialog" width="1000px" title="素材选择">
      <aricleSelect @backReturn="handleBack"></aricleSelect>
    </v-dialog>
  </div>
</template>
<script>
import Editor from '@tinymce/tinymce-vue'
import tinymce from 'tinymce/tinymce'
import 'tinymce/themes/silver/theme'
import 'tinymce/plugins/image'
import 'tinymce/plugins/media'
import 'tinymce/plugins/table'
import 'tinymce/plugins/lists'
import 'tinymce/plugins/contextmenu'
import 'tinymce/plugins/wordcount'
import 'tinymce/plugins/colorpicker'
import 'tinymce/plugins/textcolor'
import 'tinymce/plugins/preview'
import 'tinymce/plugins/fullscreen'
import 'tinymce/icons/default/icons'
import aricleSelect from "@/components/qw/articleSelect/index"
export default {
  components: { Editor, aricleSelect },
  props: {
    //传入一个value，使组件支持v-model绑定
    value: {
      type: String,
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false
    },
    plugins: {
      type: [String, Array],
      default: 'lists image media table textcolor wordcount contextmenu fullscreen preview'
    },
    toolbar: {
      type: [String, Array],
      default: 'undo redo | preview fullscreen | formatselect alignleft aligncenter alignright alignjustify | link unlink | numlist bullist | imgbutton table | fontselect fontsizeselect forecolor backcolor | bold italic underline strikethrough | indent outdent | superscript subscript | removeformat |'
    }
  },
  data () {
    return {
      showDialog: false,
      init: {
        language_url: '/static/tinymce/langs/zh_CN.js',
        language: 'zh_CN',
        skin_url: '/static/tinymce/skins/ui/oxide',
        height: 400,
        plugins: this.plugins,
        toolbar: this.toolbar,
        toolbar1: this.toolbar,
        branding: false,
        menubar: false,
        images_upload_handler: (blobInfo, success, failure) => {
          const img = 'data:image/jpeg;base64,' + blobInfo.base64()
          success(img)
        },
        setup: (editor) => {
          editor.ui.registry.addButton('imgbutton', {
            text: '图片素材库',
            onAction: () => {
              this.handleSelectImg(editor)
            }
          })
        }
      },
      myValue: this.value,
      editorObj: {}
    }
  },
  watch: {
    value(newValue) {
      this.myValue = newValue
    },
    myValue(newValue) {
      this.$emit('input', newValue)
    }
  },
  mounted() {
    tinymce.init({})
  },
  methods: {
    onClick(e) {
      this.$emit('onClick', e, tinymce)
    },
    //可以添加一些自己的自定义事件，如清空内容
    clear() {
      this.myValue = ''
    },
    // 添加素材库
    handleSelectImg(editor) {
      this.editorObj = editor
      // editor.insertContent("<img src='https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1594383195030&di=f54148a86fc09892d717ab129263faa5&imgtype=0&src=http%3A%2F%2Fa3.att.hudong.com%2F14%2F75%2F01300000164186121366756803686.jpg' alt=''>")
      // editor.insertContent("<video controls='controls' width='300' height='150'><source src='http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4' type='video/mp4'/></video>")
      this.showDialog = true
    },
    handleBack(val) {
      this.showDialog = false
      if (val) {
        // 保存
        this.editorObj.insertContent("<img src='https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1594383195030&di=f54148a86fc09892d717ab129263faa5&imgtype=0&src=http%3A%2F%2Fa3.att.hudong.com%2F14%2F75%2F01300000164186121366756803686.jpg' alt=''>")
      }
    }
  }
}
</script>
<style lang='less'>
// .tinymce-editor {
//   .v-dialog {
//     height: 600px !important;
//     background: white;
//   }
// }
</style>