目前開源的富文本編輯器中，wangEditor還是不錯的，今天做了一下版本5的升級，和之前的版本還是有一些變化，今天總結一下工具條的初步定制。
wangEditor的默認界面如下圖所示，常用功能基本上都已經具備了，不過在現實使用過程中，設計者可能基于自身産品的考慮，需要進行定制和修改。
比如從我的角度看：默認大于配置，目前的按鈕顯得有點多，不是特别直觀，因此，我希望調整為以下的樣式。
這樣的話，我們需要删除部分按鈕、修改部分按鈕的位置，在vue環境下，其實現的方式如下：
wangEditor的定制機制Vue中引入wangEditor，大家可以自行到官網上進行代碼複制，在這裡就不贅述了，wangEditor主要通過一個配置對象toolbarConfig來實現工具條的定制。
以下為toolbarConfig的配置對象：
在toolbarConfig中，以工具條的默認值為框架進行增減這種方法比較簡單，但缺點是原有工具條的位置不能調整，具體方法是通過對應的增删對象insertKeys和excludeKeys來實現。
可以在toolbarConfig中加入insertKeys對象為工具條增加按鈕，參數包括位置key值
可以在toolbarConfig中加入excludeKeys對象排除現有工具條對應的按鈕，參數為key值
默認工具條的key值的查看，可以通過wangEditor 5 Demo頁的控制台查看，獲取方式是toolbar.getConfig().toolbarKeys，如下圖：
大家可以通過控制台列示的toolbarKeys進行排除，這裡單個項和組均可以通過該對象進行排除。
定制全新的toolbar可以通過在toolbarConfig中加入新的toolbarKeys替換掉默認的工具條配置和布局，但如果要保證原有的功能，則需要保持可以值不變。如需增加新減值，仍是通過insertKeys引入。
這裡需要注意構建分組的方法，key值應以‘group-’冠名，并指定title、iconSvg、menuKeys參數，在上面的例子中，即通過将原來的toolbar項移入分組而實現了工具條的簡化。這裡iconSvg需要引入正常的svg标簽，可通過外部拷貝<svg><path...></path></svg>格式的方式引入。
上述定制還比較簡單，是基于現有結構的簡單調整，後續再補充一些增加新項和上傳圖片等相關内容的設置，敬請關注。
,更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!
zpostcode 
Recruit 
weather 
mreligion 
Yellowpages 
sport 
constellation 
shopping 
name 
game 
directory 
literature 
Word 
tour 
furnish 
Lottery 
tftnews 
lyrics 
News 
digital 
car 
dir 
Edu 
Finance 
