django笔记之富文本编辑器

夜行人

django笔记之富文本编辑器

2014-03-11 · via 夜行人

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

#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'
    }
}

['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':{"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']],
	},

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个月前。

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

#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()

此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。原文来自 — 版权归原作者所有。

推荐订阅源

夜行人