vue-quill-editor富文本编辑器使用方法，最全，含部分源码解读，含图片上传，如果页面有多个富文本，图片上传解决方案

vue-quill-editor富文本编辑器使用方法，最全，含部分源码解读，含图片上传，如果页面有多个富文本，图片上传解决方案

一、效果

二、安装

2.1脚手架安装

命令

npm install vue-quill-editor -S

引入到项目----方法一

import { quillEditor } from 'vue-quill-editor'
 
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
 
export default {
  components: {
    quillEditor
  }
}

引入到项目----方法二

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);

 2.2引入安装

引入文件

<script src="/js/common/vue.min2.6.14.js"></script>
<script src="/js/common/element-ui2.15.7.js"></script>


<link rel="stylesheet" href="/js/common/vue-quill-editor/quilljs1.3.6/quill.core.css"/>
<link rel="stylesheet" href="/js/common/vue-quill-editor/quilljs1.3.6/quill.snow.css"/>
<link rel="stylesheet" href="/js/common/vue-quill-editor/quilljs1.3.6/quill.bubble.css"/> 
<script src="/js/common/vue-quill-editor/quilljs1.3.6/quill.js"></script>
<script src="/js/common/vue-quill-editor/vue-quill-editor.js"></script>
<script src="/js/common/vue-quill-editor/vue-quill-editor-Config.js"></script>
<style>
 .ql-container.ql-snow{
  min-height: 120px; //初始化富文本高度
  } 
</style>

 引入到项目，初始化

Vue.use(window.VueQuillEditor);

 vue-quill-editor-Config.js代码

这里的vue-quill-editor-Config.js数据个性化顶部菜单栏没配置

