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. Sql Server并发和事务

    锁的作用范围通常在事务中,事务是建立在并发模式下. 从SQL Server 2005开始,加入了一种新的并发模式-----乐观并发.不管使用哪种并发模式,如果多个会话同时修改相同的数据,都会产生资源争 ...

  2. json 解析代码 全语言

    Javascript: 1.使用eval var parse_json_by_eval = function(str){ return eval('('+str+')'); } var value = ...

  3. ELK 环境搭建1-Elasticsearch

    一.安装前准备 1.节点 192.168.30.41 192.168.30.42 192.168.30.43 2.操作系统: Centos7.5 3.安装包 a.java8: jdk-8u181-li ...

  4. selenium WebDriver 对浏览器标签页的切换

    关于selenium WebDriver 对浏览器标签页的切换,现在的市面上最新的浏览器,当点击一个链接打开一个新的页面都是在浏览器中打开一个标签页,而selenium只能对窗口进行切换的方法,只能操 ...

  5. 有了这些，java IO就不愁了

    IO的总结: java中相对路径和绝对路径的问题: 在web项目中,如果生成的文件前面没有 / 开头的话,表示的是生成的文件在当前项目的根目录下如student.txt在项目中刷新就能看到. 如果是以 ...

  6. Jupyter运行时出现下面的错误：Unexpected error while saving file: arma/Untitled.ipynb [Errno 13] Permission denied:

    运行环境:Ubuntu16.04+Python2.7执行如下代码修改Jupyter的一部分文件的权限(执行完之后重新启动即可): sudo chmod ~/.local/share/jupyter/ ...

  7. supervisor 监控redis & mongodb

    安装 安装python brew install python 安装pipwget https://bootstrap.pypa.io/get-pip.pysudo python get-pip.py ...

  8. 解决UnicodeEncodeError: ‘ascii’ codec can’t encode characters in position

    最近用Python写了些爬虫,在爬取一个gb2312的页面时,抛出异常: UnicodeEncodeError: 'ascii' codec can't encode characters in po ...

  9. TF：Tensorflow定义变量+常量,实现输出计数功能—Jason niu

    #TF:Tensorflow定义变量+常量,实现输出计数功能 import tensorflow as tf state = tf.Variable(0, name='Parameter_name_c ...

  10. Codeforces Gym 101291C【优先队列】

    <题目链接> 题目大意: 就是一道纯模拟题,具体模拟过程见代码. 解题分析:要掌握不同优先级的优先队列的设置.下面是对优先队列的使用操作详解: priority_queue<int& ...