【若依】 若依内置富文本框quill,editor居中无效

简介: 【若依】 若依内置富文本框quill,editor居中无效

一、前言

最近写的项目是用的若依框架,在此基础上二次开发。使用若依内置组件quill富文本发布通知公告时可以选择文字或图片的对齐方式,但在页面上显示无效。解决方法如下:

参考文章:富文本插件quill生成内容后,字体样式未生效

二、问题还原

1、在富文本编辑器内,对文字进行了排版,以下为文字居中样式

2、在页面里使用v-html渲染富文本代码时,出现ql-align-center的class名,但是居中并未生效

三、解决

1、在需要显示富文本样式的项目中,安装quill:npm i quill;

npm i quill

2、main.js页面里引入样式css文件:import “quill/dist/quill.core.css”;

import "quill/dist/quill.core.css"

3、使用v-html的标签上加入class类名:class=“ql-editor”;

class="ql-editor"

四、最终效果

实现居中

下班~

目录
相关文章
|
6月前
|
JavaScript
Vue在Element UI下使用富文本框插件quill-editor(我个人不推荐用这个复杂的富文本插件)
Vue在Element UI下使用富文本框插件quill-editor(我个人不推荐用这个复杂的富文本插件)
|
3月前
|
存储 JavaScript 前端开发
Vue中通过集成Quill富文本编辑器实现公告的发布。Vue项目中vue-quill-editor的安装与使用【实战开发应用】
文章展示了在Vue项目中通过集成Quill富文本编辑器实现公告功能的完整开发过程,包括前端的公告发布、修改、删除操作以及后端的数据存储和处理逻辑。
Vue中通过集成Quill富文本编辑器实现公告的发布。Vue项目中vue-quill-editor的安装与使用【实战开发应用】
文本---富文本编辑器------Vue3使用富文本编辑器,Quill,全局样式和组件和样式的写法
文本---富文本编辑器------Vue3使用富文本编辑器,Quill,全局样式和组件和样式的写法
|
4月前
|
JavaScript 前端开发
vue 富文本编辑器 quill (含代码高亮、自定义字体、汉化、鼠标悬浮提示、组件封装等)
vue 富文本编辑器 quill (含代码高亮、自定义字体、汉化、鼠标悬浮提示、组件封装等)
200 0
|
JavaScript API
富文本编辑器Quill 介绍及在Vue中的使用方法
在Web开发中,富文本编辑器是不可或缺的一个功能组件,掌握少量基础语法就能让一篇文章实现较为不错的排版效果,即见即所得
富文本编辑器Quill 介绍及在Vue中的使用方法
angular4中引入quill editor
1. npm install --save-dev @types/quill  安装types 2.npm install ng2-quill-editor --save 安装quill 3.配置tsconfig.
1371 0
|
前端开发 JavaScript
Quill编辑器介绍及扩展
从这里进入官网. 能找到这个NB的编辑器是因为公司项目需要一个可视化的cms编辑器,类似微信公众号编辑文章。可以插入各种卡片,模块,问题,图片等等。然后插入的内容还需要能删除,拖拽等等。所以采用vue开发,兼容vue并兼容拖拽的文本编辑器并不多,所以在github上一番搜索找到了quill这款文本编辑器神器。
1819 0
|
容器 前端开发 JavaScript
Quill – 可以灵活自定义的开源的富文本编辑器
  Quill 的建立是为了解决现有的所见即所得(WYSIWYG)的编辑器本身就是所见即所得(指不能再扩张)的问题。如果编辑器不正是你想要的方式,这是很难或不可能对其进行自定义以满足您的需求。   Quill 旨在通过把自身组织成模块,并提供了强大的 API 来构建额外的模块来解决这个问题。
1880 0
|
4月前
|
开发工具
vi编辑器,现在vi\vim是文本文件进行编辑的最佳选择,Vim是vi的加强的版本,兼容vi的所有指令,vim编辑器有三种工作模式,一开始进入的是命令模式,命令模式i是插入的意思,两下y+p复制内容
vi编辑器,现在vi\vim是文本文件进行编辑的最佳选择,Vim是vi的加强的版本,兼容vi的所有指令,vim编辑器有三种工作模式,一开始进入的是命令模式,命令模式i是插入的意思,两下y+p复制内容