网站如何集成百度UEditor编辑器
生活随笔
收集整理的這篇文章主要介紹了
网站如何集成百度UEditor编辑器
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
在平時的網站維護使用過程中,富文本編輯器是網站必不可少的元素之一。現在市面上各種編輯器功能設計參差不齊,自己做了幾個網站都是用蟬知建站系統做的,而蟬知默認內置的編輯器是KindEditor,功能簡單,已經滿足不了我的需求了,比如多圖上傳、視頻發布、代碼高亮等功能。
?
所以想換個編輯器,聽說百度的UEditro還不錯,所以就打算把UEditor集成到蟬知系統中。操作也不是很麻煩,下面分享下過程,考慮到大家通用性,設計蟬知系統的改動我就不過多講解了,這里主要分享在網站中集成UEditor的主要流程。
?
首先去百度UEditor官網(http://ueditor.baidu.com/website/)下載適用自己網站程序的最新UEditor。解壓將文件夾放到網站自定義目錄下,下面我以根目錄為例,具體目錄自行調整。
?
找到內容編輯、創建的頁面文件,引入下面代碼(注意調整路徑):
?
<script type="text/javascript" src="ueditor.config.js"></script> <script type="text/javascript" src="ueditor.all.js"></script>?
內容編輯處添加下面代碼:
?
<script id="container" name="content" type="text/plain"> 內容 </script> <script type="text/javascript"> var ue = UE.getEditor('container'); </script>?
itor()參數里大家可以根據自己情況進行配置。
?
如果要使用代碼高亮功能,可以在前臺內容展示頁面文件中引入下面代碼即可:
?
<script type="text/javascript" src="/ueditor/third-party/SyntaxHighlighter/shCore.js"></script> <link rel="stylesheet" type="text/css" href="/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css"> <script> SyntaxHighlighter.all(); </script>?
整體流程非常簡單,剩下的就是根據自己的具體需求,配置一些參數了,最后秀一下最終效果圖。
后臺文章內容編輯:
?
代碼高亮:
?
視頻發布:
多圖上傳:
轉載于:https://www.cnblogs.com/chanzhi/p/7053261.html
總結
以上是生活随笔為你收集整理的网站如何集成百度UEditor编辑器的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: Android 获取短信验证码,自动填充
- 下一篇: 阿里云服务器ECS按ctrl+alt+d