前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >KindEditor的简单使用

KindEditor的简单使用

作者头像
宋先生
发布2019-07-18 12:02:59
2.9K0
发布2019-07-18 12:02:59
举报

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

官网: http://kindeditor.net/about.php

其他常用的富文本编辑器:

UEditor http://ueditor.baidu.com/website/

CKEditor http://ckeditor.com/

有兴趣的小伙伴可以找时间探索一下哦!

第一步:导入KindEditor文件

从官网下载好文档之后,将相关文件导入到我们的项目中,如下图;并在需要富文本编辑框的页面中引入相应的文件。

代码语言:javascript
复制
<!-- 富文本编辑器 -->
<link rel="stylesheet" href="../plugins/kindeditor/themes/default/default.css"/>
<script charset="utf-8" src="../plugins/kindeditor/kindeditor-min.js"></script>
<script charset="utf-8" src="../plugins/kindeditor/lang/zh_CN.js"></script>

第二步:初始化KindEditor编辑器

在页面添加javaScript代码初始化KindEditor编辑器,并在页面富文本编辑处指定name属性完成初始化!

代码语言:javascript
复制
//初始化KindEditor编辑器
<script type="text/javascript">
    var editor;
    KindEditor.ready(function (K) {
        editor = K.create('textarea[name="content"]', {
            //否允许浏览服务器已上传文件,默认是false
            allowFileManager: true
        });
    });
</script>

// html 页面 :为普通的textarea指定name属性即可(和js中一致)!
<div class="col-md-10 data editer">
   <textarea name="content" style="width:800px;height:400px;visibility:hidden;"></textarea>
</div>

第三步:提取KindEditor编辑器中的内容

代码语言:javascript
复制
//提取编辑器内容
var content = =editor.html();

//清空编辑器内容
editor.html('');

KindEditor编辑器的其他操作

代码语言:javascript
复制
---------------------------------------------------------------------------------- 
allowFileManager 【是否允许浏览服务器已上传文件】 
默认值是:false 
------------------------------------------------------ 
allowImageUpload 【是否允许上传本地图片】 
默认值是:true 
---------------------------------------------- 
allowFlashUpload 【是否允许上传Flash】 
默认值是:true 
---------------------------------------------- 
allowMediaUpload 【是否允许上传多媒体文件】 
默认值是:true 
------------------------------------------------ 
pasteType 【设置粘贴类型】 
0:禁止粘贴, 1:纯文本粘贴, 2:HTML粘贴(默认) 
--------------------------------------------------- 
resizeType 【设置可否改变编辑器大小】 
0:不能改变 1:只能改变高度 2:宽度和高度都可以改变(默认) 
---------------------------------------------------------- 
themeType 【主题风格】 
可设置"default"、"simple",指定simple时需要引入simple.css 
------------------------------------------------------------- 
designMode 【可视化模式或代码模式】 
数据类型:Boolean 
默认值是:true(可视化) 
------------------------------------------ 
afterCreate:function(){} 【编辑器创建后】 
afterCreate:function(){ 
//alert('创建完成'); 
} 
------------------------------------------ 
fontSizeTable 【制定文字大小】 
数据类型:Array 
默认值:['9px', '10px', '12px', '14px', '16px', '18px', '24px', '32px'] 
----------------------------------------------------------------------- 
colorTable 【指定取色器里的颜色值】 
数据类型:Array 
[ 
['#E53333', '#E56600', '#FF9900', '#64451D', '#DFC5A4', '#FFE500'], 
['#009900', '#006600', '#99BB00', '#B8D100', '#60D978', '#00D5FF'], 
['#337FE5', '#003399', '#4C33E5', '#9933E5', '#CC33E5', '#EE33EE'], 
['#FFFFFF', '#CCCCCC', '#999999', '#666666', '#333333', '#000000'] 
] 
上面是默认值 
---------------------------------------------------------------------------------- 
【Ctrl+Enter提交】 
afterCreate:function(){ 
var self=this; 
KindEditor.ctrl(self.edit.doc, 13, function() { 
self.sync(); 
//执行其他事件 
}); 
} 
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 
var editor=KindEditor.create('#nr'); 
【编辑器获取焦点】 
editor.focus(); 
【取得编辑器HTML内容】 
var html=editor.html(); 
【取得编辑器纯文本内容】 
var text=editor.text(); 
【移除编辑器】 
editor.remove(); 
【设置编辑器HTML】 
editor.html('<strong>编辑器内容</strong>'); 
【设置编辑器纯文本内容,直接显示HTML代码】 
editor.text('<strong>编辑器内容</strong>'); 
【判断编辑器内容是否为空】 
if(editor.isEmpty()){ 
alert('请输入内容'); 
return false; 
} 
【将指定的HTML内容插入到编辑器区域里的光标处】 
editor.insertHtml('<strong>插入内容</strong>'); 
【将指定的HTML内容添加到编辑器区域的最后位置。】 
editor.appendHtml('<strong>追加内容</strong>'); 
【编辑器切换全屏模式】 
editor.fullscreen(); 
【设置编辑器的只读状态】 
editor.readonly(false); //true:只读,false:取消只读 
本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2019-06-11,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 顶哥说 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 第一步:导入KindEditor文件
  • 第二步:初始化KindEditor编辑器
  • 第三步:提取KindEditor编辑器中的内容
  • KindEditor编辑器的其他操作
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档