var _EditorOption_={
    modules: {
      toolbar: [
        ['bold', 'italic', 'underline'], // 加粗 斜体 下划线 删除线  
        [{ size: [12, 14,16] }], // 字体大小 
        [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色 
        [{ align: [] }], // 对齐方式
        ['clean'], // 清除文本格式
        // ['link','image'] // 链接、图片、视频
        ['link'] // 链接、图片、视频
      ]
    },
    placeholder: '请输入正文'
  };
  // toolbar标题
const titleConfig = [
{ Choice: '.ql-insertMetric', title: '跳转配置' },
{ Choice: '.ql-bold', title: '加粗' },
{ Choice: '.ql-italic', title: '斜体' },
{ Choice: '.ql-underline', title: '下划线' },
{ Choice: '.ql-header', title: '段落格式' },
{ Choice: '.ql-strike', title: '删除线' },
{ Choice: '.ql-blockquote', title: '块引用' },
{ Choice: '.ql-code', title: '插入代码' },
{ Choice: '.ql-code-block', title: '插入代码段' },
{ Choice: '.ql-font', title: '字体' },
{ Choice: '.ql-size', title: '字体大小' },
{ Choice: '.ql-list[value="ordered"]', title: '编号列表' },
{ Choice: '.ql-list[value="bullet"]', title: '项目列表' },
{ Choice: '.ql-direction', title: '文本方向' },
{ Choice: '.ql-header[value="1"]', title: 'h1' },
{ Choice: '.ql-header[value="2"]', title: 'h2' },
{ Choice: '.ql-align', title: '对齐方式' },
{ Choice: '.ql-color', title: '字体颜色' },
{ Choice: '.ql-background', title: '背景颜色' },
{ Choice: '.ql-image', title: '图像' },
{ Choice: '.ql-video', title: '视频' },
{ Choice: '.ql-link', title: '添加链接' },
{ Choice: '.ql-formula', title: '插入公式' },
{ Choice: '.ql-clean', title: '清除字体格式' },
{ Choice: '.ql-script[value="sub"]', title: '下标' },
{ Choice: '.ql-script[value="super"]', title: '上标' },
{ Choice: '.ql-indent[value="-1"]', title: '向左缩进' },
{ Choice: '.ql-indent[value="+1"]', title: '向右缩进' },
{ Choice: '.ql-header .ql-picker-label', title: '标题大小' },
{ Choice: '.ql-header .ql-picker-item[data-value="1"]', title: '标题一' },
{ Choice: '.ql-header .ql-picker-item[data-value="2"]', title: '标题二' },
{ Choice: '.ql-header .ql-picker-item[data-value="3"]', title: '标题三' },
{ Choice: '.ql-header .ql-picker-item[data-value="4"]', title: '标题四' },
{ Choice: '.ql-header .ql-picker-item[data-value="5"]', title: '标题五' },
{ Choice: '.ql-header .ql-picker-item[data-value="6"]', title: '标题六' },
{ Choice: '.ql-header .ql-picker-item:last-child', title: '标准' },
{ Choice: '.ql-size .ql-picker-item[data-value="small"]', title: '小号' },
{ Choice: '.ql-size .ql-picker-item[data-value="large"]', title: '大号' },
{ Choice: '.ql-size .ql-picker-item[data-value="huge"]', title: '超大号' },
{ Choice: '.ql-size .ql-picker-item:nth-child(2)', title: '标准' },
{ Choice: '.ql-align .ql-picker-item:first-child', title: '居左对齐' },
{ Choice: '.ql-align .ql-picker-item[data-value="center"]', title: '居中对齐' },
{ Choice: '.ql-align .ql-picker-item[data-value="right"]', title: '居右对齐' },
{ Choice: '.ql-align .ql-picker-item[data-value="justify"]', title: '两端对齐' }
];

2.3 使用

html代码

<quill-editor
    v-model="content"
    ref="myQuillEditor"
    :options="editorOption"
    @blur="onEditorBlur($event)"
    @focus="onEditorFocus($event)"
    @change="onEditorChange($event)"
    @ready="onEditorReady($event)">
</quill-editor>

js事件代码

data(){
return{
editorOption:_EditorOption_,
content:'我是富文本内容',

}
},
methods:{
// 失去焦点事件
  onEditorBlur(quill) {
    console.log('editor blur!', quill)
  },
// 获得焦点事件
  onEditorFocus(quill) {
    console.log('editor focus!', quill)
  },
// 准备富文本编辑器
  onEditorReady(quill) {
    console.log('editor ready!', quill)
  },
// 内容改变事件
  onEditorChange({ quill, html, text }) {
    console.log('editor change!', quill, html, text)
    this.content = html
  },
}

到这里，你的富文本编辑器就可以正常显示了

三、配置option

3.1 编辑器头部功能菜单配置

// 富文本编辑器配置
      editorOption: {
        modules: {
          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: ['12', '14', '16', '18', '20', '22', '24', '28', '32', '36'] }], // 字体大小
            [{ header: [1, 2, 3, 4, 5, 6] }], // 标题
            [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
            // [{ font: ['songti'] }], // 字体种类
            [{ align: [] }], // 对齐方式
            ['clean'], // 清除文本格式
            ['image', 'video'] // 链接、图片、视频
          ]
        },
        placeholder: '请输入正文'
      },

 这里的size和header经过了处理，如图：换成了自定义内容，例如，修改字号，方法如下：

 3.2 修改quill.js

1.找到node_modules里的quill/dist/quill.js

2.在文件中搜索small，快速找到，然后修改成你想要的数据，这里简单，直接贴图

3.3修改quill.snow.css

修改完js之后，需要修改一下css文件 ，这样你设置的才生效，在同级目录下找到quill.snow.css文件，同样搜索small所在的位置，仿照着改就行，主要是这两处

 可以把原先的注释掉，也可以保留，影响不大，相当于你设置另一套css

// 这个是字号数字对应的显示的内容，vertical-align根据个人需要加不加，因为我页面那个字与其他对不齐
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="12"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="12"]::before {
  content: '12px';
  vertical-align: top;
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="14"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="14"]::before {
  content: '14px';
  vertical-align: top;
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="16"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="16"]::before {
  content: '16px';
  vertical-align: top;
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="18"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="18"]::before {
  content: '18px';
  vertical-align: top;
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="20"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="20"]::before {
  content: '20px';
  vertical-align: top;
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="22"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="22"]::before {
  content: '22px';
  vertical-align: top;
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="24"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="24"]::before {
  content: '24px';
  vertical-align: top;
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="28"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="28"]::before {
  content: '28px';
  vertical-align: top;
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="32"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="32"]::before {
  content: '32px';
  vertical-align: top;
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="36"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="36"]::before {
  content: '36px';
  vertical-align: top;
}
 
 
 
