使用vue-qill-editor

有功夫的兄弟可以看看我的博客 www.maple.ink

安装&挂载

在非Vue项目中可以通过 CDN 的方式引入，但是在Vue项目中更推荐使用 npm 安装的方式进行使用。

不甚清楚的地方大家可以查阅翻译的官方文档。

npm i vue-quill-editor

安装成功后可以选择全局挂载富文本编辑器/组件内挂载两种方式

// main.js --- 全局挂载富文本编辑器
import VueQuillEditor from 'vue-quill-editor';
// 引入相应的css样式文件
import 'quill/dist/quill.core.css' // import styles
import 'quill/dist/quill.snow.css' // for snow theme
import 'quill/dist/quill.bubble.css' // for bubble theme
Vue.use(VueQuillEditor);

// 组件内挂载富文本编辑器
import { quillEditor } from 'vue-quill-editor'
// 引入相应的css样式文件
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
// 将组件注册
export default {
  components: {
    quillEditor
  }
}

使用

将组件挂载完成后，创建新组件 Editor.vue ，并使用之前挂载的组件。

<template>
    <div class="editor-wrapper">
        <quill-editor v-model="editorContent"></quill-editor>
    </div>
</template>

<script>
export default {
    name: "Editor",
    data() {
        return {
            editorContent: '',
        }
    }
}
</script>

展示效果如下：

默认状态下的富文本编辑器，顶部的工具栏(toolbar)展示的是最常用的，富文本编辑器内输入的数据可直接通过 v-model 双向数据绑定获取，但若在其中输入特殊字符，可能存在转义。

扩展

输入提示语

修改输入提示语：

export default {
    name: "Editor",
    data() {
        return {
            editorOptions: {
                placeholder: '请输入...'
            }
        }
    }
}

配置工具栏

通过配置工具栏可以自由选择想要显示的工具项：

export default {
    name: "Editor",
    data() {
        return {
            editorOptions: {
                modules: {
                    toolbar: [
                        ['bold', 'italic', 'underline', 'strike'],    //加粗，斜体，下划线，删除线
                        ['blockquote', 'code-block'],     //引用，代码块
                        [{ 'list': 'ordered'}, { 'list': 'bullet' }],     //列表
                        [{ 'script': 'sub'}, { 'script': 'super' }],   // 上下标
                        [{ 'size': ['small', false, 'large', 'huge'] }], // 字体大小
                        [{ 'header': [1, 2, 3, 4, 5, 6, false] }],     //几级标题
                        [{ 'color': [] }, { 'background': [] }],     // 字体颜色，字体背景颜色
                        ['clean'],    //清除字体样式
                    ]
                }
            }
        }
    }
}

显示效果如下：

编辑器方法

ready()准备方法：富文本编辑器准备完成后触发此方法。

focus()焦点方法：获取焦点时触发此方法。

blur()失焦方法：失去焦点触发此方法。

change()修改方法：修改富文本编辑器内容触发此方法。

<quill-editor
    :options="editorOptions"
    v-model="editorContent"
    @ready="onEditorReady"
    @focus="onEditorFocus"
    @blur="onEditorBlur"
    @change="onEditorChange"
>
</quill-editor>

methods: {
    onEditorReady() {
        console.log('富文本编辑器准备完成');
    },
    onEditorFocus() {
        console.log('获得焦点');
    },
    onEditorBlur() {
        console.log('失去焦点');
    },
    onEditorChange() {
        console.log('触发修改内容');
    }
}

汉化编辑器

通过css设置编辑器中工具栏及操作等转换为中文：

.editor {
  line-height: normal !important;
  height: 500px;
}
.ql-snow .ql-tooltip[data-mode="link"]::before {
  content: "请输入链接地址:";
}
.ql-snow .ql-tooltip.ql-editing a.ql-action::after {
  border-right: 0px;
  content: "保存";
  padding-right: 0px;
}
.ql-snow .ql-tooltip[data-mode="video"]::before {
  content: "请输入视频地址:";
}
.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::before {
  content: "14px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="small"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before {
  content: "10px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="large"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="large"]::before {
  content: "18px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="huge"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before {
  content: "32px";
}
.ql-snow .ql-picker.ql-header .ql-picker-label::before,
.ql-snow .ql-picker.ql-header .ql-picker-item::before {
  content: "文本";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
  content: "标题1";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
  content: "标题2";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
  content: "标题3";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
  content: "标题4";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
  content: "标题5";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
  content: "标题6";
}
.ql-snow .ql-picker.ql-font .ql-picker-label::before,
.ql-snow .ql-picker.ql-font .ql-picker-item::before {
  content: "标准字体";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before {
  content: "衬线字体";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="monospace"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before {
  content: "等宽字体";
}