<template>
  <quill-editor
    v-model="content"
    ref="editorRef"
    :options="editorOption"
    @focus="onEditorFocus($event)"
    @blur="onEditorBlur($event)"
    @change="onEditorChange($event)"
    class="editor"
</template>
<script>
import { quillEditor } from "vue-quill-editor";
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
// 定制toolbar
const toolbarOptions = [
  ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线 -----['bold', 'italic', 'underline', 'strike']
  ["blockquote", "code-block"], // 引用  代码块-----['blockquote', 'code-block']
  [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表-----[{ list: 'ordered' }, { list: 'bullet' }]
  [{ header: 1 }, { header: 2 }],
  [{ script: "sub" }, { script: "super" }], // 上标/下标-----[{ script: 'sub' }, { script: 'super' }]
  [{ indent: "-1" }, { indent: "+1" }],
  [{ size: [] }], // 配置字号
  [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题-----[{ header: [1, 2, 3, 4, 5, 6, false] }]
  [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色-----[{ color: [] }, { background: [] }]
  [{ font: [] }], //显示字体选择
  [{ align: [] }], // 对齐方式-----[{ align: [] }]
  ["clean"], // 清除文本格式-----['clean']
  ["link"], // 链接、图片、视频-----['link', 'image', 'video']
export default {
  name: "TestQuillEditor",
  components: { quillEditor },
  data() {
    return {
      content: "",
      editorOption: {
        theme: "snow",
        modules: {
          toolbar: toolbarOptions,
  computed: {
    //当前富文本实例
    editor() {
      return this.$refs.editorRef.quillEditor;
  methods: {
    // 准备富文本编辑器
    onEditorReady() {},
    // 富文本编辑器 失去焦点事件
    onEditorBlur() {},
    // 富文本编辑器 获得焦点事件
    onEditorFocus() {},
    // 富文本编辑器 内容改变事件
    onEditorChange({ html }) {
      //内容改变事件
      // console.log('内容改变事件');
</script>
<style>
</style>
效果图如下：
 
 
本篇文章讲述如何修改quill-editor的工具栏，下篇文章将介绍如何增加字体和文字大小。
                    前言上篇文章介绍了如何在vue中使用quill-editor，但是quill-editor的工具栏不是很好用，所以本篇文章来定制quill-editor的工具栏提示：以下是本篇文章正文内容，下面案例可供参考一、toolbar工具栏对应的模块大致分为以下两类：// 1.只需要填写功能名bold - 加粗italic - 斜体underline - 下划线strike - 删除线blockquote - 引用code-block - 代码块formula - 公式image - 图片
				
初心-杨瑞超个人博客诚邀您加入qq群(IT-程序猿-技术交流群): 757345416丨(IT-程序猿-技术交流2群): 936929828
1、下载vue-quill-editor
npm i vue-quill-editor -D
2、下载quill（vue-quill-editor依赖于quill）
npm i quill -D
3、直接贴代码，修改placeholder直接写在ed...




    

      container: '#toolbar',  // Selector for toolbar container
      handlers: {
        'bold': customBoldHandler
因为containe
import  VueQuillEditor from 'vue-quill-editor'
// require styles 引入样式
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
Vue.use(VueQuillEd.
（1）局部引用，在使用页面引入
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'
export default {
  components: {
				
import { quillEditor } from 'vue-quill-editor'
import Delta from 'quill-delta'
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';
const toolbarOptions = [
  ['bold', 'italic', 'underline', 'strike
 npm install vue-file-toolbar-menu
 :warning: 您的Vue.js项目必须具有支持
 :speech_balloon: 如果您喜欢静态文件，请从dist文件夹导入资产
MyComponent.vue 
< template>
  < div> < vue xss=removed> </ div>
</ template>
< script >
import VueFileToolbarMenu from ' vue-file-toolbar-menu '
				
.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::before {
  content: "14px" !important;
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=...
				
羽毛笔智能粘贴
此插件扩展了的默认剪贴板模块，以防止用户粘贴不属于编辑器HTML。 为此，它将调查工具栏配置，并根据可能的格式确定允许使用哪些标签和属性。 但是，您也可以自己决定允许什么。
您可以使用或来安装此插件。 在bash提示符下从项目根目录运行以下命令之一。 
npm i quill-paste-smart
# or: yarn add quill-paste-smart
由于此插件会自行注册，因此只需导入即可。
 import Quill from 'quill' ;
import 'quill-paste-smart' ;
React
此插件开箱即用，将删除工具栏格式中不可用的所有HTML标记和属性。 如果您不同意默认设置，则可以决定自己允许的设置。 我还认为在粘贴后保持选中的粘贴内容的选择很有用，因此也有一个设置。
 有效的配置如
				
Vue.js是一个用于构建用户界面的JavaScript框架，而vue-quill-editor是一个基于Quill.js的富文本编辑器组件，用于在Vue.js项目中实现富文本编辑功能。
要在Vue.js项目中使用vue-quill-editor，首先需要安装它。可以通过npm或yarn来安装，具体命令如下：
```bash
npm install vue-quill-editor
```bash
yarn add vue-quill-editor
安装完成后，在需要使用富文本编辑器的组件中，引入vue-quill-editor并注册组件。示例代码如下：
```javascript
// 引入vue-quill-editor
import VueQuillEditor from 'vue-quill-editor'
export default {
  components: {
    VueQuillEditor
  data() {
    return {
      content: '' // 用于保存富文本编辑器的内容
接下来，在模板中使用`<vue-quill-editor>`标签来渲染富文本编辑器。示例代码如下：
```html
<template>
    <vue-quill-editor v-model="content"></vue-quill-editor>
</template>
通过`v-model`指令可以将编辑器的内容与`content`数据进行双向绑定，这样就可以在组件中获取和修改编辑器的内容了。
除了基本的使用，vue-quill-editor还提供了很多配置项，可以根据需求进行相应的配置，例如自定义工具栏、设置编辑器高度等。具体的配置可以参考vue-quill-editor的文档。
希望这些信息能帮助到你，如果还有其他问题，请随时提问！