文本编辑器之kindeditor

摘要：最近在自己学习搭建网站的时候，突然要搭建网站的时候发现了一个好东西，那就是kindeditor这个文本编辑器，这个编辑器简单好用，而且很小，并且是开源的。

文本编辑器介绍

　　KindEditor 是一套开源的在线HTML编辑器，主要用于让用户在网站上获得所见即所得编辑效果，开发人员可以用 KindEditor 把传统的多行文本输入框(textarea)替换为可视化的富文本输入框。 KindEditor 使用 JavaScript 编写，可以无缝地与 Java、.NET、PHP、ASP 等程序集成，比较适合在 CMS、商城、论坛、博客、Wiki、电子邮件等互联网应用上使用。

kindeditor的主要特点

• 快速：体积小，加载速度快
• 开源：开放源代码，高水平，高品质
• 底层：内置自定义 DOM 类库，精确操作 DOM
• 扩展：基于插件的设计，所有功能都是插件，可根据需求增减功能
• 风格：修改编辑器风格非常容易，只需修改一个 CSS 文件
• 兼容：支持大部分主流浏览器，比如 IE、Firefox、Safari、Chrome、Opera

发展历程

• 2006年07月：KindEditor 2.0 发布
• 2009年01月：KindEditor 3.0 发布
• 2010年06月：KindEditor 3.5 发布
• 2011年08月：KindEditor 4.0 发布

文本编辑器的下载

点击下载就可以使用了，下载位置看你喽，我是直接下载到了桌面，后面使用方便。

文本编辑器的使用

　　将下载成功的编辑器直接放在项目的static文件夹中，然后在你需要的模板中使用就好，我这里是backend.html，然后再我们需要的textarea中设置就可以实现编辑，找到textarea的id(每一个标签的id都是唯一的)，然后给这个东西添加脚本。

textarea文本框

<textarea id="editor_id" name="content" style="width:700px;height:300px;">
&lt;strong&gt;HTML内容&lt;/strong&gt;
</textarea>

编辑器脚本

<script charset="utf-8" src="/editor/kindeditor.js"></script>
<script charset="utf-8" src="/editor/lang/zh-CN.js"></script>
<script>
        KindEditor.ready(function(K) {
                window.editor = K.create('#editor_id');
        });
</script>

Note

• 第一个参数可用其它CSS选择器，匹配多个textarea时只在第一个元素上加载编辑器。
• 通过K.create函数的第二个参数，可以对编辑器进行配置，具体参数请参考 编辑器初始化参数 。

你在使用第二个参数的时候，要用字典的形式

<script>
        KindEditor.ready(function(K) {
                window.editor = K.create('#id_content',{
                    width:'100%',
                    height:'450px',
                });

        });
</script>
    

 

在初始化参数里面有许多可以支持自定义，你可以根据你的需求进行更改

编辑器使用

width

编辑器的宽度，可以设置px或%，比textarea输入框样式表宽度优先度高。

• 数据类型: String
• 默认值: textarea输入框的宽度

示例:

K.create('#id', {
        width : '700px'
});

height

编辑器的高度，只能设置px，比textarea输入框样式表高度优先度高。

• 数据类型: String
• 默认值: textarea输入框的高度

items

配置编辑器的工具栏，其中”/”表示换行，”|”表示分隔符。

• 数据类型: Array
• 默认值:

[
        'source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', 'code', 'cut', 'copy', 'paste',
        'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright',
        'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',
        'superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '/',
        'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold',
        'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'image', 'multiimage',
        'flash', 'media', 'insertfile', 'table', 'hr', 'emoticons', 'baidumap', 'pagebreak',
        'anchor', 'link', 'unlink', '|', 'about'
]

参数具体意思

source	HTML代码
preview	预览
undo	后退
redo	前进
cut	剪切
copy	复制
paste	粘贴
plainpaste	粘贴为无格式文本
wordpaste	从Word粘贴
selectall	全选
justifyleft	左对齐
justifycenter	居中
justifyright	右对齐
justifyfull	两端对齐
insertorderedlist	编号
insertunorderedlist	项目符号
indent	增加缩进
outdent	减少缩进
subscript	下标
superscript	上标
formatblock	段落
fontname	字体
fontsize	文字大小
forecolor	文字颜色
hilitecolor	文字背景
bold	粗体
italic	斜体
underline	下划线
strikethrough	删除线
removeformat	删除格式
image	图片
flash	Flash
media	视音频
table	表格
hr	插入横线
emoticons	插入表情
link	超级链接
unlink	取消超级链接
fullscreen	全屏显示
about	关于
print	打印
code	插入程序代码
map	Google地图
baidumap	百度地图
lineheight	行距
clearhtml	清理HTML代码
pagebreak	插入分页符
quickformat	一键排版
insertfile	插入文件
template	插入模板
anchor	插入锚点

 

这个是默认带的，可以自己修改

resizeType

2或1或0，2时可以拖动改变宽度和高度，1时只能改变高度，0时不能拖动。

• 数据类型: Int
• 默认值: 2

extraFileUploadParams

上传图片、Flash、视音频、文件时，支持添加别的参数一并传到服务器。

• 数据类型: Array
• 默认值: {}

额外参数的携带，比如django的csrfmiddlewaretoken中间件

extraFileUploadParams : {
                        'csrfmiddlewaretoken':'{{ csrf_token }}'
                       }

更多 编辑器初始化参数内容，快来点击吧！

编辑器内部文本图片上传

uploadJson

指定上传文件的服务器端程序。

• 数据类型: String
• 默认值: basePath + ‘php/upload_json.php’

uploadJson:'/upload_img',  //路由哦

路由

url(r'upload_img',views.upload_img)

视图函数

def upload_img(request):
    if request.method == 'POST':
        print(request.FILES)
        file_obj = request.FILES.get('imgFile')
        # print(file_obj,type(file_obj))  # 文件  #<class 'django.core.files.uploadedfile.InMemoryUploadedFile'>
        # print('>>>>>>>>>>>>>',file_obj.name,type(file_obj.name))  #<class 'str'>
        path = os.path.join(settings.BASE_DIR, 'media', 'article_img')
        if not os.path.exists(path):
            os.mkdir(path)
        file_path = os.path.join(path, file_obj.name)
        with open(file_path,'wb') as f:
            for line in file_obj:
                f.write(line)
        return HttpResponse('ok')

然后发现你的图片是上传成功了，但是显示的是

怎么回事捏？

原来是因为你将所有的信息都做好之后，要求你必须返回一个他指定要的格式，example👇👇👇

//成功时
{
        "error" : 0,
        "url" : "http://www.example.com/path/to/file.ext"
}
//失败时
{
        "error" : 1,
        "message" : "错误信息"
}

现在我们上传的时候就可以正常上传了，快去试试吧，很有成就感哦！