效果圖：
image.png
此處介紹一個(gè)好用的 Tinymce 富文本編輯器，也是 vue-element-admin
后臺(tái)管理項(xiàng)目中所用到的。（都有現(xiàn)成的了，不妨拿來用）
image.png
image.png
點(diǎn)擊查看 vue-element-admin 富文本功能介紹
點(diǎn)擊查看 Tinymce 中文文檔
文件下載：
此處給大家看一下使用到的文件目錄
image.png
上面就是封裝好的富文本組件，你也可以 點(diǎn)擊這里去下載 相應(yīng)的文件目錄，不過還是建議全部下載下來，把對(duì)應(yīng)的組件拿出來用比較好。（還有很多別的組件也很好用呢，也可以偷來用 ??）
image.png
圖片上傳：
外部圖片插入：這里提一下圖片插入這塊，每次插入的時(shí)候，你需要備注圖片的在線地址，輸入完之后，就會(huì)插入到編輯器中。
image.png
本地圖片插入：如果想插入本地圖片，你需要點(diǎn)擊右上角的上傳，然后配合自己后端的接口，上傳本地圖片到服務(wù)端，并生成一個(gè)在線圖片地址，以便插入到編輯器中，這樣你最終傳給后端的就是一個(gè) <img src="在線地址" alt=""> 的圖片標(biāo)簽了。
image.png
下面文件標(biāo)注的地方就是，上傳圖片的組件模塊，這里面你可以根據(jù)自身需求進(jìn)行調(diào)整
image.png
使用代碼：
<template>
<div class="app-content">
<div class="Tinymce_box">
<tinymce v-model="content" :height="500" />
<div v-if="content" class="editor-content">
<h3>預(yù)覽效果：</h3>
<div v-html="content" />
</div>
</div>
</div>
</template>
<script>
import Tinymce from "@/components/Tinymce";
export default {
components: { Tinymce },
data() {
return {
content: ""
};
}
};
</script>
<style lang="scss" scoped>
.Tinymce_box {
display: flex;
}
.editor-content {
margin-left: 30px;
flex-grow: 1;
border: 2px dashed #f1f1f1;
padding:0 20px;
}
h3 {
color: #808080;
}
</style>
