发布文章（二）-基础布局-editor富文本配置功能与样式-quill.js插件使用

最新推荐文章于 2024-04-10 05:11:47 发布

viceen

最新推荐文章于 2024-04-10 05:11:47 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏：项目-vue-PC端工具文章标签： vue js

本文链接：https://blog.csdn.net/weixin_44867717/article/details/104362945

工具同时被 2 个专栏收录

163 篇文章

订阅专栏

项目-vue-PC端

53 篇文章

订阅专栏

本文详细介绍如何在Vue项目中集成并使用富文本编辑器，包括安装vue-quill-editor插件，局部挂载及配置富文本功能，如加粗、斜体、标题等，以及样式调整，适用于SPA单页面应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

02-使用富文本：

记录vue技术栈相关的框架组件库插件文章博客教学视频
https://github.com/vuejs/awesome-vue
找到：富文本插件
https://github.com/surmon-china/vue-quill-editor 富文本。

在这里插入图片描述

富文本插件

富文本编辑器

安装：

npm install vue-quill-editor

局部挂载：

src/views/publish/index.vue

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: {
    quillEditor
  }
}

使用：SPA-单页面应用程序模式

插入到——publish/index.vue中富文本占位的位置

<quill-editor v-model="content" :options="editorOption"></quill-editor>

options 配置属性执行的是配置对象 editorOption 。

富文本配置

配置富文本：

1.功能

quill js插件文档地址
https://quilljs.com/docs/quickstart/

quill.js插件文档

官网左侧MODULES—>TOOLBAR点击—>选择如下的全套功能配置

富文本功能全套配置

pulish/index.vue中data里进行添加：

// 富文本配置对象
      editorOption: {
        placeholder: '',  //占位符
            //组件  工具栏
        modules: {
            //工具栏配置多个功能
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'],  //加粗、斜体、下划线、删除线
            ['blockquote', 'code-block'],   //带引号 写代码
            [{ header: 1 }, { header: 2 }],   //标题
            [{ list: 'ordered' }, { list: 'bullet' }],  // 有序 无序
            [{ indent: '-1' }, { indent: '+1' }],  //  向前缩进  向后缩进
            ['image']  //图片
          ]
        }
      },

2.样式: styles/index.less——其他组件的样式有单独作用域，要单独写一个全局样式文件，且权重要高

//引入两个less样式文件被覆盖，不生效，要权重高，优先级高
#app .ql-editor{
  height: 300px;
}
//富文本间距处理
#app .ql-toolbar.ql-snow{
  padding: 0 8px;
}