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 ...
随机推荐
- 基本的数据类型 void关键字 都存在类类型
- Ajax入门（一）从0开始到一次成功的GET请求
什么是服务器 网页浏览过程分析 一个完整的HTTP请求过程,通常有下面7个步骤 建立TCP连接 Web浏览器向Web服务器发送请求命令 Web浏览器发送请求头信息 Web服务器- 应答 Web服务器- ...
- [poj2976]Dropping tests(01分数规划，转化为二分解决或Dinkelbach算法)
题意:有n场考试,给出每场答对的题数a和这场一共有几道题b,求去掉k场考试后,公式.的最大值 解题关键:01分数规划,double类型二分的写法(poj崩溃,未提交) 或者r-l<=1e-3(右 ...
- 请用fontAwesome代替网页icon小图标（转）
1. 引言 网页小图标到处可见,如果一个网页都是干巴巴的文字和图片,而没有小图标,会显得非常简陋.下面的小图标,你是不是会经常用到? 你可能说——“我们用的都是彩色的,不是黑白的”——别着急,下面会讲 ...
- css中字间距调整（转）
css中字间距调整 (2014-01-02 13:51:07) 标签: 汉字 英文 间距 letter-spacing word-spacing 杂谈 分类: 网页制作 汉字间字间距设置:letter ...
- HDU 4912 LCA + 贪心
题意及思路 说一下为什么按LCA深度从深到浅贪心是对的.我们可以直观感受一下,一条的路径会影响以这个lca为根的这颗树中的链,而深度越深,影响范围越小,所以先选影响范围小的路径. #include & ...
- WOJ 18 动态无向图
一开始我是不会写的,后来点开了题解: 无话可说……那就写吧……然而第一发跑成暴力分,后来加了一个优化:就是在询问里面提到过的边都不用再加了. 然后……然后就过了呀…… 其实还有面向数据的编程的骚操作… ...
- fibnacci数列的两种实现（递归实现和循环实现）
//一切尽在规律中,认真观察,你会明白更多... using System;using System.Collections.Generic;using System.Linq;using Syste ...
- css中设置div水平居中，margin:0px auto没用的情况
在CSS中加了margin:0px auto;却没有效果,不能实现居中的问题!margin:0px auto;意思就是:上下边界为0,左右根据宽度自适应!就是水平居中的意思.无效的原因是,当你没有设置 ...
- 转换流 Properties集合 序列化 工具
今日内容介绍1.转换流2.缓冲流3.Properties集合4.序列化流与反序列化流5.commons-IO============================================== ...