您的位置：首页 > 产品设计 > UI/UE

Django中嵌入ueditor并改进SyntaxHighlighter

2016-05-24 15:13 369 查看
打算用django框架做一个类似csdn的网站，不过没有使用markdown而是用的ueditor。

这里在django中嵌入ueditor以及显示代码高亮的时候遇到了一些困难，现在记录下来。

插入ueditor

这里django框架下使用DjangoUeditor，可以在官网上下载到，然后把下载好的DjangoUeditor里面的文件夹提取出来：



放到你项目的根目录下，比如我做的项目叫CsNote，如下图：



运行python manage.py collectstatic 如果是python3就是 python3 manage.py collectstatic

DjangoUeditor中有一个集成models.TextField的字段，叫做

UEditorField

在models中定义的时候如下：

content = UEditorField('内容', height=500, width=1200,
default=u'', blank=True, imagePath="uploads/images/",
toolbars='full', filePath='uploads/files/')


具体操作可以取DjangoUeditor的文档中看到。

更改后你可以在你的admin界面中看到变化。

接下来在html中插入ueditor编辑框

Django和PHP不同，不是按照你的安装文件路径查找所在文件的位置，需要你在settings.py中设置好你的STATIC_URL等信息

我的设置如下：

# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/1.8/howto/static-files/ STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static/')

# 公共的 static 文件，比如 jquery.js 可以放这里，这里面的文件夹不能包含 STATIC_ROOT
STATICFILES_DIRS = (
os.path.join(BASE_DIR, "common_static"),
)

# upload folder
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')


按照我的文件设置，需要在项目的根目录下建立一个common_static文件夹，然后会生成一个static文件。每次添加新的静态文件到要运行collectstatic命令。

设置好以后，设置你的基本模板文件base.html：

部分代码如下：

<html>
{% load staticfiles %}
<head>
<meta charset="utf-8">
<title>{% block title %}欢迎使用{% endblock title %} - Note</title>
<script type="text/javascript">
window.UEDITOR_HOME_URL = "/static/ueditor/";
</script>
<script type="text/javascript" src="/static/ueditor/ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="/static/ueditor/ueditor.all.js"></script>


这里我把/static/路径写死了，如果不想的化可以用{{ STATIC_URL }}代替。这是我的目录树：



在网页使用页面中调用：

<script id="container" name="content" type="text/plain">
这里写你的初始化内容
</script>
<script type="text/javascript">
var ue = UE.getEditor('container');
</script>


运行结果：



添加SyntaxHighlighter:

首先下载 SyntaxHighlighter 3.0.83 版本，我上传了一个0积分下载的资源，有需要的可以拿取。

下载后把里面的styles和scripts文件夹取出来，塞到ueditor中的third-party中



同样，运行collectstatic命令。

然后在你的base.html模板当中添加如下代码：

<!-- 后加入的css和style样式 -->
<script type="text/javascript" src="/static/ueditor/third-party/SyntaxHighlighter/scripts/shBrushJScript.js"></script>
<script type="text/javascript" src="/static/ueditor/third-party/SyntaxHighlighter/scripts/shBrushPhp.js"></script>
<script type="text/javascript" src="/static/ueditor/third-party/SyntaxHighlighter/scripts/shBrushJava.js"></script>
<script type="text/javascript" src="/static/ueditor/third-party/SyntaxHighlighter/scripts/shBrushCSharp.js"></script>
<script type="text/javascript" src="/static/ueditor/third-party/SyntaxHighlighter/scripts/shBrushCpp.js"></script>
<script type="text/javascript" src="/static/ueditor/third-party/SyntaxHighlighter/scripts/shBrushAS3.js"></script>
<script type="text/javascript" src="/static/ueditor/third-party/SyntaxHighlighter/scripts/shBrushPython.js"></script>
<script type="text/javascript" src="/static/ueditor/third-party/SyntaxHighlighter/scripts/shBrushVb.js"></script>
<script type="text/javascript" src="/static/ueditor/third-party/SyntaxHighlighter/scripts/shBrushSql.js"></script>
<script type="text/javascript" src="/static/ueditor/third-party/SyntaxHighlighter/scripts/shBrushXml.js"></script>
<script type="text/javascript" src="/static/ueditor/third-party/SyntaxHighlighter/scripts/shBrushPlain.js"></script>

<!--所使用的SyntaxHighlighter样式-->
<link type="text/css" rel="stylesheet" href="/static/ueditor/third-party/SyntaxHighlighter/styles/shCoreEmacs.css"/> <!--这里挑选高亮方式-->
<!--初始化SyntaxHighlighter的必须代码，必须放在head中，引入文件之后-->
<script type="text/javascript">SyntaxHighlighter.all();</script>

<script src="//upcdn.b0.upaiyun.com/libs/jqueryui/jquery.ui-1.9.0.min.js"></script>
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>


在ueditor中插入代码，在模板中显示的时候要用模板语法

{{ content|safe }}
显示，这里content是你用ueditor编辑好的内容。

效果如下：



参考：

http://www.2ky.cn/h/17/SyntaxHighlighter_for_UEditor.htm

http://www.ziqiangxuetang.com/django/django-cms-develop2.html
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航