kindedtor的基本使用
首先需要进入官网下载kineditor相关文件:
然后写代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="kindeditor/themes/default/default.css" />
<script charset="UTF-8" src="kindeditor/kindeditor-all-min.js"></script>
<script charset="UTF-8" src="kindeditor/lang/zh_CN.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<title></title>
</head>
<body>
<form>
<textarea name="content" style="width:800px;height:200px;"></textarea> </form>
<button id="a">aaaaaaaaaa</button>
</body>
<script>
var editor;
KindEditor.ready(function(K) {
editor = K.create('textarea[name="content"]', {
allowFileManager : true
});
});
$(function(){
$("#a").click(function(){
alert(editor.html());
})
});
</script>
</html>
测试结果:
还有其他的方法可以参考源码页:
<html>
<head>
<meta charset="utf-8" />
<title>Default Examples</title>
<style>
form {
margin: ;
}
textarea {
display: block;
}
</style>
<link rel="stylesheet" href="../themes/default/default.css" />
<script charset="utf-8" src="../kindeditor-min.js"></script>
<script charset="utf-8" src="../lang/zh-CN.js"></script>
<script>
var editor;
KindEditor.ready(function(K) {
editor = K.create('textarea[name="content"]', {
allowFileManager : true
});
K('input[name=getHtml]').click(function(e) {
alert(editor.html());
});
K('input[name=isEmpty]').click(function(e) {
alert(editor.isEmpty());
});
K('input[name=getText]').click(function(e) {
alert(editor.text());
});
K('input[name=selectedHtml]').click(function(e) {
alert(editor.selectedHtml());
});
K('input[name=setHtml]').click(function(e) {
editor.html('<h3>Hello KindEditor</h3>');
});
K('input[name=setText]').click(function(e) {
editor.text('<h3>Hello KindEditor</h3>');
});
K('input[name=insertHtml]').click(function(e) {
editor.insertHtml('<strong>插入HTML</strong>');
});
K('input[name=appendHtml]').click(function(e) {
editor.appendHtml('<strong>添加HTML</strong>');
});
K('input[name=clear]').click(function(e) {
editor.html('');
});
});
</script>
</head>
<body>
<script type="text/javascript"><!--
google_ad_client = "ca-pub-7116729301372758";
/* 更多演示（728x90） */
google_ad_slot = "";
google_ad_width = ;
google_ad_height = ;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
<h3>默认模式</h3>
<form>
<textarea name="content" style="width:800px;height:400px;visibility:hidden;">KindEditor</textarea>
<p>
<input type="button" name="getHtml" value="取得HTML" />
<input type="button" name="isEmpty" value="判断是否为空" />
<input type="button" name="getText" value="取得文本(包含img,embed)" />
<input type="button" name="selectedHtml" value="取得选中HTML" />
<br />
<br />
<input type="button" name="setHtml" value="设置HTML" />
<input type="button" name="setText" value="设置文本" />
<input type="button" name="insertHtml" value="插入HTML" />
<input type="button" name="appendHtml" value="添加HTML" />
<input type="button" name="clear" value="清空内容" />
<input type="reset" name="reset" value="Reset" />
</p>
</form>
</body>
</html>
kindedtor的基本使用的更多相关文章
- kindedtor 数据传输问题
<script src="/static/kindeditor/kindeditor-all.js"></script><script src=&qu ...
- 在线编辑器的使用总结(kindeditor , )
1).kindedtor中让编辑框默认为“HTML代码/源代码”模式 [javascript] view plaincopyprint? <script> // 自定义插件 #1 Kind ...
- NopCommerce 3.80框架研究（三）替换tinymce 为KindEditor
NopCommerce 自带的编辑器tinymce 功能不是很全.所以尝试将其替换为功能更强大的 KindEditor 并替实现文件上传和在线浏览功能 首先下载 并解压到如下位置 请注意这里是部署在N ...
随机推荐
- 10-16C#for...循环语句（2）
for....循环语句 格式:for(初始条件:循环条件:状态改变) { 循环体: } 一.课前作业:打印等腰直角三角形 第一种方法:是运用一开始学习的从上往下执行控制台程序,用一个for循环语句执行 ...
- java，js判断全角半角
function chkHalf(str){ for(var i=0;i { strCode=str.charCodeAt(i); if((strCode>65248)||(strCode==1 ...
- [Python Study Notes]双层柱状图绘制
''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''' ...
- <!doctype html>这个是干什么的？？？
html5标准网页声明,原先的是一串很长的字符串,现在是这个简洁形式,支持html5标准的主流浏览器都认识这个声明.表示网页采用html5
- 如何使用google等一系列搜索引擎？
对于我们经常使用的搜索引擎大家都都不陌生,但是,如何高效的利用呢?大家都知道空格是搜索多个关键词,那么有没有其他的快捷键呢?答案是肯定的,以下内容转自知乎 1.双引号 把搜索词放在双引号中,代表完全匹 ...
- elasticsearch2.x优化小结（单节点）
最近es一直卡顿,甚至宕机,用bigdesk看了,才晓得,es一直用的默认配置(可以看出我有多懒,先前数据量小,es足以应付,现在数据量上去后就不行了). 这里总结三方面: 1.提升jvm内存 vi ...
- 爬取google的搜索结果并保存
demo: #coding:utf- import requests from bs4 import BeautifulSoup import bs4 import re def getHTMLTex ...
- nginx 代理参数介绍
2)我们可以看到nginx文件夹内有一个conf文件夹,其中有好几个文件,其他先不管,我们打开nginx.conf,可以看到一段: 这段代码在server里面,相当于一个代理服务器,当然可以配置多个. ...
- resize和reserve的区别
转自http://blog.csdn.net/jackywgw/article/details/6248342 首先必须弄清楚两个概念: 1.capacity 指容器在分配新的存储空间之前能存储的元素 ...
- php学习笔记-while循环
while(condition) { func(); //break the loop } while循环的执行顺序是先判断condition是不是true,如果是true,那么就执行while循环体 ...