碼上快樂

相關內容    簡體    繁體

Django1.9開發博客（11）- 富文本與代碼高亮

本文轉載自   查看原文   2016-08-13 14:23   1840    Django

TinyMCE是一個輕量級的基於瀏覽器的所見即所得編輯器，支持目前流行的各種瀏覽器，由JavaScript寫成。 功能配置靈活簡單（兩行代碼就可以將編輯器嵌入網頁中），支持AJAX。另一特點是加載速度非常快。

django里引用TinyMCE富文本編輯器，其實很簡單，前提是你知道django的靜態文件配置。 其實這個我已經在前面文章提到過，可以回去再看看。

TinyMCE的官方網站是：http://www.tinymce.com/

下載地址：http://download.moxiecode.com/tinymce/tinymce_4.1.9.zip

TinyMCE的最新版本是4.1.9，下面是官網截屏：

下載下來后，我們把它解壓到工程的static/目錄下面，如下圖所示：

安裝原理

安裝的原理很簡單，只需要在使用編輯器的頁面里引用tinymce.min.js文件並初始化就可以了。 tinymce.min.js文件在tinymce項目里， tinymce.min.js會根據初始配置里的信息找到需要用編輯器的html節點。

例如在post_edit.html頁面使用編輯器，只需要在模板文件寫下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
{% load staticfiles %}
{% block header %}
 <link rel="stylesheet" href="{% static 'tinymce/plugins/upload/plugin.css' %}">
 <script type="text/javascript" src="{% static 'tinymce/tinymce.min.js' %}"></script>
 <script type="text/javascript">
 tinymce.init({
 selector: "textarea",
 //width: 800,
 height: 300,
 forced_root_block: false,
 plugins: [
 "advlist autolink lists link image charmap print preview anchor sh4tinymce upload",
 "searchreplace visualblocks code fullscreen",
 "insertdatetime table contextmenu paste"
 ],
 toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter" +
 " alignright alignjustify | bullist numlist outdent indent | preview link image sh4tinymce"
 });
 </script>
{% endblock %}

 

這段代碼的含義是 初始化 tinyMCE編輯器，selector指需要將編輯器顯示在html那個標簽節點， 這里選了textareas。則表示會變成編輯器所在的位置。

另外，我還自定義一下編輯器的高度、插件、菜單項目等。具體詳細配置請參考官方文檔，寫的都比較清楚。

給TinyMCE增加一個addmore插件

需求很簡單，就是每次我寫文章的時候需要插入某個<!--more-->標簽， 這樣可以在列表頁面先只顯示文章的一部分，然后碰到這個more標簽就顯示一個”點擊閱讀更多”的鏈接。

第一步，在tinymce/plugins文件下新增一個addmore文件夾，然后在里面新建一個plugin.min.js文件， 內容如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
tinymce.PluginManager.add("addmore", function (a) {
 a.addCommand("InsertMoreRule", function () {
 a.execCommand("mceInsertContent", !1, "[!--more--]")
 }), a.addButton("addmore", {
 icon: "addmore",
 tooltip: "Insert More",
 cmd: "InsertMoreRule"
 }), a.addMenuItem("addmore", {
 icon: "addmore",
 text: "Insert More",
 cmd: "InsertMoreRule",
 context: "insert"
 })
});

在post_edit.html中修改tinymce.init方法，plugins項目后面添加一個addmore：

...
plugins: [
    "advlist autolink lists link image charmap print preview anchor sh4tinymce upload",
    "searchreplace visualblocks code fullscreen",
    "insertdatetime table contextmenu paste addmore"
],
...

再看看效果，沒問題了。

SyntaxHighlighter代碼高亮

程序員寫博客當然少不了代碼高亮，這個功能頁很容易實現。有一款插件叫SyntaxHighlighter值的推薦。

項目主頁：http://alexgorbatchev.com/SyntaxHighlighter/

下載地址：http://alexgorbatchev.com/SyntaxHighlighter/download/download.php?sh_current

下載下來后直接解壓到static/目錄下面，這個跟tinymce是一樣的原理。

使用方法

只需要修改django頁面的基礎模板就行了，非常簡單。

打開mysite/templates/mysite/base.html頁面，引入syntaxhighlighter：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
 
{% load staticfiles %}
{% load i18n %}
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
 <!-- Latest compiled and minified CSS -->
 <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
 <!-- Optional theme -->
 <link rel="stylesheet" href="{% static 'css/bootstrap-theme.min.css' %}">
 <!-- Blog CSS-->
 <link rel="stylesheet" href="{% static 'css/blog.css' %}">
 <link type="text/css" rel="stylesheet" href="{% static 'syntaxhighlighter/styles/shCoreDefault.css' %}"/>
 <script type="text/javascript" src="{% static 'syntaxhighlighter/scripts/shCore.js' %}"></script>
 <script type="text/javascript">SyntaxHighlighter.all();</script>
 <!-- Latest compiled and minified JavaScript -->
 <script src="{% static 'js/jquery-1.11.1.min.js' %}"></script>
 <script src="{% static 'js/base.js' %}"></script>
 <script src="{% static 'js/bootstrap.min.js' %}"></script>
 {% block header %}
 {% endblock %}
 <title>{% trans 'Simple Blog'%}</title>
</head>
<body class="customize-support">
中間省略...
<script class="javascript" src="{% static 'syntaxhighlighter/scripts/shBrushJScript.js' %}"></script>
<script class="javascript" src="{% static 'syntaxhighlighter/scripts/shBrushBash.js' %}"></script>
<script class="javascript" src="{% static 'syntaxhighlighter/scripts/shBrushPhp.js' %}"></script>
<script class="javascript" src="{% static 'syntaxhighlighter/scripts/shBrushJava.js' %}"></script>
<script class="javascript" src="{% static 'syntaxhighlighter/scripts/shBrushSql.js' %}"></script>
<script class="javascript" src="{% static 'syntaxhighlighter/scripts/shBrushXml.js' %}"></script>
<script class="javascript" src="{% static 'syntaxhighlighter/scripts/shBrushPython.js' %}"></script>
<script class="javascript" src="{% static 'syntaxhighlighter/scripts/shBrushCss.js' %}"></script>
<script class="javascript" src="{% static 'syntaxhighlighter/scripts/shBrushCpp.js' %}"></script>
</body>
</html>

 

由於我們之前已經安裝過了TinyMCE，這個跟它結合起來就非常好用了，因為TinyMCE自帶有選擇代碼語言功能。

下面是我創建文章時，插入了一段python代碼的示例：

這個是保存后的效果：

最后一件事

別忘了部署到Heroku上面和別人分享你的成果。

OK，到此為止，前台的各種功能已經差不多了，你能一直堅持學到這里很不錯了，為你自己鼓掌吧。

后面還有一個重頭戲，就是django的后台管理，我選擇了更美觀更好用的xamdin，敬請期待…


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 Django1.9開發博客（13）- redis緩存 Django1.9開發博客（12）- i18n國際化 django1.9的static文件配置 UEditor富文本WEB編輯器設置代碼高亮 django 簡易博客開發 5 markdown支持、代碼高亮、gravatar頭像服務 django之富文本編輯器 一個博客園代碼高亮的方案 在線HTML編譯，文本關鍵字高亮顯示，富文本編輯實現大概思路 博客園代碼高亮插件(類似csdn的代碼插入) django之前端富文本編輯器（Meditor）
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM