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

時間 2019-11-19

標籤 django1.9 django 開發博客文本代碼欄目 Python 简体版

原文原文鏈接

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

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

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

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

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

下載下來後，咱們把它解壓到工程的static/目錄下面，以下圖所示：python

安裝原理

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

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

{% 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。則表示會變成編輯器所在的位置。django

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

給TinyMCE增長一個addmore插件

需求很簡單，就是每次我寫文章的時候須要插入某個標籤，這樣能夠在列表頁面先只顯示文章的一部分，而後碰到這個more標籤就顯示一個」點擊閱讀更多」的連接。

第一步，在tinymce/plugins文件下新增一個addmore文件夾，而後在裏面新建一個plugin.min.js文件，內容以下：

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：

{% 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>