KindEditor使用

1.关于KindEditor

(1).简介

KindEditor 是一套开源的在线HTML编辑器，主要用于让用户在网站上获得所见即所得编辑效果，开发人员可以用 KindEditor 把传统的多行文本输入框(textarea)替换为可视化的富文本输入框。 KindEditor 使用 JavaScript 编写，可以无缝地与 Java、.NET、PHP、ASP 等程序集成，比较适合在 CMS、商城、论坛、博客、Wiki、电子邮件等互联网应用上使用。

(2).其他

官网：http://kindeditor.net/about.php

下载：http://kindeditor.net/down.php

文档：http://kindeditor.net/doc.php

2.使用编辑器（kindeditor-4.1.11）

(1).解压 kindeditor-x.x.x.zip 文件，根据需求删除以下目录

asp - ASP程序
asp.net - ASP.NET程序
php - PHP程序
jsp - JSP程序
examples - 演示文件

(2).HTML页面上添加textarea标签

<textarea id="editor" name="content" style="width:700px;height:300px;"></textarea>

(3).引入CSS和相关JS

<link  href="js/kindeditor-4.1.11/themes/default/default.css" rel="stylesheet"/>
<script charset="utf-8" src="js/kindeditor-4.1.11/kindeditor-all-min.js"></script>
<script charset="utf-8" src="js/kindeditor-4.1.11/lang/zh-CN.js"></script>

(4).初始化编辑器

<script type="text/javascript">var editor;KindEditor.ready(function(K) {editor = K.create('#editor');});// 自定义工具栏（具体可以参照文档）//var options = {//items : ['code', '|', 'justifyleft', 'justifycenter', 'justifyright',  'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent',  //  'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen',  'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold',  //  'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat',  '|', //  'image', 'multiimage', 'insertfile', 'table', 'hr', 'emoticons', 'baidumap', 'pagebreak',   'anchor', 'link', 'unlink'  // ]//}//KindEditor.ready(function(K) {//editor = K.create('#editor', options); //});
</script >

3.常用方法

(1).获取HTML（包含标签）

html = $("#editor").val();// jquery方式
html = K("#editor").val();// KE API
html = editor.html();//
text = editor.text();// 获取纯文本，不包含标签

(2).设置值

editor.html('HTML内容');
editor.sync();// 同步数据后可以直接取得textarea的value，否则$("#id").val()为空

(3).其他

editor.isEmpty();// 判断是否为空
editor.selectedHtml();// 获取选中的HTML
editor.text('<h3>Hello KindEditor</h3>');// 设置文本，标签不起作用，区别html('<h3>Hello KindEditor</h3>')
editor.insertHtml('<strong>插入HTML</strong>');// 在光标后添加HTML
editor.appendHtml('<strong>添加HTML</strong>');// 在末尾添加HTML

效果如下图

KindEditor使用相关推荐

【kindeditor】KindEditor获取多个textarea文本框的值并判断非空
kindeditor官网:http://kindeditor.net/demo.php 如何获取多个KindEditor中textarea文本框的值,方式很多种(带有HTML标签). var intr ...
Kindeditor学习中的那些坑
Kindeditor富文本编辑器还算比较好上手的一款插件吧,下面记录一下我在学习和实践中遇到的那些坑. 编辑器初始化方法和参数网上一搜一大把,不想搜的点这里,文档上各个参数已经写得很清楚了,直接拿过来 ...
一个KindEditor的插件[myFocus]
声名:此作品用于学习交流简介:使用KindEditor(富文本编辑器)提供的接口将myFocus(焦点图库)集成在KindEditor上功能:在内容中显示焦点图使用下载此插件并将其解压后的 ...
kindeditor 批量上传路径_FtpClient 实现文件上传
FtpUtils 工具类封装 public static boolean uploadFile( String hostname, int port, String username, String ...
php网页添加图片的代码,天天查询-PHP版的kindeditor编辑器加图片上传水印功能
首先简单介绍一下kindeditor编辑器: KindEditor 是一套开源的在线HTML编辑器,开发人员可以用 KindEditor 把传统的多行文本输入框(textarea)替换为可视化的富文本 ...
kindeditor扩展粘贴截图功能修改图片上传路径并通过webapi上传图片到图片服务器...
2019独角兽企业重金招聘Python工程师标准>>> kindeditor是一个非常好用的富文本编辑器,它的简单使用我就不再介绍了. 而kindeditor却对图片的处理不够理想. ...
kindeditor用法
<?php require_once '../include.php'; checkLogined(); $rows=getAllCate(); //echo $rows; if(!$rows) ...
KindEditor得不到textarea值的解决方法----摘至天涯
以前有朋友遇到过这个问题,就是KindEditor在火狐下或者其他浏览器下都无法得到textarea文本框的值,点击表单提交按钮得到的是空白.昨天天涯PHP博客[http://blog.phpha.c ...
KindEditor自动过滤首行缩进和全角空格的解决方法
KindEditor 4.1.11: kindeditor-all.js 文件第772行: var re = /(\s*)<(\/)?([\w\-:]+)((?:\s+|(?:\s+[\w\- ...
在DWZ框架中整合kindeditor复文本框控件
今天上午在DWZ框架中整合kindeditor复文本框控件,发现上传图片是老是提示 "上传中,请稍候...",上网查看别人说可能是文件路径问题,在想以前在其他项目中用这个控件一直没 ...

KindEditor使用

1.关于KindEditor

2.使用编辑器（kindeditor-4.1.11）

3.常用方法

KindEditor使用相关推荐

最新文章

热门文章