文本编辑器之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'
]

参数具体意思

sourceHTML代码
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图片
flashFlash
media视音频
table表格
hr插入横线
emoticons插入表情
link超级链接
unlink取消超级链接
fullscreen全屏显示
about关于
print打印
code插入程序代码
mapGoogle地图
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" : "错误信息"
}

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

 

转载于:https://www.cnblogs.com/mcc61/p/11082957.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值