-
使用vue-quill-editor写的富文本，内容在H5使用v-html显示时，样式跟在富文本写的时候样式不一样，字体大小显示不出来。
-
原因：有些类名，在v-html页面是没有找到的。
-
解决:
-
全局或者局部引入vue-quill-editor的样式文件
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
<div v-html="content" class="ql-editor"></div>
- 一定要加上class="ql-editor"该类名，否则样式也不起作用
使用vue-quill-editor写的富文本，内容在H5使用v-html显示时，样式跟在富文本写的时候样式不一样，字体大小显示不出来。原因：有些类名，在v-html页面是没有找到的。解决:全局或者局部引入vue-quill-editor的样式文件import 'quill/dist/quill.core.css'import 'quill/dist/quill.snow.css'import 'quill/dist/quill.bubble.css'<div v-html="co.
在最近的vue项目中遇到的问题：v-html渲染的富文本，无法在样式表中修改样式。
代码如下，div.article-context里面的图片修改成自适应，但是没有任何效果。
<div class=article-context v-html=post.content></div>
<style scoped>
.article-context img {
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
</style>
2.分析原因
这是为什么呢？原因很简单：如果图片
一、本项目里面的所有阿里云配置均已禁用，因此需要修改阿里云的配置信息
OSSKey.properties 配置文件参数描述
useStatus true/false是否启用云存储，
autoCreateBucket true/false是否添加新的存储仓库，默认false
key 仓库权限key
secret 仓库权限secret
bucketName 云存储仓库的名称
ossEndPoint ueditor显示图片的访问域名
ossCliendEndPoint 阿里云文件存储的endpoint,在仓库概览里面可以看到
useCDN true/false是否启用cdn加速
cdnEndPoint cdn加速域名配置
useLocalStorager 是否启用本地存储
useAsynUploader 是否启用异步上传
二、启动运行项目
1、本项目编译环境，1.6及以上环境，idea 2016.2
2、测试http://localhost:8080/ueditor/jsp/controller.jsp 如果不能正常访问那么上传文件就不能使用
3、可以直接运行，idea运行时的测试路径，因个人环境配置有直接关系，eclipse需要加上项目名称才能运行
http://localhost:8080/ueditor/index.html
三、直接使用编译后的本项目到页面环境配置
1、直接将编译后的文件放进tomcat即可使用
###在main.js中进行引入
import Vue from ‘vue’
import VueQuillEditor from ‘vue-quill-editor’
import ‘quill/dist/quill.core.css’
import ‘quill/dist/quill.s...
1、npm install vue-quill-editor --save
2、npm install quill --save
3、npm install quill-image-drop-module --save （图片可拖动）
4、npm install quill-image-resize-module --save （图片可缩放）
package.json中下载依赖的版本号
二、插件需要webpack的支持
在vue.config.js 中需要添加的代码
const
vue富文本编辑器vue-quill-editor.js quill版本1.3.6
使用教程 ：
vue-quill-editor富文本编辑器使用方法，最全，含部分源码解读，含图片上传，如果页面有多个富文本，图片上传解决方案
https://blog.csdn.net/cplvfx/article/details/125557966
import QuillEditor from 'vue-quill-editor'
import 'quill/dist/quill.bubble.css'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
Vue.use(QuillEditor)
3.新建公共组件Editor.
啰啰嗦嗦的序言(可看可不看):
先说下我的需求,富文本中新增一个表格需求,富文本已实现(增删查改),表格新增要一起同步这四个场景,
开始我用的vue-quill-editor,结果发现坑太多,我查看的时候没法把拿到的数据丢到quill里面去修改,只能v-html展示,还有缓存以及验证的一些问题,只是想在富文本加个表格,发现用vue-quill-editor要改的地方太多,果断弃坑了,网上找了下发现wangEditor貌似不错,还有团队在维护,
支持Vue、React、Angular等框
https://github.surmon.me/vue-quill-editor/
npm地址：https://www.npmjs.com/package/vue-quill-editor
2、使用方式...
解决方法：引入
样式文件，将
回显的
html内容，包裹在一个div容器中，并加上对应的class。
引入
样式：
import '
quill/dist/
quill.snow.css'
回显的 div 加上对应的class：
<div class="ql-container ql-snow">
<div class="ql-
editor" v-
html="formData.content" />
问题解决啦：
```
javascript
import {
quillEditor } from '
vue-
quill-
editor'
import '
quill/dist/
quill.core.css'
import '
quill/dist/
quill.snow.css'
import '
quill/dist/
quill.bubble.css'
export default {
components: {
quillEditor
3. 在模板中使用组件，并在v-model中绑定需要
回显的文本：
```
html
<
quill-
editor v-model="
editorValue"></
quill-
editor>
4. 在script中定义
editorValue变量，并在created钩子函数中通过ajax请求获取数据：
```
javascript
<script>
export default {
components: {
quillEditor
data() {
return {
editorValue: ''
created() {
axios.get('url').then(response => {
this.
editorValue = response.data.content
}).catch(error => {
console.log(error)
</script>
通过以上步骤即可在
Vue项目中使用
vue-
quill-
editor回显文本了。
