富文本编辑器:

Vue-Quill-Editor

官网地址:https://www.npmjs.com/package/vue-quill-editor

使用步骤:

1.安装

npm install vue-quill-editor --save

2.引入

  //引入富文本编辑器
  import VueQuillEditor from 'vue-quill-editor'
  //引入vue-quill-editor相关样式
  import 'quill/dist/quill.core.css'
  import 'quill/dist/quill.snow.css'
  import 'quill/dist/quill.bubble.css'

  Vue.use(VueQuillEditor)

3.在需要的组件中加载富文本编辑器

<quill-editor v-model="addForm.goods_introduce"></quill-editor>

效果演示:
在这里插入图片描述

解决富编辑器高度问题

.ql-editor {
  height: 300px !important;
 }
解决富文本编辑器不能加粗倾斜的问题,重置字体样式

大家在用富文本编辑器vue-quill-editor会出现粗体斜体失效的问题
解决方法:只需要把项目中的css样式重置中关于字体的样式注释掉就好了。

{
    margin: 0;
    padding: 0;
    border: 0;
    /* font-size: 100%;
       font: inherit; */
    /* vertical-align: baseline; */
}

Logo

前往低代码交流专区

更多推荐