之前說過，我的網站編輯器一開始是tinymce，然後才用的ckeditor。可是最近我發現，ckeditor的小圖示不是很美觀，看久了有點low的樣子。我是不是應該換一個編輯器呢，一想到這裡，馬上打開谷歌搜尋有沒有更加美觀的富文本編輯器。翻了幾頁發現，才發現百度Ueditor編輯器就很不錯，其實之前我就了解過，但是并沒有學習去怎麼使用，這回好了，換個富文本編輯器順便把Ueditor給學會了
安裝及使用
1.Ueditor其實對python2和python3有一定的差別，在寫程式時想通過Django的form表單順便把評論框也改成Ueditor，但是沒有将其實作卻發現了錯誤提示為：
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/DjangoUeditor32.使用git下載下傳後，輸入如下指令将源碼安裝到Python路徑中
python3 setup.py install 3.将DjangooUeditor添加到Django的INSTALLED_APPS中
4.在blog下的models.py檔案導入
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},) 5.進入admin背景管理頁面，可以看到這時編輯器已經換了個裝
6.去掉百度編輯器 ueditor 元素路徑、字數統計等
在百度編輯器 ueditor 根目錄下： ueditor.config.js 檔案中
搜尋并将參數elementPathEnabled設定成false即可
常用功能開關如下：
- ,elementPathEnabled : false //是否啟用元素路徑，預設是true顯示
- ,wordCount:false //是否開啟字數統計
- ,autoHeightEnabled:false // 編輯器内容，是否自動長高,預設true
- ,fullscreen : false //是否開啟初始化時即全屏，預設關閉
7.圖示對比
ckeditor是這樣的
ueditor是這樣的
代碼高亮
1.為了這個代碼高亮可是浪費了我不少時間，一開始是發現在DjangoUeditor/staticueditor/thirdd-party/SyntaxHighlighter檔案夾中有shCoreDefault.css和shCore.js這兩個檔案的，網上也有很多文章說了可以在詳情頁添加下面三個标簽
運作完後，發現的确有些效果，可是伴随着還有另外三個問題
一個是代碼之間的行距和字型太小，不便于代碼的閱讀，通過對網頁元素進行分析，我找到了shCoreDefault.css檔案中的兩個屬性，通過檔案搜尋找出來将它們注釋就可以解決了
line-height: 1.1em!important;
font-size: 13px!important; 如果說上面的問題還能接收，第二個問題就完全不适應了，那就是行号與代碼不比對，經常在代碼的兩頭空出多行是沒有注明行号的，看着很不習慣
還有第三個問題，代碼過長的情況下，不能自動換行，就導緻代碼塊容易超出父容器寬度。網上的解決辦法都是在shCoreDefault.css檔案中通過ctrl+F查找：.syntaxhighlighter{，然後在括弧中加入樣式：word-break:break-all，這個有效果，已經測試過了，但是第二個問題實在能力有限，無法解決，被迫放棄使用DjangoUeditor中的css樣式
2.放棄DjangoUeditor的自帶樣式後，又找到了第二條路，那就是使用Hlightjs，我想要的是類似github上的那種白色背景的代碼高亮顯示，幸運的是Hlightjs插件提供了太多太多的代碼樣式。我參考的文章位址：
https://blog.csdn.net/msllws/article/details/810483903.在官網
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%;
} 最後，實在沒想到換個富文本編輯器會弄出這麼多問題，學習之路，最難也是最讓人愉悅的，也隻有學習才是生活
![vue搭建過程及出現問題[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)