第一步：导入前端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. The XOR Largest Pair(tire树)

    题目 The XOR Largest Pair 解析 一年前听学长讲这道题,什么01trie,好高级啊,所以没学,现在一看.... 看到xor就应该想到二进制,一看数据\(A_i< 2^{31} ...

  2. loj#10012\poj2018 Best Cow Fences(二分)

    题目 #10012 「一本通 1.2 例 2」Best Cow Fences 解析 有序列\(\{a_i\}\),设\([l,r]\)上的平均值为\(\bar{x}\),有\(\sum_{i=l}^r ...

  3. Python进阶----表与表之间的关系(一对一,一对多,多对多),增删改查操作

    Python进阶----表与表之间的关系(一对一,一对多,多对多),增删改查操作,单表查询,多表查询 一丶表与表之间的关系 背景: ​ ​ ​  ​ ​ 由于如果只使用一张表存储所有的数据,就会操作数 ...

  4. 已知IP地址算子网掩码

    子网掩码计算方法有两种: 方法一:利用子网数来计算: 1.首先,将子网数目从十进制数转化为二进制数: 2.接着,统计得到的二进制数的位数,设为N: 3.最后,先求出此IP地址对应的地址类别的子网掩码. ...

  5. 高阶函数-map/filter/reduce

    什么样的函数叫高阶函数: 条件:1.函数接受函数作为参数 2.函数的返回值中包含函数 高阶函数之----map函数 map(func, *iterables) --> map objectnum ...

  6. Pthon魔术方法（Magic Methods）-bool

    Pthon魔术方法(Magic Methods)-bool 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.bool方法 __bool__: 内建函数bool(),或者对象放在逻 ...

  7. 个人第5次作业-Alpha2项目的测试

    这个作业属于哪个课程 系统分析与设计 这个作业要求在哪里 作业要求 团队名称 卓越Code 这个作业的目标 选取3个非自己所在团队进行项目测试,协助该团队进行项目改进 前言 魏家田 201731062 ...

  8. django项目中使用bootstrap插件的分页功能。

    官网下载bootstrap插件放到项目中的static文件中 路由 path('blog-fullwidth/', login.fullwidth,name='fullwidth'), 前端页面引入 ...

  9. 正式一点的my.cnf文件

    感觉比以前的文件,配置正式了一些. 留照. [client] port #socket=/mysql/mysql.sock default-character-set=utf8 [mysqld] po ...

  10. github配置SSH proxy

    在windows users 用户目录下生成config文件,如在C:\Users\your_user_name\.ssh 目录下,找到config文件,如果没有新建一个,写入如下内容: Host g ...