1. 下载kindeditor
    可以选择去官网下载（http://kindeditor.net/down.php），不过要翻墙；或者直接CSDNhttp://download.csdn.net/download/dknightl/9813052

  2. 下载解压完放入自己的项目中
    在解压完后可以删除不需要的文件夹，我是删除了asp、asp.net、jsp、php，examples可以放到其他地方，用作代码参考。

  3. 初始化kindeditor富文本编辑器

  • 首先先导入下面css和js文件
        <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>
  • 然后初始化（textarea 为富文本编辑器主题，script代码初始化）


    <textarea id="mul_input" name="content" style="width:700px;height:200px;visibility:hidden;display: block;">KindEditor</textarea> 

    <script>

        //简单模式初始化

        var editor;

        KindEditor.ready(function(K) {

            editor = K.create('textarea[name="content"]', {

                resizeType : 1,

                allowPreviewEmoticons : false,

                allowImageUpload : false,

                items : [

                    'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline',

                    'removeformat', '|', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist',

                    'insertunorderedlist', '|', 'emoticons', 'image', 'link']

            });

        });

    </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>

        <h3>默认模式</h3>

        <form style="margin: 0;">

            <textarea name="content" style="width:800px;height:400px;visibility:hidden;display: block;">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>

 

kindeditor富文本编辑器初步使用教程的更多相关文章

  1. django的admin或者应用中使用KindEditor富文本编辑器

    由于django后台管理没有富文本编辑器,看着好丑,展示出来的页面不美观,无法做到所见即所得的编辑方式,所以我们需要引入第三方富文本编辑器. 之前找了好多文档已经博客才把这个功能做出来,有些博客虽然写 ...

  2. KindEditor富文本编辑器使用

    我的博客本来打算使用layui的富文本编辑器,但是出了一个问题,无法获取编辑器内容,我参考官方文档,获取内容也就那几个方法而已,但是引入进去后始终获取的值为空,百度和bing都试过了,但是始终还是获取 ...

  3. (转）淘淘商城系列——KindEditor富文本编辑器的使用

    http://blog.csdn.net/yerenyuan_pku/article/details/72809794 通过上文的学习,我们知道了怎样解决KindEditor富文本编辑器上传图片时的浏 ...

  4. （转）学习淘淘商城第二十二课（KindEditor富文本编辑器的使用）

    http://blog.csdn.net/u012453843/article/details/70184155 上节课我们一起学习了怎样解决KindEditor富文本编辑器上传图片的浏览器兼容性问题 ...

  5. coding++：快速构建 kindeditor 富文本编辑器（一）

    此案例 demo 为 SpringBoot 开发 1.官网下载相关资源包:http://kindeditor.net/down.php 2.编写页面(引入相关JS) <!DOCTYPE html ...

  6. springboot中使用kindeditor富文本编辑器实现博客功能

    kindeditor在之前已经用过,现在在springboot项目中使用.并且也在里面使用了图片上传以及回显等功能. 其实主要的功能是图片的处理:kindeditor对输入的内容会作为html标签处理 ...

  7. kindEditor 富文本编辑器 使用介绍

    第一版:存放位置:  ---->把该创建的文件包放到javaWeb 过程的 WEB_INF 下:如图所示. 第二步:< kindEditor 插件的引用> :JS引用 <scr ...

  8. 20180310 KindEditor 富文本编辑器

    问题: 如何判断富文本编辑器文本内容非空 错误的办法,采用js 对控件本身的txt ID 号抓取获取值,由于加载富文本编辑器时,界面的ID 已经经过了修改或者可以用转换来说,所以抓取是无效果的. 需要 ...

  9. ASP.NET网站使用Kindeditor富文本编辑器配置步骤

    1. 下载编辑器 下载 KindEditor 最新版本,下载页面: http://www.kindsoft.net/down.php 2. 部署编辑器 解压 kindeditor-x.x.x.zip ...

随机推荐

  1. [转] webpack之前端性能优化（史上最全，不断更新中。。。）

    最近在用webpack优化首屏加载性能,通过几种插件之后我们上线前后的速度快了一倍,在此就简单的分享下吧,先上个优化前后首屏渲染的对比图. 可以看到总下载时间从3800ms缩短到1600ms. 我们在 ...

  2. js 函数参数为什么是按值传递?

    首先说下,在js中有两大类数据类型: 基本类型和引用类型. 其次,基本类型有5种: Undefined,Null,Boolean,Number.String, 引用类型有一种: Object(Func ...

  3. [Bjoi2018]二进制

    题解: 首先发现性质 只有1个1的区间 或者 奇数个1且0的个数少于2这个区间是不合法的 然后这个东西暴力是比较好处理的 刚开始写的比较傻逼,分几种情况 先把0,1缩在一起 1.k1个0+1+k2个0 ...

  4. XXE (XML External Entity Injection) 外部实体注入漏洞案例分析

    ENTITY 实体 在一个甚至多个XML文档中频繁使用某一条数据,我们可以预先定义一个这条数据的“别名”,即一个ENTITY,然后在这些文档中需要该数据的地方调用它. XML定义了两种类型的ENTIT ...

  5. Java基础总结02：环境变量的配置

    (一)Windows系统下配置环境变量 ※在"系统变量"中设置3项属性JAVA_HOME.PATH.CLASSPATH(JDK1.5之后此项属性不必再配),若已存在则点击" ...

  6. MySQL高级02

    索引简介 索引(Index)是帮助MySQL高效获取数据的数据结构.可以得到索引的本质:索引是数据结构.你可以简单理解为“排好序的快速查找数据结构”. 在数据之外,数据库系统还维护着满足特定查找算法的 ...

  7. [ 严重 ] my系统核心数据库sql注入

    某网注入 注入点 : xxx.maoyan.com/xxxager.php username存在注入 POST: adminLogin=XX&username=-1&userpwd=X ...

  8. Effective前端2---加快页面打开速度

    1.避免head标签JS阻塞 所有放在head标签里的JS和CSS都会阻塞页面渲染.如果这些CSS和JS需要记在时间比较久,中间页面会存在一个空白期,严重影响到用户体验. 例如以下代码:在head标签 ...

  9. Windows下MySQL绿色版安装配置与使用

    Mysql-5.7.11-winx64操作步骤: 一.安装MySQL数据库 1.下载. 下载地址: http://downloads.mysql.com/archives/get/file/mysql ...

  10. photoshop实现倾斜图片的修正

    第一天学习Photoshop,了解到了Photoshop对图片的处理,下面是实现一个倾斜图片修正的两种方法: 举例图片: 第一种方法:1.利用吸管中的标尺工具量倾斜度数: 2.利用旋转图像,旋转对应的 ...