富文本编辑器kindeditor的使用
第一步:导入前端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的使用的更多相关文章
- 富文本编辑器kindeditor配置
<!--富文本编辑器kindeditor配置↓ --> <link type="text/css" rel="stylesheet" href ...
- easyUI整合富文本编辑器KindEditor详细教程(附源码)
原因 在今年4月份的时候写过一篇关于easyui整合UEditor的文章Spring+SpringMVC+MyBatis+easyUI整合优化篇(六)easyUI与富文本编辑器UEditor整合,从那 ...
- python 全栈开发,Day83(博客系统子评论,后台管理,富文本编辑器kindeditor,bs4模块)
一.子评论 必须点击回复,才是子评论!否则是根评论点击回复之后,定位到输入框,同时加入@评论者的用户名 定位输入框 focus focus:获取对象焦点触发事件 先做样式.点击回复之后,定位到输入框, ...
- 富文本编辑器 KindEditor 的基本使用 文件上传 图片上传
富文本编辑器 KindEditor 富文本编辑器,Rich Text Editor , 简称 RTE , 它提供类似于 Microsoft Word 的编辑功能. 常用的富文本编辑器: KindEdi ...
- Django配置富文本编辑器kindeditor
一.简介 django是一个容易快速上手的web框架,用它来创建内容驱动型的网站(比如独立博客)十分方便.遗憾的是,django并没有提供官方的富文本编辑器,而后者恰好是内容型网站后台管理中不可或缺的 ...
- JAVAEE——宜立方商城04:图片服务器FastDFS、富文本编辑器KindEditor、商品添加功能完成
1. 学习计划 1.图片上传 a) 图片服务器FastDFS b) 图片上传功能实现 2.富文本编辑器的使用KindEditor 3.商品添加功能完成 2. 图片服务器的安装 1.存储空间可扩展. 2 ...
- 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 ...
- java富文本编辑器KindEditor
在页面写一个编辑框: <textarea name="content" class="form-control" id="content&quo ...
- 在线富文本编辑器kindeditor配置(.Net Framework 3.5)
下载地址:http://kindeditor.net/down.php 解压放在项目要目录下, 在Bin目录下添加引用:LitJSON.dll 在页面头部加: <link rel="s ...
随机推荐
- 【面试突击】- 2019年125条常见的java面试笔试题汇总(一)
1.抽象:抽象就是忽略一个主题中与当前目标无关的那些方面,以便更充分地注意与当前目标有关的方面.抽象并不打算了解全部 问题,而只是选择其中的一部分,暂时不用部分细节.抽象包括两个方面,一是过程抽象,二 ...
- 【初识算法】- AC算法
原文地址:https://www.cnblogs.com/jily/p/6250716.html 一.原理 AC自动机首先将模式组记录为Trie字典树的形式,以节点表示不同状态,边上标以字母表中的字符 ...
- FlaskCBV视图类
路由视图类 from flask import Flask app = Flask(name) 视图类 Views文件 看views源码 继承最后一个类 导入CBV的视图基类 from flask i ...
- Android为TV端助力之反射基本知识
- AIX 静默安装11gR2 RAC
AIX安装11gR2 RAC 一.1 BLOG文档结构图 一.2 前言部分 一.2.1 导读和注意事项 各位技术爱好者,看完本文后,你可以掌握如下的技能,也可以学到一些其它 ...
- Centos 脚本中几个特殊符号的作用笔记
反斜杠(\):使反斜杠后面的一个变量变为单纯的字符串 单引号(''):转义其中所有的变量为单纯的字符串 双引号(""):保留其中的变量属性,不进行转义处理 反引号(``):把其中的 ...
- docker容器监控:cadvisor+influxdb+grafana
cadvisor+influxdb+grafana可以实现容器信息获取.存储.显示等容器监控功能,是目前流行的docker监控开源方案. 方案介绍 cadvisor Google开源的用于监控基础设施 ...
- Linux文件系统及管理
Linux文件系统及管理 一.Linux系统的文件系统与目录结构 Linux系统的文件目录结构为一个单根倒置的树结构,具体表现如下图: 从CentOS7开始,以下目录与之前的版本发生变化 ◆/bi ...
- k8s部署etcd集群
1.k8s部署高可用etcd集群时遇到了一些麻烦,这个是自己其中一个etcd的配置文件 例如: [Unit] Description=Etcd Server After=network.target ...
- IDA7.0安装findcrypt插件
效果图附上 安装成功的话,快捷键Ctrl+Alt+F可以调出上图的窗口,识别一些常见的算法,上面识别出是Base64加密 插件链接放上:https://github.com/polymorf/find ...