// 这个是字号数字对应的px值
.ql-editor .ql-size-12 {
  font-size: 12px;
}
.ql-editor .ql-size-14 {
  font-size: 14px;
}
.ql-editor .ql-size-16 {
  font-size: 16px;
}
.ql-editor .ql-size-18 {
  font-size: 18px;
}
.ql-editor .ql-size-20 {
  font-size: 20px;
}
.ql-editor .ql-size-22 {
  font-size: 22px;
}
.ql-editor .ql-size-24 {
  font-size: 24px;
}
.ql-editor .ql-size-28 {
  font-size: 28px;
}
.ql-editor .ql-size-32 {
  font-size: 32px;
}
.ql-editor .ql-size-36 {
  font-size: 36px;
}
 
// 选择字号富文本字的大小
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="12"]::before {
  font-size: 12px;
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="14"]::before {
  font-size: 14px;
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="16"]::before {
  font-size: 16px;
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="18"]::before {
  font-size: 18px;
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="20"]::before {
  font-size: 20px;
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="22"]::before {
  font-size: 22px;
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="24"]::before {
  font-size: 24px;
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="28"]::before {
  font-size: 28px;
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="32"]::before {
  font-size: 32px;
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="36"]::before {
  font-size: 36px;
}

 富文本里面的下拉框默认是不滚动的，想要滚动效果，加上下面的css

/*加上height和滚动属性就可以，滚动条样式是系统默认样式，可能不同*/
.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
  border-color: #ccc;
  height: 125px;
  overflow: auto;
}

四、给工具栏鼠标悬停加上中文释义

  找到元素可以看到，每一个tool都有一个class， 这个的原理就是先把所有的class列出来，然后根据class获取元素，给它加上title属性就可以了

 先定义一个数组，把所有的工具放在里面

// toolbar标题
const titleConfig = [
  { Choice: '.ql-insertMetric', title: '跳转配置' },
  { Choice: '.ql-bold', title: '加粗' },
  { Choice: '.ql-italic', title: '斜体' },
  { Choice: '.ql-underline', title: '下划线' },
  { Choice: '.ql-header', title: '段落格式' },
  { Choice: '.ql-strike', title: '删除线' },
  { Choice: '.ql-blockquote', title: '块引用' },
  { Choice: '.ql-code', title: '插入代码' },
  { Choice: '.ql-code-block', title: '插入代码段' },
  { Choice: '.ql-font', title: '字体' },
  { Choice: '.ql-size', title: '字体大小' },
  { Choice: '.ql-list[value="ordered"]', title: '编号列表' },
  { Choice: '.ql-list[value="bullet"]', title: '项目列表' },
  { Choice: '.ql-direction', title: '文本方向' },
  { Choice: '.ql-header[value="1"]', title: 'h1' },
  { Choice: '.ql-header[value="2"]', title: 'h2' },
  { Choice: '.ql-align', title: '对齐方式' },
  { Choice: '.ql-color', title: '字体颜色' },
  { Choice: '.ql-background', title: '背景颜色' },
  { Choice: '.ql-image', title: '图像' },
  { Choice: '.ql-video', title: '视频' },
  { Choice: '.ql-link', title: '添加链接' },
  { Choice: '.ql-formula', title: '插入公式' },
  { Choice: '.ql-clean', title: '清除字体格式' },
  { Choice: '.ql-script[value="sub"]', title: '下标' },
  { Choice: '.ql-script[value="super"]', title: '上标' },
  { Choice: '.ql-indent[value="-1"]', title: '向左缩进' },
  { Choice: '.ql-indent[value="+1"]', title: '向右缩进' },
  { Choice: '.ql-header .ql-picker-label', title: '标题大小' },
  { Choice: '.ql-header .ql-picker-item[data-value="1"]', title: '标题一' },
  { Choice: '.ql-header .ql-picker-item[data-value="2"]', title: '标题二' },
  { Choice: '.ql-header .ql-picker-item[data-value="3"]', title: '标题三' },
  { Choice: '.ql-header .ql-picker-item[data-value="4"]', title: '标题四' },
  { Choice: '.ql-header .ql-picker-item[data-value="5"]', title: '标题五' },
  { Choice: '.ql-header .ql-picker-item[data-value="6"]', title: '标题六' },
  { Choice: '.ql-header .ql-picker-item:last-child', title: '标准' },
  { Choice: '.ql-size .ql-picker-item[data-value="small"]', title: '小号' },
  { Choice: '.ql-size .ql-picker-item[data-value="large"]', title: '大号' },
  { Choice: '.ql-size .ql-picker-item[data-value="huge"]', title: '超大号' },
  { Choice: '.ql-size .ql-picker-item:nth-child(2)', title: '标准' },
  { Choice: '.ql-align .ql-picker-item:first-child', title: '居左对齐' },
  { Choice: '.ql-align .ql-picker-item[data-value="center"]', title: '居中对齐' },
  { Choice: '.ql-align .ql-picker-item[data-value="right"]', title: '居右对齐' },
  { Choice: '.ql-align .ql-picker-item[data-value="justify"]', title: '两端对齐' }
]

 然后在function中循环，找到元素，添加title，至于放在那个function根据具体情况看，反正得是在页面上已经渲染好元素之后，不然会获取不到元素，可以直接放在@ready的函数里面

