1，下载富文本插件
npm install vue-quill-editor --save2，可以直接在页面进行引入，也可以全局挂载，（只展示页面引入）
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import { quillEditor } from "vue-quill-editor";3，页面使用
<!-- 富文本 -->
<quill-editor
ref="myQuillEditor"
v-model="content"
:options="editorOption"
@blur="onEditorBlur($event)"
@focus="onEditorFocus($event)"
@ready="onEditorReady($event)"
/>
<!-- 公告发布按钮 -->
<div class="releaseBtn">
<el-button type="danger" size="medium" @click="releaseBtn"
>发布公告</el-button
>
</div>4，页面展示效果为
5，到这一步如果页面需要把所发送的富文本内容展示到前端，可以直接让后端把传过去的内容原封不动的返回到前端（以下为演示）
演示发送，像后端发送的格式为
可以让后端把这样的数据直接返回回来
6，页面功能回显
可以直接使用v-html进行页面内容回显，此时拿到后端返回的数据
<div v-html="this.announcementDetail"></div> 7，现在我们可以直接显示数据啦
以上仅为本人自身理解，如有错误，请大佬指正！！！！！文章来源：https://www.toymoban.com/news/detail-648506.html
文章来源地址https://www.toymoban.com/news/detail-648506.html
到了这里，关于vue2.0实现富文本编辑及文本内容展示的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
