使用富文本类型: vue-quill-editor
注意: 富文本导出 html 我们使用的时候, 样式凸显不出来
DOM 结构
<p><sub class="ql-size-large">测试内容</sub><sup class="ql-size-large">222222</sup></p>
一般编辑器导出内容:样式会 以style 形式嵌入, 但是这个的话,确是样式, 所以我们需要 下载对应的文件包
解决:
版本: "quill": "1.3.7",
npm install quill@1.3.7
import 'quill/dist/quill.core.css'
但是我发现一个问题,就是 每个样式前面多多了一个 类名 .ql-editor
.ql-editor .ql-size-small {font-size: 0.75em;
}
.ql-editor .ql-size-large {font-size: 1.5em;
}
更dom 结构里的不一样,其实还是不会生效的, 所以解决方案就是在 富文本 父级dom 加入 .ql-editor 类
<div class="ql-editor" v-html="mouldData"></div>
至此解决富文本导出,在其他页面样式不能展现的问题。
如果有其他无法显示的问题,都是类似这种解决方案:
关于前端vue 使用富文本
推荐使用 :https://javaforall.cn/132756.html
文档:https://www.wangeditor.com/v5/getting-started.html
文档:https://www.wangeditor.com/demo/like-qq-doc.html
官网:http://tinymce.ax-z.cn/
官网:http://kindeditor.net/demo.php
参考使用:http://www.zzvips.com/article/212768.html
ps:其他 (与文本无关
element-ui table滚动到底部加载下一页
let that = thisthis.$refs.screenTable.bodyWrapper.addEventListener('scroll', function () {let clientHeight = this.clientHeightlet scrollTop = this.scrollToplet scrollHeight = this.scrollHeightif (clientHeight + scrollTop === scrollHeight) {// 滚动到最底时,加载下一页// if (that.total <= that.index && !this.popover) return// that.index += 1// 滚动条回滚至顶部// this.$refs.screenTable.bodyWrapper.scrollTop = 0}}, true)