VueQuillEditor富文本编辑器的使用

图片描述

前言

以前我对富文本的使用和保存不是很懂,停留在理解为textarea就是富文本的阶段,后来接触到了UEditor,被它华丽的外表所惊艳,按钮多功能丰富,但是使用起来却没那么顺手。
慢慢开始学习前端开发框架,学习使用Vue就开始正视前端的学习其中接触到了vue-quill-editor和Tinymce,学Vue的这两款应该都会接触到但从功能上来讲Tinymce肯定优秀一点,但是我自己觉得vue-quill-editor更适合我的项目一些,我就使用了vue-quill-editor,接下来介绍一下我的使用心得。

关键词

安装和使用固定长度内部滚动条滚动条样式修改修改图片大小

正文

首先是安装

npm install vue-quill-editor --save-dev

然后是在src/main.js引入

// 导入富文本编辑器
import VueQuillEditor from 'vue-quill-editor'
// 导入富文本编辑器样式
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import Quill from 'quill'
// 将富文本编辑器,注册为全局可用组件
Vue.use(VueQuillEditor)

使用方式

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

工具栏是可以自己定义的:

editorOption: {
        scrollingContainer: '#editorcontainer',
        placeholder: '',
        // or 'bubble'
        theme: 'snow',
        modules: {
          imageResize: {
            displayStyles: {
              backgroundColor: 'black',
              border: 'none',
              color: 'white'
            },
            modules: ['Resize', 'DisplaySize', 'Toolbar']
          },
          toolbar: {
            // 工具栏
            container: toolbarOptions.toolbarOptions,
            handlers: {
              'image': function (value) {
                if (value) {
                  
                } else {
                  this.quill.format('image', false)
                }
              }
            }
          }
        }
      }

我将toolbarOptions单独存为一个文件,内容如下:

const toolbarOptions = [
  // toggled buttons
  ['bold', 'italic', 'underline', 'strike'],
  ['blockquote'],
  // custom button values
  [{'header': 1}, {'header': 2}],
  [{'list': 'ordered'}, {'list': 'bullet'}],
  // superscript/subscript
  [{'script': 'sub'}, {'script': 'super'}],
  // outdent/indent
  [{'indent': '-1'}, {'indent': '+1'}],
  // text direction
  [{'direction': 'rtl'}],
  [{'size': ['10px', '12px', '14px', '16px', '18px', '20px', '22px', '24px', '26px', '32px', '48px']}],
  // custom dropdown
  [{'header': [1, 2, 3, 4, 5, 6, false]}],
  // dropdown with defaults from theme
  [{'color': []}, {'background': []}],
  [{'font': []}],
  [{'align': []}],
  ['image'],
  // remove formatting button
  ['clean']
]

export default {
  toolbarOptions
}

图片描述
前端如何展示富文本呢?

<p class="ql-editor" v-html="articleObj.content"></p>

这里有一个地方是重点,就是class="ql-editor",因为我在使用p标签的时候发现,有时候字体不生效,居中不生效,原来是没加这个class

样式修改

首先是如何修改富文本框大小的问题,一开始为了让富文本大小不是特别小,我使用了这一点样式来配置:

/* 编辑器初始高度 */
.ql-editor {
  min-height: 6rem;
}

图片描述

当超出行的时候,整个页面都会被拉长,整个页面出现滚动条,而不是行内扩充,出现滚动条

图片描述

这个问题的主要原因是我对CSS样式的使用不熟,解决办法如下:

内部滚动条

/* 编辑器内部出现滚动条 */
.ql-container{
  overflow-y:auto;
  height:8rem!important;
}

然而滚动条还是太丑了。

修改滚动条样式

/*滚动条整体样式*/
.ql-container ::-webkit-scrollbar{
  width: 10px;/*竖向滚动条的宽度*/
  height: 10px;/*横向滚动条的高度*/
}
.ql-container ::-webkit-scrollbar-thumb{/*滚动条里面的小方块*/
  background: #666666;
  border-radius: 5px;
}
.ql-container ::-webkit-scrollbar-track{/*滚动条轨道的样式*/
  background: #ccc;
  border-radius: 5px;
}

这样一改,滚动条就好看多了吧?是不是?

修改图片大小

上传的图片如果不能修改大小那真是灾难,所以还是要修改大小的组件,还好已经有人解决了这个组件
一样的,首先是安装

npm install quill-image-resize-module --save-dev

在src/main.js引入

import imageResize from 'quill-image-resize-module'
Quill.register('modules/imageResize', imageResize)

使用效果如下:

图片描述

总结

富文本的使用,没有最好的,只有最适合自己的,我在这里遇到很多坑,有的是上网搜解决的,有的是自己冥思苦想出来的,主要还是前端的知识没有那么熟练导致的,所以现在愈发的对前端的开发重视起来,认真总结经验,让前端更加熟悉。
在使用富文本的时候,肯定会遇到图片的上传问题,要么直接传文件流然后以图片的形式保存,数据库保存路径即可,要么是以base64传字符串,到了后台要么转换回图片,要么就以base64保存到数据库,显然在数据库保存图片路径才是最佳的选择,至于你以什么方式传都行,然后前端需要回传一个图片的地址即可,下一篇我就将介绍,vue-quill-editor如何上传图片并回传地址的。

©️2020 CSDN 皮肤主题: 代码科技 设计师: Amelia_0503 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值