第一步：导入前端js文件

 <!-- 富文本编辑器 -->

    <link rel="stylesheet" href="../plugins/kindeditor/themes/default/default.css" />

    <script charset="utf-8" src="../plugins/kindeditor/kindeditor-min.js"></script>

    <script charset="utf-8" src="../plugins/kindeditor/lang/zh_CN.js"></script>

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

 <div>kindeditor富文本编辑器</div>

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

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

<!-- 正文区域 /-->

<script type="text/javascript">

//定义一个全局变量

    var editor;

    KindEditor.ready(function(K) {

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

            allowFileManager : true

        });
//此处是给编辑框赋予初始值
//editor.html("123");
}); </script>

完整代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <!-- 富文本编辑器 -->

    <link rel="stylesheet" href="../plugins/kindeditor/themes/default/default.css"/>

    <script charset="utf-8" src="../plugins/kindeditor/kindeditor-min.js"></script>

    <script charset="utf-8" src="../plugins/kindeditor/lang/zh_CN.js"></script>

</head>

<body>

<div>测试内容</div>

<div>

    <!--此处的name应与下方的editor=K.create('textarea[name="content"]')一致-->

    <textarea name="content" style="width:800px;height:400px;visibility:hidden;"></textarea>

</div>

</body>

<!-- 正文区域 /-->

<script type="text/javascript">

    var editor;

    KindEditor.ready(function (K) {

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

            allowFileManager: true

        });

    });

</script>

</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. 2019 梦网科技java面试笔试题 （含面试题解析）

      本人5年开发经验.18年年底开始跑路找工作,在互联网寒冬下成功拿到阿里巴巴.今日头条.梦网科技等公司offer,岗位是Java后端开发,因为发展原因最终选择去了梦网科技,入职一年时间了,也成为了面 ...

  2. 2019 盛趣游戏java面试笔试题 （含面试题解析）

      本人5年开发经验.18年年底开始跑路找工作,在互联网寒冬下成功拿到阿里巴巴.今日头条.盛趣游戏等公司offer,岗位是Java后端开发,因为发展原因最终选择去了盛趣游戏,入职一年时间了,也成为了面 ...

  3. python学习之利用socketserver的文件传输

    使用socketserver进行多用户的文件传输 服务端 class FtpServer(socketserver.BaseRequestHandler): # 继承socketserver.Base ...

  4. iOS 12中获取WiFi的SSID

    开始搞智能家居,wifi获取不到了?? 小插曲 旧方法失效,19-12-15更新,ios13开始需要请求定位信息 SSID全称Service Set IDentifier, 即Wifi网络的公开名称. ...

  5. restframework中根据请求的类型修改序列化类

    只要在视图中重写get_serializer_class方法就可以,用if对请求的类型进行判断 def get_serializer_class(self): if self.action == &q ...

  6. centos7 docker安装Jenkins BlueOcean

    Jenkins是一款Java开发的跨平台持续集成和持续发布的开源项目,Jenkins已经作为各大公司进行CI/CD的首选工具.而BlueOcean是Jenkins推出的一个插件,其目的就是让程序员执行 ...

  7. Java集合框架总结2_Map

    1. Map接口概述 Map与Collection并列存在.用于保存具有映射关系的数据:key-value: Map中的key和value都可以是任何应用类型的数据: Map中的key用Set来存放, ...

  8. win7安装小米8驱动

    首先尝试了小米助手,安装后提示说要会弹窗然后选择确定,但是并没有弹窗:尝试管理员方式运行,依然没有弹框.差评. 正确的姿势是:http://bigota.d.miui.com/tools/xiaomi ...

  9. Kotlin属性委托系统总结与提供委托详解

    属性委托总结回顾: 在前三次已经将Kotlin委托相关的知识点进行了完整的学习了,具体博文如下: https://www.cnblogs.com/webor2006/p/11369019.html h ...

  10. 解决Android8.0系统应用打开webView报错

    由于webView存在安全漏洞,谷歌从5.1开始全面禁止系统应用使用webview,使用会导致应用崩溃错误提示:Caused by: java.lang.UnsupportedOperationExc ...