Django集成UEditor (封装成应用)

近来,想要给我的Django网站添加可以上传图片的富文本编辑器,折腾了一番。效果图如下:

20161101/20161101110345047.jpg

之前使用过百度的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可参考官网

评论列表

暂无评论,欢迎来抢沙发!

新的评论

清空