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 ...
随机推荐
- CS231n 2016 通关 第三章-SVM与Softmax
1===本节课对应视频内容的第三讲,对应PPT是Lecture3 2===本节课的收获 ===熟悉SVM及其多分类问题 ===熟悉softmax分类问题 ===了解优化思想 由上节课即KNN的分析步骤 ...
- Java堆初始大小的建议值
摘自:<Java Performance>第三章 Initial Heap Space Size Configuration This section describes how to u ...
- 使用Eclipse中遇到的问题
1.解决eclipse中jsp没有代码提示问题 原因是项目没有关联TOMCAT库文件: 右键项目—> 属性->JAVA Build Path -> Add Library->S ...
- 视频直播技术-视频-编码-传输-秒开等<转>
转载地址:http://mp.weixin.qq.com/s?__biz=MzAwMDU1MTE1OQ==&mid=2653547042&idx=1&sn=26d8728548 ...
- CentOS6.5 安装ORACLE 安装界面乱码解决方案
在终端运行 export LANG=EN_US 然后再执行安装程序
- 2.2.3 Analyzing the output 分析对用户推荐书目的结果(2)
2.2.3 Analyzing the output 在之前的程序运行结果中我们得到的结果输出是: RecommendedItem [item:104, value:4.257081] 程序要 ...
- (转)Linux网络协议栈(三)——网络设备(1)
网络设备(network device)是内核对网络适配器(硬件)的抽象与封装,并为各个协议实例提供统一的接口,它是硬件与内核的接口,它有两个特征:(1) 作为基于硬件的网络适配器与基于软件的协 ...
- c语言学习笔记 scanf和printf格式的问题
int a =0; int b =0; scanf("%d %d",&,&b); 上面这种和下面这种哪种对? int a =0; int b =0; scanf(& ...
- scala中同步块
private def initializeIfNecessary() { if (!Logging.initialized) { Logging.initLock.synchronized { if ...
- 不设置JAVA_HOME运行eclipse
编辑eclipse目录下的eclipse.ini 在第一行加入下面那句话,实际路径按照系统中的jdk目录设置.这样设置后可以省了环境中的JAVA_HOME像myeclipse一样. -vm C:\ ...