Django 博客的富文本

1：想在Django admin管理后台加上富文本，同时支持代码高亮，用于博客

最开始使用的富文本tinymice没有代码高亮，而且简单

后有再试了其他几种，最后选择了Ueditor

Ueditor使用：

##1、安装方法

* 方法一：将github整个源码包下载回家，在命令行运行：

python setup.py install

* 方法二：使用pip工具在命令行运行(推荐)：

pip install DjangoUeditor

##2、在Django中安装DjangoUeditor 在INSTALL_APPS里面增加DjangoUeditor app，如下： INSTALLED_APPS = ( #........ 'DjangoUeditor', ) ##3、配置urls url(r'^ueditor/',include('DjangoUeditor.urls' )),

##4、在models中的使用

from DjangoUeditor.models import UEditorField

class Blog(models.Model):

    Name=models.CharField(,max_length=100,blank=True)

    Content=UEditorField(u'内容 ',width=600, height=300, toolbars="full", imagePath="", filePath="", upload_settings={"imageMaxSize":1204000},settings={},command=None,event_handler=myEventHander(),blank=True)

所遇问题：

from widgets import UEditorWidget,AdminUEditorWidget 

ImportError: No module named ‘widgets’

解决：

查询百度，是版本问题，本地python是3.4 不支持

DjangoUeditor兼容python3的版本github： https://github.com/twz915/DjangoUeditor3

最后结果如下：

上传图片：

在Django的settings.py里加配置

UEDITOR_SETTINGS = {
    "toolbars": {           #定义多个工具栏显示的按钮，允行定义多个
        "name1": [['source', '|', 'bold', 'italic', 'underline']],
        "name2": []
    },
    "images_upload":{
        "allow_type":"jpg,png",    #定义允许的上传的图片类型
        "max_size":"2222kb"        #定义允许上传的图片大小，0代表不限制
    },
    "files_upload":{
         "allow_type":"zip,rar",   #定义允许的上传的文件类型
         "max_size":"2222kb"       #定义允许上传的文件大小，0代表不限制
     },
    "image_manager": {
         "location": ""         #图片管理器的位置,如果没有指定，默认跟图片路径上传一样
    }
}

注意：

class Blog(models.Model):
    title = models.CharField("标题", max_length=30)
    img = models.ImageField("图片", upload_to='img', default="")
    author = models.CharField("作者", max_length=30)
    publish_time = models.DateTimeField('发布日期', default=timezone.now)
    content = UEditorField(u'内容', width=900, height=600, toolbars="full", imagePath="uploadimg/", filePath="files",
                           upload_settings={"imageMaxSize": 1204000}, settings={}, command=None, blank=True)
    is_casual = models.BooleanField("随笔", default=False)
    tags = models.ManyToManyField(Tags, verbose_name="标签")

模型里面的UEditorField字段中的imagePath="uploadimg/" 一定腰带/

否则如下：

代码高亮：

下载syntaxhighlighter

在html内容如下：

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="utf-8">
    <meta name="keywords" content="123">
    <meta name="description" content="htmlcss实战">
    <meta name="autor" content="twilight">
    <title>小鱼 - 0000</title>
    <link rel="stylesheet" href="/static/css/owner.css">
    <link rel="stylesheet" type="text/css" href="/static/syntaxhighlighter/styles/shCore.css">
    <link rel="stylesheet" type="text/css" href="/static/syntaxhighlighter/styles/shThemeDefault.css">

    <script type="text/javascript" src="/static/js/jquery.js"></script>
    <script type="text/javascript" src="/static/js/jquery.min.js"></script>
    <script type="text/javascript" src="/static/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="/static/js/blog_content.js"></script>
</head>
<body>
    <header>
    <!--头部-->
        <div id="header">
            <div class="logo_title">
                <h3>水封</h3>
                <p>小鱼儿的</p>
            </div>
            <div class="navi">
                <ul>
                    <li><a href="/">首页</a></li>
                    <li><a href="/casual">随笔</a></li>
                    <li><a href="#">标签</a></li>
                    <li><a href="/admin/">管理</a></li>
                </ul>
            </div>
            <div class="clear"  style="color:black; border-bottom:dashed 1px #999;"></div>
        </div>
    </header>
<!--中部-->
    <div id="wrapper">
        <div style="font-size: 20px;margin-top: 20px;">
            {{ title }}
        </div>

        <div id="pertable">
            <div id="content">
                {% autoescape off %}
                    {{content}}
                {% endautoescape %}
            </div>
        </div>
    </div>
    <div class="clear"></div>
    <script type="text/javascript" src="/static/syntaxhighlighter/scripts/XRegExp.js"></script>
    <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shCore.js"></script>
    <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shBrushJava.js"></script>
    <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shBrushJScript.js"></script>
    <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shBrushSql.js"></script>
    <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shBrushPython.js"></script>
    <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shBrushScala.js"></script>
    <script type="text/javascript">
        SyntaxHighlighter.all()
    </script>
</body>

{% autoescape off %} {{content}} {% endautoescape %} 是django的templates模板渲染的， content为model中的富文本字段。

页面显示：