给web项目整合富文本编辑器
给jsp页面整合富文本编辑器
下载——删除多余的组件——加入到项目中——参照案例来完成整合
步骤:
1. 解压zip文件,将所有文件复制到Tomcat的webapps/kindeditor目录下。
2. 将kindeditor/jsp/lib目录下的3个jar文件复制到Tomcat的lib目录下,并重新启动Tomcat。
* commons-fileupload-1.2.1.jar
* commons-io-1.4.jar
* json_simple-1.1.jar
以下用我下载的副文本编辑器为例
3.把下边的集成代表粘贴到目标文件中(记得修改必要的数据)
代码如下:
<link rel="stylesheet" href="<%=request.getContextPath() %>/kindeditor/themes/default/default.css" />
<link rel="stylesheet" href="<%=request.getContextPath() %>/kindeditor/plugins/code/prettify.css" />
<script charset="utf-8" src="<%=request.getContextPath() %>/kindeditor/kindeditor.js"></script>
<script charset="utf-8" src="<%=request.getContextPath() %>/kindeditor/lang/zh_CN.js"></script>
<script charset="utf-8" src="<%=request.getContextPath() %>/kindeditor/plugins/code/prettify.js"></script>
<script>
KindEditor.ready(function(K) {
//这里名字是富文本域的name,后台取数据时用的name
var editor1 = K.create('textarea[name="context"]', {
cssPath : '<%=request.getContextPath() %>/kindeditor/plugins/code/prettify.css',
uploadJson : '<%=request.getContextPath() %>/kindeditor/jsp/upload_json.jsp',
fileManagerJson : '<%=request.getContextPath() %>/kindeditor/jsp/file_manager_json.jsp',
allowFileManager : true,
afterCreate : function() {
var self = this;
K.ctrl(document, 13, function() {
self.sync();
//注意修改这里的form表单的名字
document.forms['nameForm'].submit();
});
K.ctrl(self.edit.doc, 13, function() {
self.sync();
document.forms['nameForm'].submit();
});
}
});
prettyPrint();
});
</script
4.运行项目,效果就出来了。
给web项目整合富文本编辑器的更多相关文章
- easyUI整合富文本编辑器KindEditor详细教程(附源码)
原因 在今年4月份的时候写过一篇关于easyui整合UEditor的文章Spring+SpringMVC+MyBatis+easyUI整合优化篇(六)easyUI与富文本编辑器UEditor整合,从那 ...
- bbs项目引入富文本编辑器和处理xss攻击和文章预览
一.富文本编辑上传文章和图片 富文本编辑器我们使用kindeditor,我们首先去官网下载,然后解压,放到我们的static的目录中 然后我们在html中这样使用富文本编辑器 <!DOCTYPE ...
- Spring+SpringMVC+MyBatis+easyUI整合优化篇(六)easyUI与富文本编辑器UEditor整合
日常啰嗦 本来这一篇和接下来的几篇是打算讲一下JDBC和数据库优化的,但是最近很多朋友加我好友也讨论了一些问题,我发现大家似乎都是拿这个项目作为练手项目,作为脚手架来用的,因此呢,改变了一下思路,JD ...
- Java-Swing中使用Web富文本编辑器
资料下载 (截取出了邮件发送的功能.) 2018/11/10 因为要 win7 电脑 IE 8 的原因,使用了 jxBrower 拓展,更容易使用,参考链接(推荐) 问题介绍 window客户端软件的 ...
- 百度Web富文本编辑器ueditor在ASP.NET MVC3项目中的使用说明
====================================================================== [百度Web富文本编辑器ueditor在ASP.NET M ...
- web项目中nicedit富文本编辑器的使用
web项目中nicedit富文本编辑器的使用 一.为什么要用富文本编辑器? 先说什么是富文本编辑器吧,普通的html中input或textarea标签只能进行简单的输入,而做不到其他的文本调整功能,甚 ...
- HandyEditor 富文本编辑器整合到python flask项目中
1.下载HandyEditor,地址http://he.catfish-cms.com/ 2.解压后的文件名HandyEditor-master改为HandyEditor,文件夹里的文件如下 3.将H ...
- WEB项目中使用UEditor(富文本编辑器)
Ueditor富文本编辑器是在很多项目里经常用到的框架,是百度开发团队开发的一款很好用的富文本编辑器 下面就是我在一个系统里用到的,有了富文本编辑器,管理员使用起来不是很方便? 所以本博客介绍这个富文 ...
- springMVC -- 整合UEditor(富文本编辑器)
工作中需要用到UEditor编辑文本,在与springMVC进行整合时,出现了一些问题,结果导致,在进行图片上传时出现如下提示: 上网查询了很多相关资料,此处简要记录下,防止以后遇到类似问题. 一种方 ...
随机推荐
- springboot测试
一.单元测试 在开发阶段的时候最重要的是单元测试了,springboot对单元测试的支持已经很完善了. 1.在pom包中添加spring-boot-starter-test包引用 <depend ...
- 【Python】-NO.98.Note.3.Python -【Python3 解释器、运算符】
1.0.0 Summary Tittle:[Python]-NO.98.Note.3.Python -[Python3 解释器] Style:Python Series:Python Since:20 ...
- docker 在宿主机上根据进程PID查找归属容器ID
在使用docker时经常出现一台docker主机上跑了多个容器,可能其中一个容器里的进程导致了整个宿主机load很高,其实一条命令就可以找出罪魁祸首 #查找容器ID docker inspect -f ...
- Windows PyCharm永久激活
1.下载 链接: https://pan.baidu.com/s/1LvQozk5lXdyk2p8qgGsr3A 提取码: x1t5 放置到 pycharm安装目录的\bin目录下(位置可随意,只要配 ...
- SmartGit 过期破解 - 授权文件 Free Trial License to Non-Commercial
亲测可用~ Windows: %APPDATA%/syntevo/SmartGit/OS X: ~/Library/Preferences/SmartGit/Unix/Linux: ~/.sm ...
- ElasticSearch6.2.3安装Head插件
1.环境 Linux centos7 elasticsearch-head的zip包,github网址如下:https://github.com/mobz/elasticsearch-head nod ...
- php curl POST multipart/form-data与application/x-www-form-urlencode的区别
背景 CURL在 a.php 中以 POST方式向 b.php 提交数据,但b.php无法接收到数据,而 CURL 操作显示成功. 原来,"传递一个数组到CURLOPT_POSTFIELDS ...
- EasyUI扩展——自定义列排序匹配字段
一些特殊情况下希望实现:单击某些列,但是排序要按照自定义指定另外的列排序 easyui扩展: 如果不写sort属性则按照默认该列的field排序 $.fn.datagrid.defaults.onBe ...
- Sql Server 生成连续时间段
方法一: declare @StartTime datetime declare @EndTime datetime set @StartTime ='2019-02-1 00:00' set @En ...
- 从零开始一起学习SLAM | 学习SLAM到底需要学什么?
SLAM涉及的知识面很广,我简单总结了 “SLAM知识树” 如下所示: (公众号菜单栏回复 “树” 可获得清晰版) 可以看到涉及的知识面还是比较广的.这里放出一张SLAM圈子里喜闻乐见的表达悲喜交加心 ...