富文本编辑器简单使用

晨夕1
1,476 阅读1分钟

在vuecli3中使用富文本编辑器:vue-quill-editor

api

安装

<!--通过npm安装-->
npm install vue-quill-editor --registry=https://registry.npm.taobao.org
<!--在安装依赖项-->
npm install quill

在mian.js中引入

import Vue from 'vue'
import VueQuillEditor from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
  
Vue.use(VueQuillEditor)

在页面中使用

<!--editor.vue-->
<template>
	<div style="background: #eee;padding: 16px">
        富文本
	<quill-editor 
            v-model="content" 
            ref="myQuillEditor" 
            :options="editorOption" 
            @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
            @change="onEditorChange($event)">
        </quill-editor>
	</div>
</template>

<script>
export default {
	 data() {
        return {
            content: `<p></p><p><br></p><ol><li><strong><em>Or drag/paste an image here.</em></strong></li><li><strong><em>rerew</em></strong></li><li><strong><em>rtrete</em></strong></li><li><strong><em>tytrytr</em></strong></li><li><strong><em>uytu</em></strong></li></ol>`,
            editorOption: {}
        }
    },
    methods: {
        onEditorReady(editor) { // 准备编辑器
            conosle.log(editor)
        },
        onEditorBlur(){ // 失去焦点事件
            console.log('失去焦点事件')
            console.log(this.content)
        },
        onEditorFocus(){ // 获得焦点事件
            console.log('获得焦点事件')
        },
        onEditorChange(){ // 内容改变事件
            console.log('内容改变事件')
        },
    },
    computed: {
        // 如果你需要得到当前的editor对象来做一些事情，你可以像下面这样定义一个方法属性来获取当前的editor对象，实际上这里的$refs对应的是当前组件内所有关联了ref属性的组件元素对象
        editor() {
            return this.$refs.myQuillEditor.quill;
        },
    }
}
</script>

v-model就是编辑器绑定的值: content,editorOption是编辑器的配置选项,如果想要禁用编辑器

disabled(editor){ 
    editor.enable(false)//禁用
    editor.enable(true)//取消禁用
}

转载自

富文本中插入图片

又看到一个问题,就做下整理,在富文本编辑器中添加图片,他会把图片转成base64的,这样就会导致传给后台的内容特别长,所以就需要在插入图片之前把默认的操作改成电泳后台接口,并把图片存在数据库中,并把链接返回来,这样image标签的src就不是base64的了.

直接贴代码:

<template>
  <div>
      <div  v-loading="imageLoading" element-loading-text="请稍等，图片上传中">
        <quill-editor  ref="newEditor"  v-model="content" ></quill-editor>
          <!-- 文件上传input 将它隐藏 -->
        <el-upload style="display:none"  :action="apiurl" :show-file-list="false" :before-upload='newEditorbeforeupload' :on-success='newEditorSuccess'
         ref="uniqueId" id="uniqueId"></el-upload >
      </div>
  </div>
</template>
<script>
  import api from '@/service'
  import {quillEditor} from 'vue-quill-editor'
  export default {
    data() {
      return {
        content: '',
        imageLoading: false,
        apiurl: '123'
      }
    },
    mounted(){
      var imgHandler = async function(state) {
          if (state) {
          var fileInput =document.querySelector('#uniqueId input') //隐藏的file元素
           fileInput.click() //触发事件
          }
      }
     this.$refs.newEditor.quill.getModule("toolbar").addHandler("image", imgHandler) 
    },
    methods: {
       newEditorbeforeupload(file){                       
          const isJPG = file.type === 'image/jpeg' ||file.type ===  'image/png';
          const isLt2M = file.size / 1024 / 1024 < 2;
          if (!isJPG) {
              this.$message.error('上传图片只能是 JPG或PNG 格式!');
          }
          if (!isLt2M) {
              this.$message.error('上传图片大小不能超过 2MB!');
          }
          if(isJPG && isLt2M){
            // this.imageLoading =true;
            let response = api.returnImgurl(file);
            console.log(response)
            this.addImgRange = this.$refs.newEditor.quill.getSelection()
            this.$refs.newEditor.quill.insertEmbed(this.addImgRange != null?this.addImgRange.index:0, 'image',response.data)
          }
          // return isJPG && isLt2M;                                            
          return false;                                            
      },
      //上传图片回调 
      newEditorSuccess(response, file, fileList){
          if(response.status===1){                        
              this.addImgRange = this.$refs.newEditor.quill.getSelection()
              this.$refs.newEditor.quill.insertEmbed(this.addImgRange != null?this.addImgRange.index:0, 'image',response.datas, Quill.sources.USER)
          }
        this.imageLoading =false
      },
    }
  }
 
</script>

这里面用的element中的组件el-upload,其中before-upload是上传图片之前执行的方法,我在下面执行这个时最后返回了个false,这样他就不会执行on-success中的方法了.

before-upload执行过程调用了api.returnImgurl方法并把图片文件传了过去,

function returnImgurl(data){
	let data1 = {data: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1566990761375&di=6c677bf1095bb1fc7b50d7a5600cf768&imgtype=0&src=http%3A%2F%2Faliyunzixunbucket.oss-cn-beijing.aliyuncs.com%2Fjpg%2Fe139851b588d5fc042aff797b6f6e824.jpg%3Fx-oss-process%3Dimage%2Fresize%2Cp_100%2Fauto-orient%2C1%2Fquality%2Cq_90%2Fformat%2Cjpg%2Fwatermark%2Cimage_eXVuY2VzaGk%3D%2Ct_100'}
	if(data){
		return data1;
	}
}

我这里模拟了下调用接口的过程,返回的data中包含一个图片的链接,这个链接就是后台返回给我们的. 转载

avatar
文章
阅读
粉丝