个人而言我更喜欢markdown,django中配置使用markdown很简单。一两分钟的功夫而已。就不在这里说了。
对于普通用户,还是更喜欢富文本编辑器的。

###Ueditor 我们重点说说这个编辑器。之后会给出一些常见需求的定制化的方案,可能手法有些暴力。 国内的话,百度开源出来的Ueditor很赞,资料也挺全,反正我最近的项目都在用它。
别急着各种埋头配置啦,干活之前不妨先逛逛github,常常有惊喜哦~
搜索django ueditor,果然出来一个DjangoUeditor,貌似人家都帮我们集成好了!!
按照说明,分分钟配置好,python manage.py runserver …能用!!就这么简单!! 省下的时间陪你的妹子,看你书去吧。 github,你,值得拥有~

好的,下面我们来说几个定制化问题:(挺常见的需求)

  • 前两天在django技术群里帮一妹子(她非坚持说比我早毕业两年,应当喊姐姐。。)解决了些小问题,她之前使用TinyMCE,无法本地上传图片,我对TinyMCE不太熟,于是推荐DjangoUeditor给她,她觉得默认的功能按钮太少,想使用全功能的。

这个好办:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
#settings.py
UEDITOR_SETTINGS = {
    'toolbars':{"testa":[['fullscreen', 'source', '|', 'undo', 'redo', '|','bold', 'italic', 'underline']],
                "testb":[[ 'source', '|','bold', 'italic', 'underline']]
                },
    'images_upload':{
        'max_size':0,
        'path':"asd"
    },
    'scrawl_upload':{
        'path':'scrawlabc'
    }
}

容易看出我们应当在toolbars这里配置功能按钮,testa,testb是功能面板名称,可选的参数看这里ueditor.config.js,有这些:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
['fullscreen', 'source', '|', 'undo', 'redo', '|',
                'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|',
                'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',
                'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|',
                'directionalityltr', 'directionalityrtl', 'indent', '|',
                'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'touppercase', 'tolowercase', '|',
                'link', 'unlink', 'anchor', '|', 'imagenone', 'imageleft', 'imageright', 'imagecenter', '|',
                'insertimage', 'emotion', 'scrawl', 'insertvideo', 'music', 'attachment', 'map', 'gmap', 'insertframe','insertcode', 'webapp', 'pagebreak', 'template', 'background', '|',
                'horizontal', 'date', 'time', 'spechars', 'snapscreen', 'wordimage', '|',
                'inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', 'mergecells', 'mergeright', 'mergedown', 'splittocells', 'splittorows', 'splittocols', 'charts', '|',
                'print', 'preview', 'searchreplace', 'help', 'drafts']

我们把为toolbars添加一个mytoolbars,像这样

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
'toolbars':{"testa":[['fullscreen', 'source', '|', 'undo', 'redo', '|','bold', 'italic', 'underline']],
            "testb":[[ 'source', '|','bold', 'italic', 'underline']],
            "mytoolbars":[['fullscreen', 'source', '|', 'undo', 'redo', '|',
                'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|',
                'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',
                'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|',
                'directionalityltr', 'directionalityrtl', 'indent', '|',
                'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'touppercase', 'tolowercase', '|',
                'link', 'unlink', 'anchor', '|', 'imagenone', 'imageleft', 'imageright', 'imagecenter', '|',
                'insertimage', 'emotion', 'scrawl', 'insertvideo', 'music', 'attachment', 'map', 'gmap', 'insertframe','insertcode', 'webapp', 'pagebreak', 'template', 'background', '|',
                'horizontal', 'date', 'time', 'spechars', 'snapscreen', 'wordimage', '|',
                'inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', 'mergecells', 'mergeright', 'mergedown', 'splittocells', 'splittorows', 'splittocols', 'charts', '|',
                'print', 'preview', 'searchreplace', 'help', 'drafts']],
	},

在models.py里选用mytoolbars这个风格,像这样:

1
Content=UEditorField(u'内容	',height=100,width=500,default='test',imagePath="uploadimg/",imageManagerPath="imglib",toolbars='mytoolbars',options={"elementPathEnabled":True},filePath='upload',blank=True)

打开后台,可以看到全功按钮板块。

她说项目要求上传的本地图片必须把图片名字哈希加密,由于近来略忙,我只想当然地给她讲了下思路:在自己重载form,在表单里拦截一下数据,在那里修改图片名字。或者在图片保存前修改。
她按照这个思路并没有成功,于是我看了下DjangoUeditor源码,似乎上传图片那块不是很常规,于是直接修改源码(这个习惯不好。。),我们先找到文件名的生成函数,就是这个GenerateRndFilenamereturn "%s_%s%s%s",改之~搞定。这种方法略暴力,DjangoUeditor的源码不复杂,似乎页不需要升级,这样不会带来什么兼容问题。暂时取个捷径。 大家估计开始鄙视我了。。

此外,需要注意的是:xadmin中并不支持DjangoUeditor, 之前在django技术群中同xadmin的作者聊过 ,xadmin中并不支持DjangoUeditor,我们可以使用其他的富文本编辑器。这个东西已经帮我们做好配置的脏活了。好东西自然是在github里的,xadmin-cms,介绍中说:
Xcms 是 django-xadmin 的一套插件集, 包含制作 cms 系统需要的常用插件:

  • 可见即可得编辑器
  • 树形组件

至于怎么用,自己跑一遍demo_app,看看里面的参数,参考注释修修改改就好了。蛋疼的是我的后台一直不显示富文本编辑器,django群里的一哥们说他的没问题,难道是我打开方式不对 囧,一直怀疑是xadmin版本的问题。xadmin-cms最新一次提交是11个月前。

如果你非要在xadmin中使用Ueditor,参考下这篇文章在django xadmin中使用 Ueditor

===========分界线 14-3-20=============== 在新闻发布系统中有一个需求其实挺常见的:在news_list(新闻列表)页显示摘要,一般而言需要将新闻中的第一张图片也放到这里。 这里解决方案很多,粗暴的方法比如在前台里{{new.content}}(content用于保存新闻内容),之后用js来做,取出图片置顶,多余的文本隐藏(我们并不知道图片在文本中的什么位置,所以有必要把文本全部显示出)。 很不优雅对吧,我们也可以这样解决,前台仅显示{{new.content_first_img|safe }} ,{{new.content|slice:":200"|safe }},这样语意很清晰有木有。 “代码是写给人看的,只是顺带能在机器上运行” 那么content_first_img是怎么实现的。 直接上代码:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
#models.py
from BeautifulSoup import BeautifulSoup

    def save(self):
        #取出第一张图片的html,使用正则
        soup = BeautifulSoup(self.content_html) 
        self.content_first_img = str(soup.first("img")) #soup.first("img") #只返回第一个pic,需要转化为str,否则是对象
        if not self.content_pic : 
            self.content_pic = ''
        super(News, self).save() 

实质上我们就是重载了save()方法在,当然你需要为你的模型新建一个content_first_img字段,用于存储第一张图片 好了~。

###TinyMCE waiting ###ckeditor waiting