以前說過,個人網站編輯器一開始是tinymce,而後才用的ckeditor。但是最近我發現,ckeditor的小圖標不是很美觀,看久了有點low的樣子。我是否是應該換一個編輯器呢,一想到這裏,立刻打開谷歌搜索有沒有更加美觀的富文本編輯器。翻了幾頁,才發現百度Ueditor編輯器就很不錯,其實以前我就瞭解過,可是並無學習去怎麼使用,這回好了,換個富文本編輯器順便把Ueditor給學會了javascript
安裝及使用css
1.Ueditor其實對python2和python3有必定的區別,在寫程序時想經過Django的form表單順便把評論框也改爲Ueditor,可是沒有將其實現卻發現了錯誤提示爲:html
from widgets import UEditorWidget,AdminUEditorWidget ImportError: No module named ‘widgets’
經查發現,DjangoUeditor是基於Python 2.7的,對Python3的支持有問題。致使widgets.py文件出錯,不能import,解決方法能夠修改widgets.py或者採用網上修改好的版本DjangoUeditor3,github就有不少Ueditor的代碼,有些不能直接使用,可能過久沒更新了吧,而後才找到了:https://github.com/twz915/DjangoUeditor3java
2.使用git下載後,輸入以下命令將源碼安裝到Python路徑中python
python3 setup.py install
3.將DjangooUeditor添加到Django的INSTALLED_APPS中,並在settings下添加git
MEDIA_ROOT = os.path.join(BASE_DIR, 'media') MEDIA_URL = '/media/'
4.在帶有wsgi.py文件的文件夾中的urls.py注意添加github
urlpatterns = [ url(r'^ueditor/',include('DjangoUeditor.urls' )), ] urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
5.在blog下的models.py文件導入web
from DjangoUeditor.models import UEditorField # 將以前ckeditor body = RichTextUploadingField() # 改成 body = UEditorField(u'內容',width=1100, height=300, toolbars="full", imagePath="images/", filePath="files/", upload_settings={"imageMaxSize":1204000},)
6.進入admin後臺管理頁面,能夠看到這時編輯器已經換了個裝bash
7.去掉百度編輯器 ueditor 元素路徑、字數統計等,在百度編輯器 ueditor 根目錄下: ueditor.config.js 文件中,搜索並將參數elementPathEnabled設置成false便可
經常使用功能開關以下:
①,elementPathEnabled : false //是否啓用元素路徑,默認是true顯示
②,wordCount:false //是否開啓字數統計
③,autoHeightEnabled:false // 編輯器內容,是否自動長高,默認true
④,fullscreen : false //是否開啓初始化時即全屏,默認關閉app
8.圖標對比
ckeditor是這樣的
ueditor是這樣的
代碼高亮
1.爲了這個代碼高亮但是浪費了我很多時間,一開始是發如今DjangoUeditor/staticueditor/thirdd-party/SyntaxHighlighter文件夾中有shCoreDefault.css和shCore.js這兩個文件的,網上也有不少文章說了能夠在詳情頁添加下面三個標籤
<script type="text/javascript" src="ueditor/third-party/SyntaxHighlighter/shCore.js"></script> <link rel="stylesheet" href="ueditor/third-party/SyntaxHighlighter/shCoreDefault.css"> <script type="text/javascript"> SyntaxHighlighter.all(); </script>
運行完後,發現的確有些效果,但是伴隨着還有另外三個問題
一個是代碼之間的行距和字體過小,不便於代碼的閱讀,經過對網頁元素進行分析,我找到了shCoreDefault.css文件中的兩個屬性,經過文件搜索找出來將它們註釋就能夠解決了
line-height: 1.1em!important; font-size: 13px!important;
若是說上面的問題還能接收,第二個問題就徹底不適應了,那就是行號與代碼不匹配,常常在代碼的兩頭空出多行是沒有註明行號的,看着很不習慣(後補:將ueditor/third-party/SyntaxHighlighter/shCoreDefault.css裏面的vertical-align:baseline!important;屏蔽掉就行了)
還有第三個問題,代碼過長的狀況下,不能自動換行,就致使代碼塊容易超出父容器寬度。網上的解決辦法都是在shCoreDefault.css文件中經過ctrl+F查找:.syntaxhighlighter{,而後在括弧中加入樣式:word-break:break-all,要想讓css自動換行,white-space必須爲normal,已經測試過了,可是第二個問題實在能力有限,沒法解決,被迫放棄使用DjangoUeditor中的css樣式(如今已經解決)
2.放棄DjangoUeditor的自帶樣式後,又找到了第二條路,那就是使用Hlightjs,我想要的是相似github上的那種白色背景的代碼高亮顯示,幸運的是Hlightjs插件提供了太多太多的代碼樣式。我參考的文章地址:https://blog.csdn.net/msllws/article/details/81048390
3.在官網https://highlightjs.org/download/下載好Hlightjs插件後,與以前使用SyntaxHighlighter相似,添加下面三個標籤
<!-- foundation.css文件就是我選擇的代碼樣式 --> <link rel="stylesheet" type="text/css" href="{% static 'blog/css/foundation.css' %}"> <script type="text/javascript" src="{% static 'blog/js/highlight.pack.js' %}"></script> <script>hljs.initHighlightingOnLoad();</script>
這個時候,還沒法正常顯示,由於代碼高亮遵循的格式是:<pre><code>代碼</code></pre>而百度編輯器默認的代碼塊顯示格式爲:<pre>代碼</pre>,因此還須要再寫上一個script,添加在body下面
<script type="text/javascript"> var allpre = document.getElementsByTagName("pre"); for(i = 0; i < allpre.length; i++) { var onepre = document.getElementsByTagName("pre")[i]; var mycode = document.getElementsByTagName("pre")[i].innerHTML; onepre.innerHTML = '<code id="mycode">'+mycode+'</code>'; } </script>
這個時候已經能看出代碼樣式發生改變了,可是沒有行號,因此還要給代碼加上行號,先建立一個code.css文件,裏面包含了code代碼塊行號的樣式效果
pre { position: relative; padding: 0; /*margin-bottom: 24px;*/ border-radius: 3px; border: 1px solid #C3CCD0; background: #FFF; overflow: hidden; font-size: 14px; } code { display: block; padding: 18px 24px; overflow-y: auto; font-weight: 300; font-family: Menlo, monospace; font-size: 14px; } code.has-numbering { margin-left: 30px; } .pre-numbering { position: absolute; top: 0; left: 0; width: 30px; padding: 8px 5px 5px 0; border-right: 1px solid #C3CCD0; border-radius: 3px 0 0 3px; background-color: #f5f5f5; text-align: right; font-family: Menlo, monospace; font-size: 14px; color: #8c8c8c; }
將上面的行號樣式經過javascript綁定到每一個li元素上
<script type="text/javascript"> $(function(){ $('pre code').each(function(){ var lines = $(this).text().split('\n').length - 1; var $numbering = $('<ul/>').addClass('pre-numbering'); $(this) .addClass('has-numbering') .parent() .append($numbering); for(i=1;i<=lines+100;i++){ $numbering.append($('<li/>').text(i)); } }); }); </script>
完成後,就已經實現Ueditor+Hightjs的代碼高亮了
4.代碼高亮對比
Ckeditor是這樣的
Ueditor是這樣的
其餘常見問題
1.此時可能還會出現編輯框內圖片沒法正常縮放,是由於頁面上引入了Bootstrap,而Bootstrap默認將box-sizing樣式統一設成border-box了,在ueditor.min.css中加入以下代碼,就算是填坑成功
.edui-container *{-webkit-box-sizing: content-box;-moz-box-sizing: content-box;box-sizing: content-box;} .edui-container *:before,.edui-container *:after {-webkit-box-sizing: content-box;-moz-box-sizing: content-box;box-sizing: content-box;}
2.在css中可能出現長串字母或者數字不會自動換行的問題,在對應css中加:
word-break: break-all;
3.由於在編輯文章的時候,上傳圖片的寬度是用px來表示的,這就有可能致使圖片寬度超出父容器寬度,因此須要從新對img元素進行寬度重定義
#post-body img{ max-width: 100%; }
4.在編輯超連接內容時能夠發現,在移動端或者寬度很窄的顯示屏上,a標籤元素也經常超出容器寬度以外,這是由於ueditor對長字母或者長數字不會自動換行致使的,因此須要設置自動換行
#post-body a{ word-break: break-all; }
5.用過ueditor的人都知道,還有一個常見問題就是在編輯器下使用的表格能夠被預覽,可是內容發佈以後,在網頁顯示中是看不見邊框的。網上不少人大都提議取修改ueditor.all.js或者ueditor.all.min.js,可是我按照那個方法行不通,不知道是哪裏還出了錯,因此我就直接用最粗暴的方式,在詳情頁中的樣式加上
#post-body table, #post-body tr, #post-body td{ border: 1px solid #000; max-width: 100%; }
最後,實在沒想到換個富文本編輯器會弄出這麼多問題,學習之路,最難也是最讓人愉悅的,也只有學習纔是生活