写在前面的话：

今天是第一次写博客，很值得纪念，希望能够和大神们一起交流技术，一起进步。。。来自<一只有梦想的前端小白>

最近项目中需要实现图文混排的效果，所以研究了下在线编辑器-- kindeditor，在此之前也有研究过百度的在线编辑器--ueditor，但是百度的在线编辑器ueditor较 kindeditor 大10倍左右，所以综合一些原因最终选择使用kindeditor。下面分享下kindeditor在java项目中的配置以及运行结果：

1、去官网 http://kindeditor.net/down.php 下载 KindEditor 4.1.11 (2016-03-31) [1143KB]

2、本文以jsp版本为例，将下载下来的文件夹删除asp，asp.net，php文件夹，如图所示

3、将文件夹放入eclipse下的项目中，如图所示(图中我的kindedtior 文件夹根据自己的自己的需要稍作了修改)

4、需要把jsp下面lib下的三个包，如图所示：

拷进项目的lib下面，并且要引进去，如图所示：

5、如上图所示，我的kindedtior 文件夹里面新建了一个kindeudtior.html页面，其代码如下：

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

		<link rel="stylesheet" type="text/css" href="themes/simple/simple.css"/>

	</head>

<body>

<form name="example" method="post" action="http://localhost:8080/personalWebsiteFront/studentInfo/addNewInfo">

		<textarea id="editor_id1" name="textInfo" style="width:700px;height:300px;">

		</textarea>

		<input type="submit" name="button" value="提交内容" /> (提交快捷键: Ctrl + Enter)

</form>

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

<script charset="utf-8" src="lang/zh-CN.js"></script>

<script charset="utf-8" src="js/jquery-1.11.2.min.js"></script>

<script>

        KindEditor.ready(function(K) {

    		// 实例化编辑器1

            editor1 = K.create('#editor_id1',{

            uploadJson : 'jsp/upload_json.jsp',

			fileManagerJson : 'jsp/file_manager_json.jsp',

			allowFileManager : true,   //否开启【浏览服务器】功能

			items:['source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', 'code', 'cut', 'copy', 'paste',

					'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright',

					'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',

					'superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '/',

					'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold',

					'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'image', 'multiimage',

					'flash', 'media', 'insertfile', 'table', 'hr', 'emoticons', 'baidumap', 'pagebreak',

					'anchor', 'link', 'unlink', '|', 'about'

			],themeType : 'simple',

            });

    });

</script>

</body>

</html>

　如上述代码所示，我配置了服务器，此处省略。。。

6、到这一步时，如果启动tomcat运行项目是可以成功的，但是在插入图片或者文件时是会出错的，这是因为文件的保存路径的问题。下面我们需要修改jsp文件夹下面的upload_json.jsp文件，如图所示：

打开upload_json.jsp文件后，有如下图所示的代码：

在19和22行的最后都有attached，其指一个文件夹的名称，前面是路径，但是在上传图片时通过检查目录发现，没有attached文件夹，此时项目不会去新建个attached文件夹，而是直接显示上传路径不存在，所以我们需要对以上路径稍作修改，修改后的如下图所示：

到这一步就可以完成图片的上传，效果如图所示：

至于图片以及文件上传后数据库怎么获取数据，那是属于后端服务控制的，这里就不具体介绍了。

希望以上的介绍对您能有所帮助，同时这也是我自己只是内化的过程，感谢博客园平台！----来自<一只有梦想的前端小白>