for (let item of titleConfig) {
        let tip = document.querySelector('.quill-editor ' + item.Choice)
        if (!tip) continue
        tip.setAttribute('title', item.title)
      }

至此，一个富文本编辑器，基本可以使用，并且还把英文转成了中文

五，图片上传

vue-quill-editor富文本编辑器上传图片默认为base64，存入数据库过于过于庞大，使用quill-image-extend-module+vue-quill-editor实现图片地址上传。

这里列举的例子思路很简单就是：劫持原来的图片上传事件，然后上传到服务器，服务器返回一个图片链接，我再给插进去。

5.1图片上传方案一（适合页面只有一个富文本编辑器）

html

<input
        type="file"
        ref="uploadInput"
        @change="EditorUpload"
        class="uploadImgEditor"
        name=""
        hidden
        id=""
      />
      <quill-editor
        class="editor"
        v-model="content"
        :options="editorOption"
        ref="myTextEditor"
        @blur="onEditorBlur($event)"
        @focus="onEditorFocus($event)"
        @ready="onEditorReady($event)"
        @change="onEditorChange($event)"
      >
      </quill-editor>

js

这里的“editorOption”配置和上面的配置是有差别的

注意“toolbar”里面的“container”和“handlers”

data(){
  return{
  editorOption:_EditorOption_,
  content:'我是富文本内容',

  }
},
  computed: {
    editor() {
      return this.$refs.myTextEditor.quillEditor;
    },
  },
