首先需要进入官网下载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的基本使用的更多相关文章

  1. kindedtor 数据传输问题

    <script src="/static/kindeditor/kindeditor-all.js"></script><script src=&qu ...

  2. 在线编辑器的使用总结(kindeditor , )

    1).kindedtor中让编辑框默认为“HTML代码/源代码”模式 [javascript] view plaincopyprint? <script> // 自定义插件 #1 Kind ...

  3. NopCommerce 3.80框架研究（三）替换tinymce 为KindEditor

    NopCommerce 自带的编辑器tinymce 功能不是很全.所以尝试将其替换为功能更强大的 KindEditor 并替实现文件上传和在线浏览功能 首先下载 并解压到如下位置 请注意这里是部署在N ...

随机推荐

  1. C# 正规表达式

    在C#中怎么用正则表达式限制文本框内不能输入数字?只能输入数字:"^[0-9]*$".只能输入n位的数字:"^\d{n}$".只能输入至少n位的数字:" ...

  2. eclipse和myeclipse的下载地址

    官方下载地址: Eclipse 标准版 x86 http://mirror.hust.edu.cn/eclipse//technology/epp/downloads/release/luna/R/e ...

  3. DAY10-MYSQL数据类型

    一 介绍 存储引擎决定了表的类型,而表内存放的数据也要有不同的类型,每种数据类型都有自己的宽度,但宽度是可选的 详细参考: http://www.runoob.com/mysql/mysql-data ...

  4. 通过Excel导入Mysql 超过65535条数据的办法

    1.截取 65534条数据,进行分sheet,然后1个sheet导入一张表,最后进行整合! 2.采用TXT导入方式,TXT的导入暂时没发现限制的数据条数,下午用TXT导入74万条数据成功 3.如果遇到 ...

  5. Android LRUCache

    package android.util; import java.util.LinkedHashMap; import java.util.Map; /** * A cache that holds ...

  6. saltstact的安装与配置

    Saltstack是一个服务器基础架构集中化管理平台,具备配置管理.远程执行.监控等功能,人们一般习惯把saltstack比作成简化版的puppet和加强版的func.saltstack基于Pytho ...

  7. day36-hibernate检索和优化

    连接查询是多表查询.

  8. 列表控件JList的使用

    --------------siwuxie095                             工程名:TestUI 包名:com.siwuxie095.ui 类名:TestList.jav ...

  9. C++结构体的定义、初始化和引用

    定义: 结构体(struct)是由一系列具有相同类型或不同类型的数据构成的数据集合,也叫结构. 声明一个结构体类型的形式是: struct Student{ //声明一个结构体类型Student in ...

  10. Windows cmd 将命令（/指令）写到一个文件里，直接运行这个文件。提高工作效率

    Windows cmd 批处理(cmd/bat)文件的简单使用介绍 前言 如果你想我一样,要每天都需要在cmd上,用键盘去敲击相同的命令,时间一长,你就觉得很无聊.有没有什么比较高效的方法,让我们不用 ...