vue-quill-editor踩坑记录--富文本内容回显样式不对_vue-quill-editor 与v-html 样式不一致_Fighting宁的博客

使用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'&lt;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回显文本了。
				npm ERR! 403 403 Forbidden - PUT https://registry.npmjs.org/ui-com - You do not have permission to p