created() {
    this.editorOption = {
      modules: {
        toolbar: {
          container: [
            ["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', 'video'],
            ["image"],
            ["clean"], // remove formatting button
          ], // 工具栏
          handlers: {
            image: function (value) {
              if (value) {
                document.querySelector(".uploadImgEditor").click();
              } else {
                this.quill.format("image", false);
              }
            },
          },
        },
      },
      placeholder: "请输入文章内容(必填项)", //提示
      readyOnly: false, //是否只读
      theme: "snow", //主题 snow/bubble
      syntax: true, //语法检测
    };    
  },
methods:{
  //富文本-点击图片上传事件
  EditorUpload() {
      var file = this.$refs.uploadInput.files[0];
      var fd = new FormData();
      fd.append("file", file);
      this.uploadLogo(fd, file);
    },
  //富文本-图片上传请求
  uploadLogo(dt, file) {
      var that = this;
      let param = new FormData(); //创建form对象
      param.append("file", file); //通过append向form对象添加数据
      let config = {
        headers: { "Content-Type": "multipart/form-data" },
      }; //添加请求头
      that.$axios
        .post(
          "http://www.xxx.xxx/ImgUpload",
          param,
          config
        )
        .then((res) => {
          //上传成功后的业务处理
      let quill = this.$refs.myTextEditor.quill;//获取富文本编辑器dom对象
          let length = quill.getSelection().index;//光标位置
      let imgUrl='http://www.xxx.xxx' + res.imgUrl;// 拼接图片地址
          quill.insertEmbed(length, "image", imgUrl); // 插入图片  图片地址
          quill.setSelection(length + 1);// 调整光标到最后 
      //上传成功后的业务处理 end      
        });
    },
  //富文本-失去焦点事件
  onEditorBlur(quill) {
  console.log('editor blur!', quill)
  },
  //富文本-获得焦点事件
  onEditorFocus(quill) {
  console.log('editor focus!', quill)
  },
  //富文本-准备富文本编辑器
  onEditorReady(quill) {
  console.log('editor ready!', quill)
  },
  //富文本-内容改变事件
  onEditorChange({ quill, html, text }) {
  console.log('editor change!', quill, html, text)
  this.content = html
  },
}

5.2图片上传方案二（适合页面有多个富文本编辑器）

页面有多个富文本编辑器时 图片上传的方法

效果

html代码

<!-- 活动介绍： -->
<p><span class="red">*</span>活动介绍：</p>
<br/>
<p>
<quill-editor
class="editor"
id="QuillEditor_Intro"
ref="QuillEditor_Intro"
v-model="form.Intro"
:options="editorOption"
@blur="onEditorBlur($event)"
@focus="onEditorFocus($event)"
@ready="onEditorReady($event)"
@change="onEditorChange($event)"
>
</quill-editor>
</p>
<br/><br/>

<!-- 场馆介绍： -->
<p><span class="red">*</span>场馆介绍：</p>
<br/>
<p>
<quill-editor
class="editor"
id="QuillEditor_SceneIntro"
ref="QuillEditor_SceneIntro"
v-model="form.SceneIntro"
:options="editorOption"
@blur="onEditorBlur($event)"
@focus="onEditorFocus($event)"
@ready="onEditorReady($event)"
@change="onEditorChange($event)"
>
</quill-editor>
</p>
<br/><br/>

<!-- 用户须知： -->
<p><span class="red">*</span>用户须知：</p>
<br/>
<p>
<quill-editor
class="editor"
id="QuillEditor_UserNotice"
ref="QuillEditor_UserNotice"
v-model="form.UserNotice"
:options="editorOption"
@blur="onEditorBlur($event)"
@focus="onEditorFocus($event)"
@ready="onEditorReady($event)"
@change="onEditorChange($event)"
>
</quill-editor>
</p>
<br/><br/>


<!-- 活动流程\日程： -->
<p><span class="red">*</span>活动流程\日程：</p>
<br/>
<p>
<quill-editor
class="editor"
id="QuillEditor_Process"
ref="QuillEditor_Process"
v-model="form.Process"
:options="editorOption"
@blur="onEditorBlur($event)"
@focus="onEditorFocus($event)"
@ready="onEditorReady($event)"
@change="onEditorChange($event)"
>
</quill-editor>
</p>

vue-quill-editor图片上传源码解读

quill.js文件路径：\node_modules\quill\dist

代码在quill.js的“6844”--“6882”行

源码截图

源码

BaseTheme.DEFAULTS = (0, _extend2.default)(true, {}, _theme2.default.DEFAULTS, {
  modules: {
    toolbar: {
      handlers: {
        formula: function formula() {
          this.quill.theme.tooltip.edit('formula');
        },
        image: function image() {
          var _this3 = this;

          var fileInput = this.container.querySelector('input.ql-image[type=file]');
          if (fileInput == null) {
            fileInput = document.createElement('input');
            fileInput.setAttribute('type', 'file');
            fileInput.setAttribute('accept', 'image/png, image/gif, image/jpeg, image/bmp, image/x-icon');
            fileInput.classList.add('ql-image');
            fileInput.addEventListener('change', function () {
              if (fileInput.files != null && fileInput.files[0] != null) {
                var reader = new FileReader();
                reader.onload = function (e) {
                  var range = _this3.quill.getSelection(true);
                  _this3.quill.updateContents(new _quillDelta2.default().retain(range.index).delete(range.length).insert({ image: e.target.result }), _emitter2.default.sources.USER);
                  _this3.quill.setSelection(range.index + 1, _emitter2.default.sources.SILENT);
                  fileInput.value = "";
                };
                reader.readAsDataURL(fileInput.files[0]);
              }
            });
            this.container.appendChild(fileInput);
          }
          fileInput.click();
        },
        video: function video() {
          this.quill.theme.tooltip.edit('video');
        }
      }
    }
  }
});

这段代码的意思是，当你点击了顶部工具栏的图片按钮，

判断页面是否存在一个叫【input.ql-image[type=file]】的文件上传控件

如果不存在则创建一个，如果存在则触发点击事件

生成代码大致如下：

<input type="file"  @change="function(){}" class="ql-image"/>

通过源码我们可以修改我们的代码如下

js代码

<script>
 // 工具栏配置
var _EditorOption_=function(page_this){return {
  modules: {
    toolbar: {
      container:[
        ['bold', 'italic', 'underline'], // 加粗 斜体 下划线 删除线
        [{ size: [12,14,16] }], // 字体大小
        [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
        [{ align: [] }], // 对齐方式
        ['clean'], // 清除文本格式
        // ['link','image'] // 链接、图片、视频
        ['link','image'] // 链接、图片、视频
      ],
      handlers:{
        image:function(value){
          console.log(value);
          if(value)
          {
            console.log(this);//此时this是头部工具栏当前对象
            var parentIdStr=this.container.parentElement.id;//获取容器quill-editor标签的id
            var fileInput = this.container.querySelector('input.ql-image[type=file]');
            if (fileInput == null) {
                  fileInput = document.createElement('input');
                  fileInput.setAttribute('type', 'file');
                  fileInput.setAttribute('accept', 'image/png, image/gif, image/jpeg, image/bmp, image/x-icon');
                  fileInput.classList.add('ql-image');
                  fileInput.addEventListener('change', function(){
                  var files=fileInput.files;//获取文件
                  page_this.QuillEditorImgUpload(parentIdStr,files);//调取当前页面富文本图片上传的方法
                  });
                  this.container.appendChild(fileInput);
              }
            fileInput.click();
          }
          else
          {
            this.quill.format('image', false)
          }

        }
      }
    }
  },
  placeholder: '请输入正文'
}; };


export default {
  data(){
  return {
    editorOption:_EditorOption_(this),//富文本配置
    form:{
      Intro:'',//活动介绍
      SceneIntro:'',//场馆介绍
      UserNotice:'',//用户须知
      Process:'',//活动流程\日程
    }
  }},
  created(){},
  methods:{
  // 富文本-失去焦点事件
  onEditorBlur(quill) {
  // //console.log("失去焦点事件");
  // //console.log('editor blur!', quill)
  // //console.log(this.form);
  },
  // 富文本-获得焦点事件
  onEditorFocus(quill) {
  // //console.log("获得焦点事件");
  // //console.log('editor focus!', quill)
  },
  // 富文本-准备富文本编辑器
  onEditorReady(quill) {
  // //console.log("准备富文本编辑器");
  // //console.log('editor ready!', quill)
  },
  //富文本- 内容改变事件
  onEditorChange({ quill, html, text }) {
  // console.log("内容改变事件");
  // // console.log('editor change!', quill, html, text)
  // console.log(quill)
  // console.log("内容改变事件22222222");
  // console.log(html)
  // console.log("内容改变事件3333333333");
  // console.log(text)
  },
  //富文本- 图片上传
      QuillEditorImgUpload(domId,files) {
        var that=this;
        console.log('富文本文件上传')
        console.log(domId);
        console.log(files);

        var formData = new FormData();
        formData.append("file",files[0]);
        formData.append("filename", files[0].name);
 
      // 此时可以自行将文件上传至服务器
       that.$axios.post("/api/ImgUpload",formData).then((res) => {
          console.log(res);
         if(res.code==10000 )
         {
          let imageUrl='http://www.xxx.xxx' + res.imgUrl;//拼接图片地址

          let quill = '';//获取富文本编辑器dom对象
          switch (domId) {
            case 'QuillEditor_Intro'://活动介绍
              quill=this.$refs.QuillEditor_Intro.quill;
              break;
            case 'QuillEditor_SceneIntro'://场馆介绍
              quill=this.$refs.QuillEditor_SceneIntro.quill;
              break;
            case 'QuillEditor_UserNotice'://用户须知
              quill=this.$refs.QuillEditor_UserNotice.quill;
              break;
            case 'QuillEditor_Process'://活动流程\日程
              quill=this.$refs.QuillEditor_Process.quill;
              break;

            default:
              break;
          }

          let length = quill.getSelection().index;// 获取光标所在位置
          quill.insertEmbed(length, 'image', imageUrl)// 插入图片
          quill.setSelection(length + 1);// 调整光标到最后
         }
         else{
            that.alertFun(res.msg);
          }
        });
      },
  },
}
</script>