繼第一個項(xiàng)目使用了vue-element-admin框架實(shí)現(xiàn)了我們的業(yè)務(wù)需求, 后來公司想重構(gòu)產(chǎn)品, 隨后購買了一套商業(yè)框架 - BladeX(服務(wù)真是的差勁), 這套框架包含了前后端, 而前端使用的是avue框架實(shí)現(xiàn)的, 這個框架又高度集成了element-plus, 使用起來也算是比較簡單, 也可以使用代碼生成器去實(shí)現(xiàn),在此只記錄使用avue框架富文本組件遇到的問題.
? ? 富文本引入的是wangEditor, 而avue在此基礎(chǔ)上又做了一個插件, 使用樣例如圖
根據(jù)上面的樣例寫富文本組件, 服務(wù)進(jìn)行內(nèi)容的上傳, 提示傳入的action不起作用, 查看avue-plugin-ueditor node_modules, 可以看到, options根本沒有起作用,修改, options同級添加action, 上傳, 完成;
但是產(chǎn)品又對富文本提出了新的需求,
? ? 1. 字號設(shè)置中, 沒有設(shè)置16px, 17px;
? ? 2. 修改編輯器的默認(rèn)行高,字體, 字號等;
查看文檔, 設(shè)置字號可以, 可以在customConfig里設(shè)置, 但是這里我們遇到個問題, 我的avue-plugin-ueditor版本和他的版本不一致,導(dǎo)致設(shè)置customConfig不生效, 所以,更新最新版本吧.
使用方法:
customConfig: {
? ? ? MENU_CONF:{
? ? ? ? fontSize:{
? ? ? ? ? fontSizeList:[
? ? ? ? ? ? '12px',
? ? ? ? ? ? '13px',
? ? ? ? ? ? '14px',
? ? ? ? ? ? '15px',
? ? ? ? ? ? '16px',
? ? ? ? ? ? '17px',
? ? ? ? ? ? '18px',
? ? ? ? ? ? '19px',
? ? ? ? ? ? '22px',
? ? ? ? ? ? '24px',
? ? ? ? ? ? '29px',
? ? ? ? ? ? '32px',
? ? ? ? ? ? '40px',
? ? ? ? ? ? '48px'
? ? ? ? ? ],
? ? ? ? }
? ? ? },
? ? ? excludeKeys:[
? ? ? ? 'blockquote',
? ? ? ? 'todo',
? ? ? ? 'bulletedList',
? ? ? ? 'group-justify',
? ? ? ? 'group-indent',
? ? ? ? 'codeBlock',
? ? ? ? 'undo',
? ? ? ? 'redo',
? ? ? ? '|',
? ? ? ? 'fullScreen',
? ? ? ]
? ? },
MENU_CONF中為設(shè)置內(nèi)容,?excludeKeys為不顯示的工具按鈕, 這里有個問題,設(shè)置uploadImage不起作用, 因?yàn)閍vue-plugin-ueditor沒有取MENU_CONF設(shè)置的uploadImage內(nèi)容;
設(shè)置編輯器默認(rèn)值, wangEditor中有設(shè)置默認(rèn)值的屬性,defaultContent,但是avue-plugin-ueditor沒有, 因此要設(shè)置defaultContent只能改源碼了,
設(shè)置defaultContent
defaultContent: [
? ? {
? ? ? type: 'paragraph',
? ? ? children: [
? ? ? ? { text: '', fontFamily: '宋體', fontSize: '14px' },
? ? ? ],
? ? ? // lineHeight ,關(guān)于默認(rèn)行高的設(shè)置阻塑，可查看源碼或通過官方demo
? ? ? // https://www.wangeditor.com/demo/index.html
? ? ? // 輸入文字察净，設(shè)置默認(rèn)字體狮荔、行高之后 在控制臺輸入 伐脖，this.editor.children 會顯示如下內(nèi)容：
? ? ? /*
? ? ? *[{"type": "paragraph", "children": [ {? "text": "faskdfjaslkdfj" } ], "lineHeight": "2.5" } ]
? ? ? * 按對應(yīng)格式設(shè)置 jsonContent 即可
? ? ? * */
? ? ? lineHeight: 1
? ? }
? ],
