码迷,mamicode.com
首页 > 其他好文 > 详细

富文本编辑器相关

时间:2019-09-03 16:15:49      阅读:113      评论:0      收藏:0      [点我收藏+]

标签:turn   win   epo   erro   trap   添加   处理   相关   zh-cn   

平时我们在写一些可以发表文章的相关功能时,总会时不时会用到富文本编辑器,下面推荐几种开源的富文本编辑器:

1、UEditor 百度的。

优点:插件多,基本满足各种需求,类似贴吧中的回复界面。

缺点:不再维护,文档极少,使用并不普遍,图片只能上传到本地服务器,如果需要上传到其他服务器需要改动源码,较为难办,加载速度慢。

总结:小项目,可以用用,不推荐使用。

 

2、kindeditor

界面类似百度,效果很像

文档齐全但用例较少,使用还算方便。

缺点:总感觉样子不是很好看,没有现代那种风格,还是老式的传统图标。

http://kindeditor.net/demo.php

 

3、simditor

样式好看,插件不多,基本满足需求

文档英文,使用较为吃力,如果英文水平不好的话

github上面开源,维护较好

因为文档看起来吃力,所以本人没有考虑继续使用。

http://simditor.tower.im/

 

4、bootstrap-wysiwyg

利用bootstrap实现的,简洁大方好看。

优点:轻量,好看,使用方便。

缺点:需要一定的浏览器支持,毕竟需要bootstrap

http://www.bootcss.com/p/bootstrap-wysiwyg/

 

5、wangEditor

js和css实现

优点:轻量简洁,最重要的是开源且中文文档齐全。设计的UI漂亮。

插件基本能满足需求,本人推荐使用。

http://www.wangeditor.com/index.html

 

6、CKEditor

功能强大,使用较多,可以看他们官网的例子,马上就有感觉。

优点:编辑能力极强,基本和word差不多了。看起来界面极其优秀的一款。

缺点:网站访问速度一般,文档英文,需要花时间开发。

http://ckeditor.com/

 

7、tinymce

支持图片在线处理,插件多,功能强

编辑能力优秀,界面好看。

同样文档为英文,开发需要花时间。

https://www.tinymce.com/

 

使用之前需要考虑的点:

1需要插件,是否需要很多的插件,还是说简单的那些功能就行了。

2界面考虑,看你喜欢那个界面了。

3图片是否需要上传图片服务器。

4文档如果为英文是否会影响开发。

5支持浏览器类型和版本。

 

以kindeditor为例,上传图片的示例:

<script charset="utf-8" src="/static/kindeditor/kindeditor-all-min.js"></script>
<script charset="utf-8" src="/static/kindeditor/lang/zh-CN.js"></script>
<script src="/static/jquery-3.3.1.js"></script>
<script>
        KindEditor.ready(function(K) {
                window.editor = K.create(‘#article_content‘,{
                    width:‘800px‘,
                    height:‘500px‘,
                    resizeType:1,
                    uploadJson:‘/upload/‘,  // 指定上传文件的服务器端程序
                    extraFileUploadParams:{// 上传图片、Flash、视音频、文件时,支持添加别的参数一并传到服务器。
                        csrfmiddlewaretoken:$("[name=‘csrfmiddlewaretoken‘]").val()
                    },
                    filePostName:‘img_file‘   // 指定上传文件form名称

                });
        });
</script>

后端视图函数的实现

from blogsite import settings
import os,json
def upload(request):
    print(request.FILES)
    filename = request.FILES.get(img_file).name
    filepath = os.path.join(settings.MEDIA_ROOT,uploadfile,filename)
    with open(filepath,wb) as f:
        for chunk in request.FILES.get(img_file).chunks():
            f.write(chunk)
    res = {
        error:0,
        url:/media/uploadfile/{}/.format(filename)
    }

    return HttpResponse(json.dumps(res))

 

 

 

 

 

 

 

 

富文本编辑器相关

标签:turn   win   epo   erro   trap   添加   处理   相关   zh-cn   

原文地址:https://www.cnblogs.com/zhaopanpan/p/9113300.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!