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>

因为咱们以前已经安装过了TinyMCE，这个跟它结合起来就很是好用了，由于TinyMCE自带有选择代码语言功能。

下面是我建立文章时，插入了一段python代码的示例：

这个是保存后的效果：

最后一件事

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

OK，到此为止，前台的各类功能已经差很少了，你能一直坚持学到这里很不错了，为你本身鼓掌吧。

后面还有一个重头戏，就是django的后台管理，我选择了更美观更好用的xamdin，敬请期待…