kindeditor-在线编辑器的更多相关文章

  1. 将kindeditor在线编辑器制作成smarty插件

    在web开发中,在线编辑器是经常要用到的功能模块,虽说配置在线编辑器没有多大难度,但是每一次编写重复的代码,总是让人感觉不爽. 本篇,就来讲解一下,如何将kindeditor制作成smarty的一个自 ...

  2. kindeditor在线编辑器的使用心得

    1. 如何声明引用? <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> ...

  3. jsp解决kindeditor在线编辑器struts图片上传问题

    1.下载 官网下载ckeditor,解压后去掉不需要的部分,仅需保留plugin,lang,theme文件夹,这三个文件夹中用不到的东西可以删除, 比如lang文件下存放所有语言文件js,仅仅 保留e ...

  4. .Net在线编辑器：KindEditor及CkEditor+CkFinder配置说明

    Net在线编辑器:KindEditor及CkEditor+CkFinder配置说明 一.KindEditor(免费) KindEditor是一套开源的HTML可视化编辑器,主要用于让用户在网站上获得所 ...

  5. 在线编辑器Ckeditor （1） - php （30）

    在线编辑器 在线编辑器也称之为所见即所得编辑器,是一种常见的html源码编辑器. 所见即所得:用户在输入的时候,不论是格式和是样式都能被系统原封不动的保存,最后在查看的时候,可以按照用户输入的原来的结 ...

  6. 在线编辑器的使用-KindEditor

    第一种:KindEditor编辑器 步骤一:加载相应的核心的文件 下载地址:http://kindeditor.net/demo.php <link rel="stylesheet&q ...

  7. kindeditor在线文本编辑器过滤HTML的方法

    在使用kindeditor文本编辑器时遇到的问题,客户直接从Excel里粘贴文本内容到文本编辑器中(能不能再懒一些),然后不调整粘贴内容直接就保存(你敢不敢再懒一些)!对于这种很无语的行径,我只能对他 ...

  8. js组件在线编辑器插件、图表库插件、文件树插件

    在线编辑器插件: 一.kindeditor 二.UEditor 图表库插件: 一.echart 二.highchart 文件树插件: 一.zTree -- jQuery 树插件 http://www. ...

  9. ASP.NET配置KindEditor文本编辑器-图文实例

    1.什么是KindEditor KindEditor 是一套开源的在线HTML编辑器,主要用于让用户在网站上获得所见即所得编辑效果,开发人员可以用 KindEditor 把传统的多行文本输入框(tex ...

  10. 基于thinkphp的在线编辑器kindeditor-v4.1.3

    首先,去官网下载最新版的kindeditor,然后把里面asp,jsp,net,example的全删除,然后改名为editor放进public(最外层目录的public)文件夹里面. 在目录lib目录 ...

随机推荐

  1. 有关PHP、HTML单引号、双引号转义以及转成HTML实体的那些事！

    一.单引号和双引号转义在PHP的数据存储过程中用得比较多,即往数据库里面存储数据时候需要注意转义单.双引号: 先说几个PHP函数: 1.addslashes — 使用反斜线引用(转义)字符串: 返回字 ...

  2. 云计算之路-阿里云上：消灭“黑色n秒”第三招——禁用网卡的TCP/IP Offload

    程咬金有三板斧,我们有三招.在这篇博文中我们要出第三招,同时也意味着昨天在“希望的田野”上的第二招失败了. 前两招打头(CPU)不凑效,这一招要换一个部位,但依然要坚持攻击敌人最弱(最忙最累)部位的原 ...

  3. [转载]基于TFS实践敏捷-Scrum模式运用

    根据Forrester Research今年第二季度的一份研究报告,在超过1000名专业开发人员中,采用敏捷模式进行软件开发的已经有10.9%采用了Scrum模式,在所有的敏捷开发模式中名列首位,而在 ...

  4. Testing - 测试基础 - 理解

    理解 目的 测试就是要找到关键信息,有关项目和产品的关键决策都是根据这些信息做出. 对产品质量做出总体评估. 找出并报告团队所有可能会对产品价值产生消极影响的问题(但并不意味着能发现所有问题). 重心 ...

  5. jQuery选择器(一)

    晚上闲着没事,正好用来整理下jQuery的选择器,毕竟没有总结就不算学习嘛. 首先,对事件处理.遍历DOM和Ajax操作,都依赖于选择器. 1.CSS选择器 要使用某个HTML元素,就先要找到它,而c ...

  6. 做一个会PS切图的前端开发

    系列链接 做一个会使用PS的前端开发 做一个会PS切图的前端开发 切图方法分类 PhotoShop从CS版本演变到现在的CC版本,切图功能发生了比较大的变化,我们可以把PhotoShop CS版本时的 ...

  7. 利用Travis CI 让你的github项目持续构建

    Travis CI 是目前新兴的开源持续集成构建项目,它与jenkins,GO的很明显的特别在于采用yaml格式,简洁清新独树一帜.目前大多数的github项目都已经移入到Travis CI的构建队列 ...

  8. 【转】 Key/Value之王Memcached初探：二、Memcached在.Net中的基本操作

    一.Memcached ClientLib For .Net 首先,不得不说,许多语言都实现了连接Memcached的客户端,其中以Perl.PHP为主. 仅仅memcached网站上列出的语言就有: ...

  9. TFS 2012 在IE11和Chrome (Windows 8.1) 显示英文的解决方案

    1.如果使用IE11浏览TFS Web显示英文,请执行以下操作: 控制面板——>语言——>高级设置 将“替代Windows显示语言”改为“中文(中华人民共和国)”,同时勾选“Web语言”下 ...

  10. 观察者模式（Observer pattern）

    知识点 使对象之间达到松耦合的效果. 观察者模式定义了对象之间一对多的关系.主题用一个共同的接口来更新观察者. 观察者和被观察者之间通过松耦合的方式结合,被观察者不用理会观察者的实现细节,只需要观察者 ...