关于本站
1、基于Django+Bootstrap开发
2、主要发表本人的技术原创博客
3、本站于 2015-12-01 开始建站
近来，想要给我的Django网站添加可以上传图片的富文本编辑器，折腾了一番。效果图如下：
之前使用过百度的UEditor富文本编辑器，功能齐全，有上传图片功能。但官网没有提供Django版本的UEditor。
找到一个DjangoUeditor项目：https://github.com/zhangfisher/DjangoUeditor
测试发现，很难配置成功。不管我怎么配置都无法上传图片，而且代码相当混乱。
再重新查找一遍，发现huzhicheng两年前写的项目：https://github.com/huzhicheng/uEditor_django
该项目的代码简单清晰，而且是一个Demo可以直接测试。经测试可以上传图片。 但由于是两年前(2014年)的项目，使用的django版本比较低。而且Ueditor代码和Django项目的代码混在一起，不方便迁移。另发现上传图片的文件名和保存的位置不支持UEditor自身的PathFormat参数。
于是，我对其进行修改，并封装成1个Django的应用。支持PathFormat参数功能已经Pull给原作者，但封装成Django应用改成较多。经huzhicheng同意，用他代码封装成Django应用，并新建Github项目。
Github地址：https://github.com/HaddyYang/django-ueditor
该项目的目录结构如下：
1、Demo是django演示项目，可以直接运行测试
2、ueditor是本项目封装的django应用
目前支持的功能：
1、基本文字、排版等功能
2、图片上传、文件上传、视频上传功能
3、在线文件、在线图片功能
4、可使用UEditor配置参数
未实现功能：
1、涂鸦功能
2、网络图片功能
欢迎参与一起开发，这两个功能我暂时用不上，就没有处理。
Demo使用方法：
下载这里的完整代码，进入Demo目录。运行python manage.py runserver
打开浏览器，访问http://localhost:8000/可查看效果演示。
安装使用方法：
1、复制ueditor目录到你的django项目中
2、打开settings.py，给INSTALLED_APPS加入应用ueditor
INSTALLED_APPS = [ #.... 'ueditor', #加入这个 ]
3、检查一下settings.py是否设置好static静态目录，可参考如下设置
STATIC_URL = '/static/' #静态目录 STATICFILES_DIRS = ( os.path.join(BASE_DIR, "static"), )
4、打开django项目的urls.py文件，添加ueditor的url路由配置
url(r'^ueditor/', include('ueditor.urls')),5、上面步骤配置完成之后，基本可以使用了。ueditor配置可能需要根据你的项目具体情况修改。
ueditor前端配置文件，在ueditor/UE/ueditor.config.js
ueditor后端配置文件，在ueditor/ueconfig.json
具体配置可参考ueditor官网。
至此，配置工作完成，剩下的就是到页面上引用uEditor了，下面是一个简单的html页面，可根据uEditor放置位置调整脚本
和样式的引用路径。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset='utf-8'>
<link rel="stylesheet" type="text/css" href="/ueditor/UE/third-party/SyntaxHighlighter/shCoreDefault.css">
<script type="text/javascript" src="/ueditor/UE/third-party/SyntaxHighlighter/shCore.js"></script>
<script type="text/javascript" src="/ueditor/UE/ueditor.config.js"></script>
<script type="text/javascript" src="/ueditor/UE/ueditor.all.min.js"></script>
<script type="text/javascript" src="/ueditor/UE/lang/zh-cn/zh-cn.js"></script>
<script type="text/javascript">
var ue = UE.getEditor('editor');
SyntaxHighlighter.all();
</script>
</head>
<body>
<script id="editor" type="text/plain" style="width:100%;height:500px;"></script>
</body>
</html>其中，var ue = UE.getEditor('editor');是ueditor实例化；
SyntaxHighlighter.all();是代码高亮。
另外，UEditor相关API可参考官网。
评论列表
智慧如你，不想发表一下意见吗？