官方文檔?
項(xiàng)目中要求實(shí)現(xiàn)富文本編輯器取編輯內(nèi)容
這種編輯器有好多選擇了wangeditor富文本編輯器
首先根據(jù)文檔安裝
yarn add @wangeditor/editor
# 或者 npm install @wangeditor/editor --save
yarn add @wangeditor/editor-for-vue@next
# 或者 npm install @wangeditor/editor-for-vue@next --save再按照官方的指引 cv 如下代碼
<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() {
// 編輯器實(shí)例，必須用 shallowRef
const editorRef = shallowRef()
// 內(nèi)容 HTML
const valueHtml = ref('<p>hello</p>')
// 模擬 ajax 異步獲取內(nèi)容
onMounted(() => {
setTimeout(() => {
valueHtml.value = '<p>模擬 Ajax 異步設(shè)置內(nèi)容</p>'
}, 1500)
})
const toolbarConfig = {}
const editorConfig = { placeholder: '請(qǐng)輸入內(nèi)容...' }
// 組件銷毀時(shí)，也及時(shí)銷毀編輯器
onBeforeUnmount(() => {
const editor = editorRef.value
if (editor == null) return
editor.destroy()
})
const handleCreated = (editor) => {
editorRef.value = editor // 記錄 editor 實(shí)例，重要！
}
return {
editorRef,
valueHtml,
mode: 'default', //默認(rèn)模式
mode: 'simple', //簡(jiǎn)潔模式
toolbarConfig,
editorConfig,
handleCreated
};
}
}
</script> 這個(gè)時(shí)候編輯器的功能已經(jīng)實(shí)現(xiàn)了 如下圖
?但是目前為止他還不是我想要的
因?yàn)檫@個(gè)編輯器我想讓他在彈窗中出現(xiàn)，而且我不需要那么多功能
接著更文檔的步子走
?文檔里面既然有這個(gè)那就肯定可以實(shí)現(xiàn)
研究一番發(fā)現(xiàn)弱國(guó)想要怎加或者修改編輯器的功能首先要獲取這個(gè)功能的key
?點(diǎn)擊Deom示例
打開控制臺(tái)，輸入toolbar.getConfig().toolbarKeys這個(gè)時(shí)候就可以看到每個(gè)功能的key了
在回個(gè)車
?就可以看到詳細(xì)內(nèi)容了
這個(gè)時(shí)候只需要回到代碼里面添加
toolbarConfig.toolbarKeys = [
// 菜單 key
'headerSelect',
// 分割線
'|',
// 菜單 key
'bold',
'italic',
'color',
'justifyLeft',
'justifyRight',
'justifyCenter'
// 繼續(xù)配置其他菜單...
]就可以實(shí)現(xiàn)你想要的功能了，如下圖
?我們可通過(guò)toolbarKeys: [], 去實(shí)現(xiàn)顯示哪些菜單，如何排序、分組的功能? ?通過(guò)excludeKeys: []選擇去隱藏哪些菜單
最復(fù)雜的就是上傳圖片了，其實(shí)這個(gè)也很簡(jiǎn)單
看看文檔
一目了然https://www.wangeditor.com/v5/menu-config.html#%E4%B8%8A%E4%BC%A0%E5%9B%BE%E7%89%87return中寫上如下代碼，需要注意的時(shí)上傳圖片后，后端必須返回url圖片的鏈接，否則編輯器中不會(huì)顯示圖片
editorConfig: {
placeholder: '點(diǎn)擊全屏介紹產(chǎn)品吧...',
// autoFocus: false,
// 所有的菜單配置，都要在 MENU_CONF 屬性下
MENU_CONF: {
// 配置字號(hào)
// fontSize: [... ],
// 圖片上傳
uploadImage: {
server: '/api/admin/uploade',
fieldName: 'img',
// 單個(gè)文件的最大體積限制，默認(rèn)為 2M
maximgSize: 10 * 1024 * 1024, // 10M
// 最多可上傳幾個(gè)文件，默認(rèn)為 100
maxNumberOfimgs: 10,
// 選擇文件時(shí)的類型限制，默認(rèn)為 ['image/*'] 。如不想限制，則設(shè)置為 []
allowedimgTypes: ['image/*'],
// 自定義上傳參數(shù)，例如傳遞驗(yàn)證的 token 等。參數(shù)會(huì)被添加到 formData 中，一起上傳到服務(wù)端。
meta: {
// token: 'xxx',
// otherKey: 'yyy'
// img:''
},
// 將 meta 拼接到 url 參數(shù)中，默認(rèn) false
metaWithUrl: false,
// 自定義增加 http header
headers: {
// Accept: 'text/x-json',
// otherKey: 'xxx'
},
// 跨域是否傳遞 cookie ，默認(rèn)為 false
withCredentials: true,
// 超時(shí)時(shí)間，默認(rèn)為 10 秒
timeout: 10 * 1000, //10 秒
// 上傳前
onBeforeUpload(imgs) {
ElMessage({
message: '圖片正在上傳中,請(qǐng)耐心等待',
grouping: true,
duration: 0,
customClass: 'uploadTip',
iconClass: 'el-icon-loading',
showClose: true
});
return imgs;
},
// 自定義插入圖片
customInsert(res, insertFn) {
// 因?yàn)樽远x插入導(dǎo)致onSuccess與onFailed回調(diào)函數(shù)不起作用,自己手動(dòng)處理
// 先關(guān)閉等待的ElMessage
ElMessage.closeAll();
if (res.code === 200) {
ElMessage.success({
message: "圖片上傳成功",
grouping: true,
});
} else {
ElMessage.error({
message: "圖片上傳失敗，請(qǐng)重新嘗試",
grouping: true,
});
}
// 從 res 中找到 url alt href ，然后插入圖片
insertFn(res.data.url);
// console.log(res, "res.data")
},
// 單個(gè)文件上傳成功之后
onSuccess(img, res) {
console.log(`${img.name} 上傳成功`, res);
},
// 單個(gè)文件上傳失敗
onFailed(img, res) {
console.log(`${img.name} 上傳失敗`, res);
},
// 上傳進(jìn)度的回調(diào)函數(shù)
onProgress(progress) {
console.log('progress', progress);
// progress 是 0-100 的數(shù)字
},
// 上傳錯(cuò)誤，或者觸發(fā) timeout 超時(shí)
onError(img, err, res) {
console.log(`${img.name} 上傳出錯(cuò)`, err, res);
}
},到這里其實(shí)基本功能已經(jīng)實(shí)現(xiàn)了，那我們?cè)趺幢４妫庉嬈髦械膬?nèi)容呢
需要知道富文本編輯器是所見(jiàn)即所得的文本編輯器，簡(jiǎn)單來(lái)說(shuō)就是文本上面寫的行內(nèi)樣式，那我們?cè)撛鯓颖４孢@些行內(nèi)樣式呢，在這里我是寫成了組件的形式
官方文檔中給出
?methods中寫上
onChange(editor) {
const text = editor.getHtml()
this.$emit('update:content', text)
},當(dāng)內(nèi)容變化是就獲取當(dāng)前行內(nèi)樣式
然后在父組件中監(jiān)聽(tīng)下
watch: {
"addlist.content"(value) {
// console.log(value, "就是這里")
},
在需要的地方
<!-- 編輯器組件 -->
<editor-all v-model:content="addlist.content" :passSon="addlist.content" />
<!-- 編輯器組件結(jié)束 -->就可以實(shí)現(xiàn)需要的功能啦
完整代碼文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-426306.html
<template>
<div style="border: 1px solid #ccc; margin-top: 10px;z-index:999;width:537px">
<!-- 工具欄 -->
<Toolbar style="border-bottom: 1px solid #ccc" :editor="editor" :defaultConfig="toolbarConfig" />
<!-- 編輯器 -->
<Editor style="height:200px; overflow-y: hidden;" :defaultConfig="editorConfig" v-model="passSon"
@onChange="onChange" @onCreated="onCreated" />
</div>
</template>
<script>
import { ElMessage } from 'element-plus'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
export default {
props: {
passSon: ''
},
data() {
return {
editor: null,
toolbarConfig: {
/* 顯示哪些菜單，如何排序、分組 */
// toolbarKeys: [],
/* 隱藏哪些菜單 */
excludeKeys: [
// '|',
'blockquote',
'fontSize',
'fontFamily',
'lineHeight',
'bulletedList',
'numberedList',
'todo',
'emotion',
'group-video',
'group-indent',
'group-more-style',
'insertTable',
'codeBlock',],
},
editorConfig: {
placeholder: '點(diǎn)擊全屏介紹產(chǎn)品吧...',
// autoFocus: false,
// 所有的菜單配置，都要在 MENU_CONF 屬性下
MENU_CONF: {
// 配置字號(hào)
// fontSize: [... ],
// 圖片上傳
uploadImage: {
server: '/api/admin/uploade',
fieldName: 'img',
// 單個(gè)文件的最大體積限制，默認(rèn)為 2M
maximgSize: 10 * 1024 * 1024, // 10M
// 最多可上傳幾個(gè)文件，默認(rèn)為 100
maxNumberOfimgs: 10,
// 選擇文件時(shí)的類型限制，默認(rèn)為 ['image/*'] 。如不想限制，則設(shè)置為 []
allowedimgTypes: ['image/*'],
// 自定義上傳參數(shù)，例如傳遞驗(yàn)證的 token 等。參數(shù)會(huì)被添加到 formData 中，一起上傳到服務(wù)端。
meta: {
// token: 'xxx',
// otherKey: 'yyy'
// img:''
},
// 將 meta 拼接到 url 參數(shù)中，默認(rèn) false
metaWithUrl: false,
// 自定義增加 http header
headers: {
// Accept: 'text/x-json',
// otherKey: 'xxx'
},
// 跨域是否傳遞 cookie ，默認(rèn)為 false
withCredentials: true,
// 超時(shí)時(shí)間，默認(rèn)為 10 秒
timeout: 10 * 1000, //10 秒
// 上傳前
onBeforeUpload(imgs) {
ElMessage({
message: '圖片正在上傳中,請(qǐng)耐心等待',
grouping: true,
duration: 0,
customClass: 'uploadTip',
iconClass: 'el-icon-loading',
showClose: true
});
return imgs;
},
// 自定義插入圖片
customInsert(res, insertFn) {
// 因?yàn)樽远x插入導(dǎo)致onSuccess與onFailed回調(diào)函數(shù)不起作用,自己手動(dòng)處理
// 先關(guān)閉等待的ElMessage
ElMessage.closeAll();
if (res.code === 200) {
ElMessage.success({
message: "圖片上傳成功",
grouping: true,
});
} else {
ElMessage.error({
message: "圖片上傳失敗，請(qǐng)重新嘗試",
grouping: true,
});
}
// 從 res 中找到 url alt href ，然后插入圖片
insertFn(res.data.url);
// console.log(res, "res.data")
},
// 單個(gè)文件上傳成功之后
onSuccess(img, res) {
console.log(`${img.name} 上傳成功`, res);
},
// 單個(gè)文件上傳失敗
onFailed(img, res) {
console.log(`${img.name} 上傳失敗`, res);
},
// 上傳進(jìn)度的回調(diào)函數(shù)
onProgress(progress) {
console.log('progress', progress);
// progress 是 0-100 的數(shù)字
},
// 上傳錯(cuò)誤，或者觸發(fā) timeout 超時(shí)
onError(img, err, res) {
console.log(`${img.name} 上傳出錯(cuò)`, err, res);
}
},
}
},
}
},
mounted() {
},
methods: {
onCreated(editor) {
this.editor = Object.seal(editor) // 【注意】一定要用 Object.seal() 否則會(huì)報(bào)錯(cuò)
},
onChange(editor) {
const text = editor.getHtml()
this.$emit('update:content', text)
},
},
beforeDestroy() {
const editor = this.editor
if (editor == null) return
editor.destroy() // 組件銷毀時(shí)，及時(shí)銷毀 editor ，重要?。?！
},
components: { Editor, Toolbar },
}
</script>
<style src="@wangeditor/editor/dist/css/style.css">
</style>ok文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-426306.html
到了這里，關(guān)于vue中使用wangeditor富文本編輯器的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
