1，下載富文本插件
npm install vue-quill-editor --save2，可以直接在頁面進(jìn)行引入，也可以全局掛載，（只展示頁面引入）
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)"
/>
<!-- 公告發(fā)布按鈕 -->
<div class="releaseBtn">
<el-button type="danger" size="medium" @click="releaseBtn"
>發(fā)布公告</el-button
>
</div>4，頁面展示效果為
?5，到這一步如果頁面需要把所發(fā)送的富文本內(nèi)容展示到前端，可以直接讓后端把傳過去的內(nèi)容原封不動(dòng)的返回到前端（以下為演示）
演示發(fā)送，像后端發(fā)送的格式為
可以讓后端把這樣的數(shù)據(jù)直接返回回來
6，頁面功能回顯
可以直接使用v-html進(jìn)行頁面內(nèi)容回顯，此時(shí)拿到后端返回的數(shù)據(jù)
<div v-html="this.announcementDetail"></div> 7，現(xiàn)在我們可以直接顯示數(shù)據(jù)啦
以上僅為本人自身理解，如有錯(cuò)誤，請大佬指正！?。。。?mark hidden color="red">文章來源：http://www.zghlxwxcb.cn/news/detail-648506.html
?文章來源地址http://www.zghlxwxcb.cn/news/detail-648506.html
到了這里，關(guān)于vue2.0實(shí)現(xiàn)富文本編輯及文本內(nèi)容展示的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
