富文本編輯器代碼編輯實時高亮
阿新 • • 發佈:2018-08-17
去掉 一個 mage 簡單 bsp 等等 href bat 產生
最近想做一個富文本編輯器添加代碼並且產生高亮的效果。首先尋找富文本編輯器插件,有如UEditor、kindeditor、xhEdito等等插件。網上有挺多介紹的博客,在這就不詳細介紹這些了。這幾款編輯器我都試過了,UEditor適用SyntaxHighlighter高亮插件,而kindeditor與xhEdito適用prettyprint。當然,這些插件都是開源的可以自己修改。我在這幾款插件中換了又換,其中的代碼編輯都不理想。
UEditor:
kindeditor:
xhEdito:
嘗試修改源碼也達不到預期效果,然後找到了wangEditor。
正文開始,首先本次用到的插件是:
- wangEditor.js
- SyntaxHighlighter.js
wangEditor使用代碼編輯塊如下:
目前wangEditor插入代碼是沒有語言選擇,只是給代碼背景簡單的高亮,我們找到文件wangEditor.js修改代碼如圖:
首先是添加了下拉框,然後給<pre>添加樣式。這裏我去掉了<code>標簽,因為有SyntaxHighlighter的代碼樣式供我使用,SyntaxHighlighter.highlight()這句正是在插入代碼時對代碼進行樣式修改的代碼。最後效果:
因為時間原因沒有講太細,有問題建議歡迎在評論區交流。
富文本編輯器代碼編輯實時高亮