1、如何声明引用？

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>kindeditor在线编辑器的使用心得</title>
<script type="text/javascript" charset="utf-8" src="js/kindeditor/kindeditor.js"></script>
<script type="text/javascript" charset="utf-8" src="js/kindeditor/lang/zh_CN.js"></script>
</head>
<script>
var editor;
KindEditor.ready(function(K){
editor = K.create('textarea[id="content"]',{
allowFileManager : true
});
});
</script>
<body>
<textarea id="content" style="width:100%;height: 500px;"></textarea>
</body>
</html>

2、设置简单编辑器模式

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>02设置简单编辑器模式</title>
<script type="text/javascript" charset="utf-8" src="js/kindeditor/kindeditor.js"></script>
<script type="text/javascript" charset="utf-8" src="js/kindeditor/lang/zh_CN.js"></script>
</head>
<script>
var editor;
KindEditor.ready(function(K){
editor = K.create('textarea[id="content"]',{
allowFileManager : true,
//设置编辑器为简单模式
items:[
'fontname','fontsize','i','forecolor','hilitecolor','bold','italic','underline',
'removeformat','i','justifyleft','justifycenter','justifyright','insertorderedlist',
'insertunorderedlist','i','emoticons','image','link'
]
});
});
</script>
<body>
<textarea id="content" style="width:100%;height: 500px;"></textarea>
</body>
</html>

3、如何获取kindeditor中的值？

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>03如何获取kindeditor中的值</title>
<script type="text/javascript" charset="utf-8" src="js/kindeditor/kindeditor.js"></script>
<script type="text/javascript" charset="utf-8" src="js/kindeditor/lang/zh_CN.js"></script>
</head>
<script>
var editor;
KindEditor.ready(function(K){
editor = K.create('textarea[id="content"]',{
allowFileManager : true,
//设置编辑器为简单模式
items:[
'fontname','fontsize','i','forecolor','hilitecolor','bold','italic','underline',
'removeformat','i','justifyleft','justifycenter','justifyright','insertorderedlist',
'insertunorderedlist','i','emoticons','image','link'
],
//这行代码就是关键所在，当失去焦点时执行this.sync()
afterBlur : function() {
this.sync();//这个函数就是同步kindeditor的值到textarea文本框
}
});
});
//获取kindeditor中的值
function showKindeditor(){
//获取textarea中的值并在div中展示
document.getElementById("showKindeditor").innerHTML = document.getElementById("content").value;
}
</script>
<body>
<div style="width:38%;height: 500px;border: 1px solid black;float: left;display: inline-block;">
<div id="showKindeditor" style="width:100%;height: 70%;"></div>
<button onclick="showKindeditor()">显示kindeditor中的值</button>
</div>
<textarea id="content" style="width:60%;height: 500px;"></textarea>
</body>
</html>

4、如何设置kindeditor的值？

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>04如何设置kindeditor的值</title>
<script type="text/javascript" charset="utf-8" src="js/kindeditor/kindeditor.js"></script>
<script type="text/javascript" charset="utf-8" src="js/kindeditor/lang/zh_CN.js"></script>
</head>
<script>
var editor;
KindEditor.ready(function(K){
editor = K.create('textarea[id="content"]',{
allowFileManager : true
});
});
//设置kindeditor中的值
function setKindeditor(){
//kindeditor支持html的解析
editor.html("<em><strong>jkdfh</strong></em>");
}
</script>
<body>
<textarea id="content" style="width:60%;height: 500px;"></textarea>
<button onclick="setKindeditor();">设置kindeditor的值</button>
</body>
</html>

5、如何监听编辑器内容发生改变的事件

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>05如何监听编辑器内容发生改变的事件</title>
<script type="text/javascript" charset="utf-8" src="js/kindeditor/kindeditor.js"></script>
<script type="text/javascript" charset="utf-8" src="js/kindeditor/lang/zh_CN.js"></script>
</head>
<script>
var index = 1;
var editor;
KindEditor.ready(function(K){
editor = K.create('textarea[id="content"]',{
allowFileManager : true,
afterChange : function(){
document.getElementById("showKindeditor").innerHTML += "编辑器内容发生改变"+(index++) + "<br/>";
}
});
});
</script>
<body>
<div id="showKindeditor" style="overflow:auto;width:38%;height: 500px;border: 1px solid black;float: left;display: inline-block;">
<h3>用于打印日志</h3>
</div>
<textarea id="content" style="width:60%;height: 500px;"></textarea>
</body>
</html>

6、设置kindeditor为不可编辑状态

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>06设置kindeditor为不可编辑状态</title>
<script type="text/javascript" charset="utf-8" src="js/kindeditor/kindeditor.js"></script>
<script type="text/javascript" charset="utf-8" src="js/kindeditor/lang/zh_CN.js"></script>
</head>
<script>
var editor;
KindEditor.ready(function(K){
editor = K.create('textarea[id="content"]',{
allowFileManager : true
});
//设置kindeditor为不可编辑状态
editor.readonly(true);
});
</script>
<body>
<textarea id="content" style="width:60%;height: 500px;"></textarea>
</body>
</html>

7、如何修改预览（preview）点击之后弹出框的大小？

找到preview.js文件，修改里面的宽度和高度即可。

8、kindeditor-4.1.10只读模式下可以全屏

kindeditor-4.1.10只读模式下不可以全屏，

对此KindEditor的作者Roddy给出的解决方案是，需要修改源码：

在kindeditor.js里搜索

