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

 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']
 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']],
	},

她说项目要求上传的本地图片必须把图片名字哈希加密,由于近来略忙,我只想当然地给她讲了下思路:在自己重载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个月前。

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