第一步：导入前端js文件

  1.  <!-- 富文本编辑器 -->
  2.     <link rel="stylesheet" href="../plugins/kindeditor/themes/default/default.css" />
  3.     <script charset="utf-8" src="../plugins/kindeditor/kindeditor-min.js"></script>
  4.     <script charset="utf-8" src="../plugins/kindeditor/lang/zh_CN.js"></script>

第二步：html页面中添加富文本编辑器输入框

  1.  <div>kindeditor富文本编辑器</div>
  2.  <div>
    <!--此处的name应与下方的editor=K.create('textarea[name="content"]')一致-->
     <textarea name="content" style="width:800px;height:400px;visibility:hidden;"></textarea>
     </div>

第三步：添加富文本编辑器绑定的js代码

  1. <!-- 正文区域 /-->
  2. <script type="text/javascript">
  3. //定义一个全局变量
  4.     var editor;
  5.     KindEditor.ready(function(K) {
  6.         editor = K.create('textarea[name="content"]', {
  7.             allowFileManager : true
  8.         });
    //此处是给编辑框赋予初始值
    //editor.html("123");
    }); </script>

完整代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <!-- 富文本编辑器 -->
  7.     <link rel="stylesheet" href="../plugins/kindeditor/themes/default/default.css"/>
  8.     <script charset="utf-8" src="../plugins/kindeditor/kindeditor-min.js"></script>
  9.     <script charset="utf-8" src="../plugins/kindeditor/lang/zh_CN.js"></script>
  10. </head>
  11. <body>
  12. <div>测试内容</div>
  13. <div>
  14.     <!--此处的name应与下方的editor=K.create('textarea[name="content"]')一致-->
  15.     <textarea name="content" style="width:800px;height:400px;visibility:hidden;"></textarea>
  16. </div>
  17. </body>
  18. <!-- 正文区域 /-->
  19. <script type="text/javascript">
  20.  
  21.     var editor;
  22.     KindEditor.ready(function (K) {
  23.         editor = K.create('textarea[name="content"]', {
  24.             allowFileManager: true
  25.         });
  26.     });
  27.  
  28. </script>
  29. </html>

富文本编辑器kindeditor的使用的更多相关文章

  1. 富文本编辑器kindeditor配置

    <!--富文本编辑器kindeditor配置↓ --> <link type="text/css" rel="stylesheet" href ...

  2. easyUI整合富文本编辑器KindEditor详细教程(附源码)

    原因 在今年4月份的时候写过一篇关于easyui整合UEditor的文章Spring+SpringMVC+MyBatis+easyUI整合优化篇(六)easyUI与富文本编辑器UEditor整合,从那 ...

  3. python 全栈开发，Day83(博客系统子评论,后台管理,富文本编辑器kindeditor,bs4模块)

    一.子评论 必须点击回复,才是子评论!否则是根评论点击回复之后,定位到输入框,同时加入@评论者的用户名 定位输入框 focus focus:获取对象焦点触发事件 先做样式.点击回复之后,定位到输入框, ...

  4. 富文本编辑器 KindEditor 的基本使用 文件上传 图片上传

    富文本编辑器 KindEditor 富文本编辑器,Rich Text Editor , 简称 RTE , 它提供类似于 Microsoft Word 的编辑功能. 常用的富文本编辑器: KindEdi ...

  5. Django配置富文本编辑器kindeditor

    一.简介 django是一个容易快速上手的web框架,用它来创建内容驱动型的网站(比如独立博客)十分方便.遗憾的是,django并没有提供官方的富文本编辑器,而后者恰好是内容型网站后台管理中不可或缺的 ...

  6. JAVAEE——宜立方商城04：图片服务器FastDFS、富文本编辑器KindEditor、商品添加功能完成

    1. 学习计划 1.图片上传 a) 图片服务器FastDFS b) 图片上传功能实现 2.富文本编辑器的使用KindEditor 3.商品添加功能完成 2. 图片服务器的安装 1.存储空间可扩展. 2 ...

  7. Django之富文本编辑器kindeditor 及上传

    1.什么是富文本编辑器 百度百科(https://baike.baidu.com/item/%E5%AF%8C%E6%96%87%E6%9C%AC%E7%BC%96%E8%BE%91%E5%99%A8 ...

  8. java富文本编辑器KindEditor

    在页面写一个编辑框: <textarea name="content" class="form-control" id="content&quo ...

  9. 在线富文本编辑器kindeditor配置（.Net Framework 3.5）

    下载地址:http://kindeditor.net/down.php 解压放在项目要目录下, 在Bin目录下添加引用:LitJSON.dll 在页面头部加: <link rel="s ...

随机推荐

  1. Mybatis中使用association及collection进行自关联示例（含XML版与注解版）

    XML版本: 实体类: @Data @ToString @NoArgsConstructor public class Dept { private Integer id; private Strin ...

  2. Java自学-数组 二维数组

    Java 如何使用二维数组 这是一个一维数组, 里面的每一个元素,都是一个基本类型int int a[] =new int[]{1,2,3,4,5}; 这是一个二维数组,里面的每一个元素,都是一个一维 ...

  3. 【转载】C#中Convert.ToSingle方法将字符串转换为Float类型

    在C#编程过程中,可以使用Convert.ToSingle方法将字符串或者其他可转换为数字的对象变量转换为float类型,Convert.ToSingle方法有多个重载方法,最常使用的一个方法将字符串 ...

  4. jq对象才能使用jq方法，$(".a").eq(0) 和 $(”.a“)[0]

    <a class="a"></a> <a class="a"></a> <a class="a& ...

  5. 使用ABAP绘制可伸缩矢量图

    Jerry去年的文章 动手使用ABAP Channel开发一些小工具,提升日常工作效率 里曾经介绍过一些用ABAP实现的可供娱乐的小程序,比如用古老的HPGL接口在SAPGUI里绘图: 关于如何用SA ...

  6. Hibernate配置文件模版

    hibernate.cfg.xml 配置文件模版: <?xml version='1.0' encoding='UTF-8'?> <!DOCTYPE hibernate-config ...

  7. webdriver切换frame的方法

    iframe: iframe 就是一个特殊的html 元素, 它在原来的html 范围内,开辟了一个新的HTML. iframe 元素会创建包含另外一个文档的内联框架(即行内框架) 理解:网页嵌套网页 ...

  8. MySQL AutoIncrement--自增锁模式

    自增锁模式 在MYSQL 5.1.22版本前,自增列使用AUTO_INC Locking方式来实现,即采用一种特殊的表锁机制来保证并发插入下自增操作依然是串行操作,为提高插入效率,该锁会在插入语句完成 ...

  9. Python_正则表达式语法

    1.正则表达式中的操作符: 2.re库的使用: import re #search方法要求只要待匹配的字符串中包含正则表达式中的字符串就可以 match = re.search('python+',' ...

  10. Linux用户组和权限管理

    Linux用户组和权限管理 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任.   一.Linux的安全模型 1>.安全3A 这并不是Linux特有的概念,在很多领域都有3A的概念 ...