富文本编辑器(vue)

Tinymce(vue 3)

封装组件  下载引入即用

链接：https://pan.baidu.com/s/1t-wTS_7mdSZr8DlgBfBw4A 
提取码：luck

组件中使用

//引入
import tinyMce from "../../../../components/Tinymce/index.vue";
//注册
components: { tinyMce },
//使用
 <tinyMce :value="ruleForm.content" @getTinyData="getTinyData"></tinyMce>
//ruleForm.content  富文本编辑的内容


methods:{
    富文本编辑内容传递
    getTinyData(v) {
            this.ruleForm.content = v;
       },
}

vue-quill-editor (vue 2)

下载Vue-Quill-Editor 

下载quill（Vue-Quill-Editor需要依赖）

npm install vue-quill-editor --save

npm install quill --save

组件中使用

html

<quill-editor
            style="min-height:520px;background:#fff;"
            v-model="formClause.content"
            ref="myQuillEditor"
            :options="editorOption" @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
            @change="onEditorChange($event)"
          >
          </quill-editor>

js

//引入组件及样式文件
import { quillEditor } from "vue-quill-editor";
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';

// 工具栏配置

const toolbarOptions = [
  ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
  ['blockquote', 'code-block'],

  [{ 'header': 1 }, { 'header': 2 }],               // custom button values
  [{ 'list': 'ordered' }, { 'list': 'bullet' }],
  [{ 'script': 'sub' }, { 'script': 'super' }],      // superscript/subscript
  [{ 'indent': '-1' }, { 'indent': '+1' }],          // outdent/indent
  [{ 'direction': 'rtl' }],                         // text direction

  [{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown
  [{ 'header': [1, 2, 3, 4, 5, 6, false] }],

  [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
  [{ 'font': [] }],
  [{ 'align': [] }],
  ['link', 'image'],
  ['clean']                                         // remove formatting button
]


export default {
//引入组件
components: {
    quillEditor
  }
  data() {
    return {
        editorOption: {
        placeholder: '请输入文本...',
        theme: 'snow',
        modules: {
          toolbar: {
            container: toolbarOptions,
            handlers: {
              'image': function () {
                document.querySelector('.avatar-uploader input').click()
              }
            }
          }
        }
      },
    }
  }
    methods:{
onEditorReady(editor) { // 准备编辑器
 
        },
        onEditorBlur(){}, // 失去焦点事件
        onEditorFocus(){}, // 获得焦点事件
        onEditorChange(){}, // 内容改变事件
async upload(image) {
      let fromddata = new FormData()
      fromddata.append('image', image)
      fromddata.append('houseid', this.clauseId)
      fromddata.append('token', getToken())
      let clauseData = await Adminclauseapplyimg(fromddata);
      // 获取富文本组件实例
      let quill = this.$refs.myQuillEditor.quill
      // 如果上传成功
      if (clauseData.code === 200) {
        // 插入图片  res.info为服务器返回的图片地址
        quill.insertEmbed(length, 'image', request.interceptors.Request + clauseData.data)
        // 获取光标所在位置
        let length = this.$refs.myQuillEditor.quill.selection.savedRange.index;
        // 调整光标到最后
        quill.setSelection(length + 2)

      } else {
        this.$message.error('图片插入失败')
      }
    }}

}