哎呀，一個富文本編輯器折騰了我好久啊，剛開始找的就是wangEditor ，但是上傳圖片的調接口，我就尋思找個簡單的，後來換了quill 可以不調接口上傳圖片，但是v-model綁定不了，而且一直報錯，後來換了tinymce,按照網上的教程裝完了，wuhu，直接不顯示，後來我妥協了，我換回來了wangEditor + 自定義上傳圖片的方法，有空我一定把另外倆搞出來
首先wangEditor 官網 地址：https://www.wangeditor.com/
我用的vue3哈，vue,elementUi 啥都裝完了，我就根據官網來了
首先安裝插件
npm install @wangeditor/editor --save npm install @wangeditor/editor-for-vue@next --save
然後在componets裏面新建 wangEditor.vue,直接複製就行了
<template>
<div style="border: 1px solid #ccc">
<Toolbar
style="border-bottom: 1px solid #ccc"
:editor="editorRef"
:defaultConfig="toolbarConfig"
:mode="mode"
/>
<Editor
style="height: 500px; overflow-y: hidden;"
v-model="valueHtml"
:defaultConfig="editorConfig"
:mode="mode"
@onCreated="handleCreated"
/>
</div>
</template>
<script>
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { onBeforeUnmount, ref, shallowRef, onMounted } from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
export default {
components: { Editor, Toolbar },
setup() {
// 編輯器實例，必須用 shallowRef
const editorRef = shallowRef()
// 內容 HTML
const valueHtml = ref('')
// 工具欄配置 const toolbarConfig = {excludeKeys: [
'fullScreen',//不顯示全屏
'group-video', // 不顯示上傳視頻
]}
//菜單配置
const editorConfig = {
placeholder: '請輸入內容...', MENU_CONF:{
// 配置默認字號
// 配置上傳圖片
uploadImage:{
// 上傳圖片請求接口路徑
server: "/api//v1/upload/file",
// 後端接收的文件名稱
fieldName: "multipartFile",
maxFileSize: 10 * 1024 * 1024, // 上傳圖片10M
// 上傳的圖片類型
allowedFileTypes: ["image/*"],
// 小於該值就插入 base64 格式（而不上傳），默認爲 0
base64LimitSize: 10 * 1024, // 10MB
// 自定義上傳圖片返回格式【後端返回的格式】
customInsert(res, insertFn) {
if(res.code != 200 ){
ElMessage.error("上傳文件失敗，"+res.message)
return
}
// 從 res 中找到 url alt href ，然後插入圖片 ,根據後端實際返回的字段來 insertFn(res.data.url, res.data.alt,res.data.url)
},
// 將 meta 拼接到 url 參數中，默認 false
metaWithUrl: true,
// 單個文件上傳成功之後
onSuccess(file, res) {
if(res.code == 200){
ElMessage.success(`${file.name} 上傳成功`)
return
}else {
ElMessage.warning(`${file.name} 上傳出了點異常`)
return
}
// console.log(`${file.name} 上傳成功`, res)
//ElMessage.success(`${file.name} 上傳成功`, res)
},
// 單個文件上傳失敗
onFailed(file, res) {
console.log(res)
ElMessage.error(`${file.name} 上傳失敗`)
},
// 上傳錯誤，或者觸發 timeout 超時
onError(file, err, res) {
console.log(err, res)
ElMessage.error(`${file.name} 上傳出錯`)
},
}
}
}
// 組件銷燬時，也及時銷燬編輯器
onBeforeUnmount(() => {
const editor = editorRef.value
if (editor == null) return
editor.destroy()
})
const handleCreated = (editor) => {
editorRef.value = editor // 記錄 editor 實例，重要！
// 查看所有工具欄key，先查看可以根據實際情況進項增刪
console.log(editor.getAllMenuKeys())
}
return {
editorRef,
valueHtml,
mode: 'default', // 或 'simple'
toolbarConfig,
editorConfig,
handleCreated
};
}
}
</script> 這個就是富文本的組件了，用的時候在頁面引用一下index.vue
<template> <div id="page"> <wangEditor /> </div> </template> <script> import wangEditor from '../../componets/wangEditor.vue' export default { components: {wangEditor}, setup() { return { } }, } </script>
最後的富文本就長這樣了，我編輯了一下上傳的圖片