self.toolbar.disableAll(isReadonly, []);

改为

self.toolbar.disableAll(isReadonly, ['fullscreen']);

然后就可以在只读模式下进行全屏展现了：

全屏之后又会变成可编辑模式，解决办法：

afterFocus : function(){//设置为不可编辑，只是内容

this.blur();

}

9、附上源码

下载地址：https://gitee.com/KingXin666/KindEditor

kindeditor在线编辑器的使用心得的更多相关文章

将kindeditor在线编辑器制作成smarty插件
在web开发中,在线编辑器是经常要用到的功能模块,虽说配置在线编辑器没有多大难度,但是每一次编写重复的代码,总是让人感觉不爽. 本篇,就来讲解一下,如何将kindeditor制作成smarty的一个自 ...
jsp解决kindeditor在线编辑器struts图片上传问题
1.下载官网下载ckeditor,解压后去掉不需要的部分,仅需保留plugin,lang,theme文件夹,这三个文件夹中用不到的东西可以删除, 比如lang文件下存放所有语言文件js,仅仅保留e ...
.Net在线编辑器：KindEditor及CkEditor+CkFinder配置说明
Net在线编辑器:KindEditor及CkEditor+CkFinder配置说明一.KindEditor(免费) KindEditor是一套开源的HTML可视化编辑器,主要用于让用户在网站上获得所 ...
在线编辑器Ckeditor （1） - php （30）
在线编辑器在线编辑器也称之为所见即所得编辑器,是一种常见的html源码编辑器. 所见即所得:用户在输入的时候,不论是格式和是样式都能被系统原封不动的保存,最后在查看的时候,可以按照用户输入的原来的结 ...
在线编辑器的使用-KindEditor
第一种:KindEditor编辑器步骤一:加载相应的核心的文件下载地址:http://kindeditor.net/demo.php <link rel="stylesheet&q ...
kindeditor在线文本编辑器过滤HTML的方法
在使用kindeditor文本编辑器时遇到的问题,客户直接从Excel里粘贴文本内容到文本编辑器中(能不能再懒一些),然后不调整粘贴内容直接就保存(你敢不敢再懒一些)!对于这种很无语的行径,我只能对他 ...
js组件在线编辑器插件、图表库插件、文件树插件
在线编辑器插件: 一.kindeditor 二.UEditor 图表库插件: 一.echart 二.highchart 文件树插件: 一.zTree -- jQuery 树插件 http://www. ...
ASP.NET配置KindEditor文本编辑器-图文实例
1.什么是KindEditor KindEditor 是一套开源的在线HTML编辑器,主要用于让用户在网站上获得所见即所得编辑效果,开发人员可以用 KindEditor 把传统的多行文本输入框(tex ...
基于thinkphp的在线编辑器kindeditor-v4.1.3
首先,去官网下载最新版的kindeditor,然后把里面asp,jsp,net,example的全删除,然后改名为editor放进public(最外层目录的public)文件夹里面. 在目录lib目录 ...

随机推荐

kbmMW SmartService控制返回类型
C# 创建写入读取 excel
public static void CreateExcelFile(string FileName, List<UUser> luu) { ] == "xlsx")/ ...
【Python】爬虫-1
#练习1:获取搜狐网页上所有的URL并且把与篮球有关的内容筛选出来 #算法: #.获取搜狐网站所有内容 #.判断哪些是链接,获取URL格式有效的链接 #.获取每个有效URL网页的内容 #.判断内容是否 ...
math、numpy、pandas NaN 判断
>> np.nan == np.nan False >> np.nan is np.nan True >> math.nan is np.nan False > ...
强化学习中的无模型基于值函数的 Q-Learning 和 Sarsa 学习
强化学习基础: 注: 在强化学习中奖励函数和状态转移函数都是未知的,之所以有已知模型的强化学习解法是指使用采样估计的方式估计出奖励函数和状态转移函数,然后将强化学习问题转换为可以使用动态规划求解的 ...
JavaBasic_09
方法的参数传递方法调用时参数值的传递可以分为"值传递"和"引用传递"两种值传递 - a.当方法的参数为基本数据类型时 b.实参的值被复制给形参,改变形参不会 ...
xdoj-1117(记忆化搜索+组合数学）
因为我是从上到下,所以就不叫动态规划而叫记忆化搜索吧 (不过运行时间只有3ms....应该是很不错的吧) 排版怎么那么难看...编辑的时候不是这样子的啊?! 思想 : 大眼一看应该是一道很裸的状压dp ...
经过强制类型转换以后，变量a, b的值分别为（）short a = 128; byte b = (byte) a;
1.Java中用补码形式表示 2.第一位正负位,1表示负,0表示正. 3.原码:一个数的二进制表示. 3的原码00000011 -3的原码 10000011 4 ...
jsp的服务器响应，out.println 与response.setIntHeader的报错解决方案，附：导入jar包的方法
在九大内置对象中,笔者认为用的最多的就是out.println 与response.setIntHeader,今天刚写了一个服务器响应的代码,也总是这两个报错.具体请看图. 先来说说response. ...
【NOI2014】【BZOJ3669】【UOJ#3】魔法森林
我学会lct辣原题: 为了得到书法大家的真传,小E同学下定决心去拜访住在魔法森林中的隐士.魔法森林可以被看成一个包含个N节点M条边的无向图,节点标号为 1…n1…n,边标号为1…m1…m.初始时小E ...

kindeditor在线编辑器的使用心得

1、 如何声明引用？