个人而言我更喜欢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源码，似乎上传图片那块不是很常规，于是直接修改源码（这个习惯不好。。），我们先找到文件名的生成函数，就是这个GenerateRndFilename，return "%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