[發明專利]一種基于ElementUI和UEditor富文本的組件開發方法

在審

• 申請號: 201711337010.4
• 申請日: 2017-12-14
• 公開（公告）號: CN108089847A
• 公開（公告）日: 2018-05-29
• 發明（設計）人: 夏耩
• 申請（專利權）人: 易知成都數據服務有限公司
• 主分類號: G06F8/20
• 分類號: G06F8/20;G06F8/38
• 代理公司: 成都新驅科為知識產權代理事務所(普通合伙) 51251
• 代理人: 成實;曾娟

本發明公開了一種基于Element UI和UEditor富文本的組件開發方法，其特征在于，包括以下步驟：(1)在工程public文件夾中引入UEditor富文本插件，并將UEditor富文本插件封裝成Element UI組件；(2)對UEditor富文本插件進行初始化；(3)驗證初始化是否成功；(4)在Element UI組件中修改圖片上傳功能；(5)在Element UI組件中設置圖片插入功能。本發明步驟簡單便于操作，能實現代碼復用，并且在基于Element UI的工程開發中實現富文本編輯功能，將UEditor的功能封裝，形成可復用的富文本編輯組件，即可優化圖片的上傳功能，因此適合推廣使用。

技術領域

本發明涉及一種富文本組件開發方法，尤其涉及一種基于Element UI和UEditor富文本的組件開發方法。

背景技術

Element UI是一套基于VUE 2.0的組件庫，其中主要包括了基本組件設計外，還沒涉及到富文本相關的組件。而現有的富文本插件是獨立于Element UI，開發過程中需要工程代碼中單獨處理。但是，現有的Element UI沒有富文本編輯組件，在基于Element UI的開發時，對于要開發文本編輯功能時，則需要在工程里單獨對富文本插件做處理?，F有的UEditor插件目前沒有封裝到Element UI組件庫，對于使用Element UI開發實現富文本編輯功能時造成了開發成本的浪費。由于UEditor插件的內置的上傳圖片接口，只依賴php、java、.net，忽略了對其他語言的支持，同時也不支持具備跨域上傳圖片的功能，忽略了應用的廣泛性。并且，UEditor插件的配置文件不能同時配置多個圖片服務器，不能滿足需要配置的多個服務器開發功能時的需求。

發明內容

本發明的目的在于提供一種基于Element UI和UEditor富文本的組件開發方法，以期能實現代碼復用，并且在基于Element UI的工程開發中實現富文本編輯功能，將UEditor的功能封裝，形成可復用的富文本編輯組件，同時優化圖片的上傳功能。

本發明通過下述技術方案實現：

一種基于Element UI和UEditor富文本的組件開發方法，包括以下步驟：

(1)在工程public文件夾中引入UEditor富文本插件，并將UEditor富文本插件封裝成Element UI組件；

(2)對UEditor富文本插件進行初始化；

(3)驗證初始化是否成功；

(4)在Element UI組件中修改圖片上傳功能；

(5)在Element UI組件中設置圖片插入功能。

進一步的，步驟(3)包括以下步驟：

(3a)打開chrome瀏覽器的調試模式，在顯示頁面調用已初始化的組件；

(3b)查看控制臺是否報錯：是，則進入步驟(3c)；否，則進入步驟(3d)；

(3c)檢查錯誤位置，并在錯位位置對應的設置位置進行修正，然后返回步驟(3b)；

(3d)驗證初始化成功，結束驗證步驟。

再進一步的，步驟(2)對UEditor富文本插件進行初始化的過程為：新建vue格式文件并定義VUE對象，對頁面展示出的富文本插件的樣式做調整，統一富文本組件與ElementUI的樣式風格。