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 ...
随机推荐
- vue axios 应用
vue安装axios cnpm install axios 安装成功后/项目/node_modules/目录下有axios文件夹 在package.json文件中devDependencies字段中添 ...
- 10-28SQLserver基础--数据库管理器（基础操作）
C#基础--数据库(用来存储大量的数据) 操作数据库文件唯一途径 SQL server,结构化查询语言简称SQL. Analysis services:分析挖掘数据 Reporting service ...
- C#调用带返回值的存储过程
()在SQL Server中建立如下的存储过程: set ANSI_NULLS ON set QUOTED_IDENTIFIER ON GO CREATE PROCEDURE [dbo].[GetNa ...
- Android ListView 设置
android:minHeight="80dip"//设置每一条的高度 android:divider="@null" //设置默认的分割线不显示 androi ...
- PHP中几种加密形式
1.Md5加密和Crypt都是单向加密: 登陆时把登录密码转为md5值,然后和数据库中的进行比较. 其中crypt中的盐值支持多种: 以CRYPT_STD_DES是以/0-9A-Za-z/中的两个字符 ...
- 面试题:struts 拦截器和过滤器
拦截器和过滤器的区别 过滤器是servlet规范中的一部分,任何java web工程都可以使用. 拦截器是struts2框架自己的,只有使用了struts2框架的工程才能用. 过滤器在url-patt ...
- c++ 子类切勿重新定义父类 non-virtual函数
子类如果重新定义了父类的non-virtual函数则不会有多态效果. 为方便描述,这里的方法和继承方式都用public.至于原因嘛,你懂的! 1:子类直接继承父类方法 class BaseOption ...
- 【IMOOC学习笔记】多种多样的App主界面Tab实现方法(二)
Fragment实现Tab 首先把activity_main.xml 文件中的ViewPager标签改成Fragment标签 <FrameLayout android:id="@+id ...
- 小小c#算法题 - 12 - Joseph Circle（约瑟夫环）
约瑟夫环是一个数学的应用问题:已知n个人(以编号1,2,3...n分别表示)围坐在一张圆桌周围.从编号为k的人开始报数(从1开始报数),数到m的那个人出列:他的下一个人又从1开始报数,数到m的那个人又 ...
- Git知识点汇总
设置全局用户名 git config --global user.name "yourname" 设置全局邮箱 git config --global user.email &qu ...