Vue中引入富文本编辑器

这里使用的是 vue-quill-editor 富文本组件

先安装一下：

npm i vue-quill-editor -s

下载之后 去components文件夹中新建一个文件夹 KEditor，然后里面创建俩文件 一个js 一个vue

其中 ： index.js   内容

/*
 * @Description:导出富文本编辑器
 * @Author: kcz
 * @Date: 2020-03-30 12:45:04
 * @LastEditors: kcz
 * @LastEditTime: 2020-03-30 12:45:40
 */
import KEditor from "./kEditor.vue";
export default KEditor;

kEditor.vue 内容

到这里 准备工作就差不多了 剩下就是使用了

 在需要引入的vue界面中：注册刚刚的组件  路径和我的不一样 记得更换

import KEditor from '../../components/portalSetting/KEditor'

...

  components: {
    KEditor
  },

使用：

再去data中定义几个属性：和一个回调方法

      // 是否禁用
      isDisabled:false,
      // 富文本强制每次打开刷新
      eidtFlag: 0,
      notice:{
          noticeId:'',
          noticeTitle:'',
          noticeContent:'',
          priority:1,
      }


    // 富文本的值改变后的回调
    callbackChangeEditor(e){
      this.notice.noticeContent = e;
    }

一个简单的使用实例

到这里 去页面刷新 就可以看到效果了

下面是我在使用时候的vue代码

如果需要更详细的使用 其他参数 比如上传图片 请移步

https://blog.csdn.net/qq_44091061/article/details/122453951

官网：quill-image-extend-module · Quill官方中文文档 · 看云

引入带有图片和视频的：

下载依赖

npm i quill-image-extend-module

增加后的组件：

主要是引入这些：这是和上面比较后，加的

import { quillEditor, Quill } from 'vue-quill-editor' // 调用编辑器
import { container, ImageExtend, QuillWatch } from 'quill-image-extend-module'



Quill.register('modules/ImageExtend', ImageExtend)



        modules: {
          ImageExtend: {
            loading: true,
            name: 'file',
            // 更多配置见官方文档https://www.kancloud.cn/liuwave/quill/1434141
            // 设置请求头部
            // headers: (xhr) => {
            //   xhr.setRequestHeader('Authorization',  window.sessionStorage.getItem('tokenStr'))
            // },
            //action:'/common/uploadBase64ImageToQiniu', // this.fileUrl, // 这里写入请求后台地址 例如："http://xxx.xxx.xxx.xxx:xxx/api/file/upload/indexFile",
            action:'/common/uploadImageToQiniu',
            response: (res) => {
              return res.obj // 这里写入请求返回的数据，也就是一个图片字符串
            }
          },
          toolbar: {
            container: container,
            handlers: {
              'image': function () {
                QuillWatch.emit(this.quill.id)
              }
            }
          }
          // toolbar: [
          //   ['bold', 'italic', 'underline', 'strike'], // 加粗，斜体，下划线，删除线
          //   ['blockquote', 'code-block'], // 引用，代码块
          //   [{ 'header': 1 }, { 'header': 2 }], // 标题，键值对的形式；1、2表示字体大小
          //   [{ 'list': 'ordered' }, { 'list': 'bullet' }], // 列表
          //   [{ 'script': 'sub' }, { 'script': 'super' }], // 上下标
          //   [{ 'indent': '-1' }, { 'indent': '+1' }], // 缩进
          //   [{ 'direction': 'rtl' }], // 文本方向
          //   [{ 'size': ['small', false, 'large', 'huge'] }], // 字体大小
          //   [{ 'header': [1, 2, 3, 4, 5, 6, false] }], // 几级标题
          //   [{ 'color': [] }, { 'background': [] }], // 字体颜色，字体背景颜色
          //   [{ 'font': [false, 'heiti', 'songti', 'kaiti', 'lishu', 'arial', 'monospace'] }], // 字体
          //   [{ 'align': [] }], // 对齐方式
          //   ['clean'], // 清除字体样式
          //   ['image'],
          //   // ['image', 'video'] // 上传图片、上传视频,
          // ]
        }

这是完整的组件