最近想做一個富文本編輯器添加代碼並且產生高亮的效果。首先尋找富文本編輯器插件，有如UEditor、kindeditor、xhEdito等等插件。網上有挺多介紹的博客，在這就不詳細介紹這些了。這幾款編輯器我都試過了，UEditor適用SyntaxHighlighter高亮插件，而kindeditor與xhEdito適用prettyprint。當然，這些插件都是開源的可以自己修改。我在這幾款插件中換了又換，其中的代碼編輯都不理想。

UEditor：

kindeditor：

xhEdito：

嘗試修改源碼也達不到預期效果，然後找到了wangEditor。

正文開始，首先本次用到的插件是:

1. wangEditor.js
2. SyntaxHighlighter.js

wangEditor使用代碼編輯塊如下：

目前wangEditor插入代碼是沒有語言選擇，只是給代碼背景簡單的高亮，我們找到文件wangEditor.js修改代碼如圖：

首先是添加了下拉框，然後給<pre>添加樣式。這裏我去掉了<code>標簽，因為有SyntaxHighlighter的代碼樣式供我使用，SyntaxHighlighter.highlight()這句正是在插入代碼時對代碼進行樣式修改的代碼。最後效果：

因為時間原因沒有講太細，有問題建議歡迎在評論區交流。

富文本編輯器代碼編輯實時高亮