封装pc端富文本编辑器

// richTextEditorPlugin.js

import 'tinymce/tinymce.min.js'

const RichTextEditorPlugin = {
  install(Vue, options) {
    Vue.prototype.$richTextEditor = (selector, cong) => {
      return new Promise((resolve, reject) => {
        tinymce.init({
          selector: selector,
          ...config,
          setup: editor => {
            editor.on('change', () => {
              const content = editor.getContent()
              resolve(content)
            })
          }
        })
      })
    }
  }
}

export default RichTextEditorPlugin
 

然后，在 Vue 项目中使用这个插件：

javascript复制代码

// main.js

import Vue from 'vue'
import App from './App.vue'

import RichTextEditorPlugin from './richTextEditorPlugin.js' Vue.use(RichTextEditorPlugin)

new Vue({ render: h => h(App), }).$mount('#app')

最后，在组件中使用插件提供的富文本编辑器功能：

<template>

 <div class="editor">

  <div ref="editor"></div>

 </div>

</template>

<script>

export default {

 mounted () {

  this.$richTextEditor(this.$refs.editor,

   { plugins: 'autoresize lists link image', toolbar: 'undo redo | bold        italic underline | alignleft aligncenter alignright | bullist numlist' })

  .then(content => {

  // 处理编辑器返回的内容

   console.log(content)

   })

  }

 }

</script>

<style scoped>

 .editor {

  width: 100%;

  height: 100%;

  overflow: hidden;

 }

</style>