個人網站搭建 (第十天) Ueditor編輯器

    以前說過,個人網站編輯器一開始是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%;
}

    最後,實在沒想到換個富文本編輯器會弄出這麼多問題,學習之路,最難也是最讓人愉悅的,也只有學習纔是生活

相關文章
相關標籤/搜索