KindEditor应用实例——“重量级”（保留了上传图片的功能） - 下载频道
- CSDN.NET
&&&&KindEditor应用实例——“重量级”（保留了上传图片的功能）
KindEditor应用实例——“重量级”（保留了上传图片的功能）
本工程旨在演示如何在java Web中使用KindEditor、如何使用Servlet获取到该文本编辑域的值以及如何从数据库中取出值并在jsp页面中显示出来。
说明：本工程中的KindEditor保留了上传图片的功能，所以是一个“重量级”的KindEditor，“轻量级”的KindEditor的应用请参考另一个例子。
本工程编码方式：UTF-8。
使用的数据库:MySQL;
数据库创建：CREATE DATABASE `test`;
USE `test`;
建表SQL语句：create table `testtable` (
`uuid` char(36) not null comment '主键',
`content` blob,
primary key (`uuid`)
) engine=innodb default charset=utf8;
1、本工程对js\kindeditor\plugins\image\image.js文件做了修改，以实现对上传图片时自由的决定是否需要“网络图片”功能，修改如下：
line 13 新增了allowImageRemote = K.undef(self.allowImageRemote, true),
line 296 将“showRemote : true,”改为“showRemote : allowImageRemote,”。
使用方法：初始化的时候，设置allowImageRemote的值，为true则需要“网络图片”功能，为false则不需要“网络图片”功能。
2、将本工程js\kindeditor\plugins\code\prettify.js文件名改为了“prettify.js.bak”，即废除了该文件，应为该文件出错。
1、该文本编辑器所使用的页面的css层叠样式中不能出现“ul,ol,div,h3,.ul4 li{zoom:1;}”否则文本编辑器上传单个图片的功能失效;
若举报审核通过，可奖励20下载分
被举报人：
wangshuxuncom
举报的资源分：
请选择类型
资源无法下载
资源无法使用
标题与实际内容不符
含有危害国家安全内容
含有反动色情等内容
含广告内容
版权问题，侵犯个人或公司的版权
*详细原因：
您可能还需要
开发技术下载排行您的位置： &
网站开发过程中通常会需要使用富文本编辑器，下面文章推荐两款js编写的，使用方便的轻量级web编辑器。
　　做过Web开发的朋友相信都使用过富文本编辑器，比较出名的和很多人应该已经使用过，在功能强大的同时需要加载的东西也变得很多。下面要推荐的两款富文本编辑器都是使用JS编写，使用简单，非常轻量级。
　　NicEdit是一个轻量级，跨平台的Inline Content Editor。NicEdit能够让任何 element/div变成可编辑或者能够把标准的TextArea转换成富文本编辑器。
　　NicEdit是我见过最轻量级的富文本编辑器，总共就一个JS文件和一张图片
　　使用也非常简单，只需在页面中添加简单的JS代码就可以将TextBox或是TextArea控件转换成富文本编辑器，代码如下
1 &head runat="server"& 2
&title&&/title& 3 &&/head& 4 &&body& 5
&form id="form1" runat="server"& 6
&script src="../JS/Eidtor/nicEdit.js" type="text/javascript"&&/script& 7
&script type="text/javascript"& 8
bkLib.onDomLoaded(function() { 9
new nicEditor({ fullPanel: true }).panelInstance('txtContent');10
&/script&12
&asp:TextBox runat="server" ID="txtContent" 13
TextMode="MultiLine" Height="200px" Width="600px" &&/asp:TextBox&14
&/form&15 &&/body&16 &/html&
运行效果如下
　　官网中的版本为英文版，而且字体设置也只能设置英文字体，我对英文版本做了简单的汉化，并且增加了几种中文字体，如下图
KindEditor
　　KindEditor是一套开源的HTML可视化编辑器，主要用于让用户在网站上获得所见即所得编辑效果，兼容IE、Firefox、Chrome、Safari、Opera等主流浏览器。 KindEditor使用JavaScript编写，可以无缝的与Java、.NET、PHP、ASP等程序接合。这个是官网上的介绍。
KindEditor相比较NicEditor涉及的文件要多很多，不过大小也才几百K而已，下图为文件结构
1 &html xmlns="http://www.w3.org/1999/xhtml"& 2 &head runat="server"& 3
&title&&/title& 4 &/head& 5 &body& 6
&form id="form1" runat="server"& 7
&script charset="utf-8" src="../JS/KindEditor/kindeditor-min.js"
type="text/javascript"&&/script& 9
&script type="text/javascript" charset="utf-8"&10
KE.show({11
id: 'txtContent',12
resizeMode: 1,13
allowPreviewEmoticons: false,14
allowUpload: false,15
&/script&17
&textarea cols="60" id="txtContent" style="width: 600 height: 300" runat="server"18
readonly="readonly"&&/textarea&19
&/form&20 &/body&21 &/html&
运行效果如下
　　选择这两款富文本编辑器的原因有
　　　　1 都是使用JS编写，这样使用起来比较简单不用去引用DLL。
　　　　2 体积都很小。
　　　　3 都可以直接将现有的TextBox或是TextArea变成富文本编辑器。
　　NicEditor相比较KindEditor来说还显的不是很成熟。在我最近的一个需求中就有两点没有达到，最后选用了KindEdior。
　　　　1 TextBox的宽度只能设置成固定数值的宽度，如果设置成百分比，如100%，在有的浏览器中就会显示有问题。
　　　　2 貌似还没有禁用编辑器的编辑功能，也有可能是我没有找到设置的方法。
上一篇：下一篇：ecshop添加KindEditor编辑器的最完整方法
echop默认是使用FCKeditor编辑器，这样对于要在商品描述里面批量插入图片的用户来说大大的不方便，现在我们来为ecshop添加KindEditor编辑器，让用户可选 FCKeditor和 KindEditor 效果如下： 1、
echop默认是使用FCKeditor编辑器，这样对于要在商品描述里面批量插入图片的用户来说大大的不方便，现在我们来为ecshop添加KindEditor编辑器，让用户可选 FCKeditor&和 KindEditor
效果如下：
1、添加 KindEditor 编辑器到 ecshop
1)从 KindEditor&官网下载最新的编辑器包 -&&http://kindeditor.net/down.php
解压后删除里面多余的其他语言文件夹 asp asp.net jsp&和 examples(examples为演示文件)
再把文件夹 kindeditor-4.*.**&重命名为 kindeditor，并复制到 ecshop&网站目录下的 include&文件夹下
2)&为了让上传的图片统一跟ecshop存放的目录相同，我们还要修改：
includes/kindeditor/php/upload_json.php 上传存放目录&改成
//文件保存目录路径
$save_path = $php_path . '../../../images/upload/';
//文件保存目录URL
$save_url = $php_url . '../../../images/upload/';
includes/kindeditor/php/file_manager_json.php 浏览服务器路径
//根目录路径，可以指定绝对路径，比如 /var/www/attached/
$root_path = $php_path . '../../../images/upload/';
//根目录URL，可以指定绝对路径，比如 /attached/
$root_url = $php_url . '../../../images/upload/';
3)接着在ecshop程序中加载kindeditor编辑器，打开 admin\includes\lib_main.php&大概 332 行，
$smarty-&assign('FCKeditor', $FCKeditor);
修改成下面代码：
//$smarty-&assign('FCKeditor', $FCKeditor); //注释掉默认加载的FCKeditor编辑器
$kindeditor=&
&textarea id=\&$input_name\& name=\&$input_name\& style='width:100%;height:300'&$input_value&/textarea&
&script charset='utf-8' src='../includes/kindeditor/kindeditor-min.js'&&/script&
KindEditor.ready(function(K) {
window.editor = K.create('textarea[name=\&$input_name\&]', {
allowFileManager : true, //浏览远程服务器按钮
width : '100%', //宽
height : '320px', //高
resizeType : 2, //2或1或0，2时可以拖动改变宽度和高度，1时只能改变高度，0时不能拖动
afterBlur : function(){this.sync();} //afterBlur当失去焦点时执行 this.sync(); -&取得textarea的value
&/script&&;
$smarty-&assign('FCKeditor', $kindeditor);
4)更新缓存，我们来添加商品和编辑商品看效果：
2、为用户选择编辑器做一个选项开关
1) 商店设置 -& 显示设置 插入一个编辑器选项，数据库插入SQL语句：
INSERT INTO ecs_shop_config (id, parent_id, code, type, store_range, store_dir, value, sort_order) VALUES (NULL, '3', 'editor', 'select', '1,0', '', '1', '1');
2) languages\zh_cn\admin\shop_config.php&最底下加入语言显示
$_LANG['cfg_name']['editor'] = '文本编辑器';
$_LANG['cfg_range']['editor']['0'] = 'FCKeditor';
$_LANG['cfg_range']['editor']['1'] = 'KindEditor';
3) 加上选择的判断，打开 admin\includes\lib_main.php
function create_html_editor($input_name, $input_value = '')
整个function&修改成
function create_html_editor($input_name, $input_value = '')
global $smarty;
$editor = new FCKeditor($input_name);
$editor-&BasePath
= '../includes/fckeditor/';
$editor-&ToolbarSet = 'Normal';
$editor-&Width
= '100%';
$editor-&Height
= '320';
$editor-&Value
= $input_value;
$FCKeditor = $editor-&CreateHtml();
//$smarty-&assign('FCKeditor', $FCKeditor); //注释掉默认加载的FCKeditor编辑器
$kindeditor=&
&textarea id=\&$input_name\& name=\&$input_name\& style='width:100%;height:300'&$input_value&/textarea&
&script charset='utf-8' src='../includes/kindeditor/kindeditor-min.js'&&/script&
KindEditor.ready(function(K) {
window.editor = K.create('textarea[name=\&$input_name\&]', {
allowFileManager : true, //浏览远程服务器按钮
width : '100%', //宽
height : '320px', //高
resizeType : 2, //2或1或0，2时可以拖动改变宽度和高度，1时只能改变高度，0时不能拖动
afterBlur : function(){this.sync();} //afterBlur当失去焦点时执行 this.sync(); -&取得textarea的value
&/script&&;
$Ceditor = $GLOBALS['_CFG']['editor'] ? $kindeditor : $FCKeditor ;
$smarty-&assign('FCKeditor', $Ceditor);
大功告成，这样用户后台可以自由选择使用 FCKeditor&或者 KindEditor 。
(责任编辑：最模板)
------分隔线----------------------------
ecshop搜索框默认情况下输入空格也是可以进行搜索商品，那么想...
将ecshop会员注册页的E-MAIL由必填项改为非必填项...
读者需注意，这里说的是留言板页面（即message.php），而不是商...
找到ecshop文件 includes \lib_order.php 约274行 if (!$support_cod ) { $sql ....
目的:ecshop不同的 分类 调用不同的 模版 ，如果没有就调用默认...
CopyRight (C)
最模板 , All Rights Reserved.当前访客身份：游客 [
这个人很勤快，但什么也没写。
目前还没有任何评论
今日访问：2
昨日访问：19
本周访问：40
本月访问：283
所有访问：4046
KindEditor上传图片
发表于2年前( 11:57)&&
阅读（2510）&|&评论（）
0人收藏此文章,
通过之前的文章的介绍，我们已经可以令我们的网页上出现一个KindEditor在线文本编辑器。我们可以直接使用它，在里面添加文字，编辑其格式，排版什么的。完了，我们还可以把内容提交到服务器（用于发表文章，编辑文章等，这就看具体业务需求了）。
好了，但是仅仅做到这一步，你会发现如果试图上传图片，只会弹出一个404错误窗口。（如果你没有得到错误窗口，你一定不是按照我在中介绍的方法安装的，那么你也许不必继续看了，因为按照特定语言的安装方法安装的话，应该一切都搞定了才对。）
那么我们就来做一个上传功能吧。首先，后台服务器应该为前台提供一个接口，接收上传的图片，然后把它保存在服务器的文件系统内（或存储在数据库中，或其他，具体如何做由你自己决定），然后，将能访问到该图片的url返回给前台。
后台具体如何实现，取决于你用什么语言，用什么技术。我大概演示下用Ruby on Rails如何实现后台。
#&app/controller/image_upload_controller.rb
class&ImageUploadController&&&ApplicationController
&&def&upload
&&&&_upload&=&params[:imgFile]
&&&&_name&=&create_image_name
&&&&_path&=&File.join(Directory,&_name)
&&&&File.open(_path,&"wb")&do&|f|
&&&&&&f.write(_upload.read)
&&&&render&:json&=&&{
&&&&&&:error&=&&0,
&&&&&&:url&=&&"/upload/images/#{_name}"
&&&&}.to_json
&&&&puts&_path
&&&&puts&"#{Directory}#{_name}"
&&TimeFormat&=&'%Y%m%d%H%M%a'
&&Directory&=&'public/upload/images/'
&&def&create_image_name
&&&&"IMG#{Time.now.strftime(TimeFormat)}#{rand(0..9999)}.jpg"
处理细节上，我的后台是直接将上传的图片保存在public/upload/images/文件夹里面，在Ruby on Rails中，public下的资源浏览器可以直接访问。假如图片在服务器中的地址是 public/upload/images/IMG.jpg，则用户直接在浏览器中输入 /upload/images/IMG.jpg就可以访问到该图片。
你当然可以把图片保存在数据库，但是只要能提供图片的url地址就行。不同的语言后台实现不一，但是只要注意两点就行了。
向前端提供一个用于上传图片的url接口。KindEditor会用POST方法访问该url从而把图片上传给服务器。
在处理完上传的图片后（保存在本地，或存储在数据库），返回一个json给客户端。这个json最重要的信息是，成功上传图片的url地址。
根据官方文档，这个json的格式应该是这样的：
&&&&&&&&"error"&:&0,
&&&&&&&&"url"&:&"/upload/images/IMG.jpg"
&&&&&&&&"error"&:&1,
&&&&&&&&"message"&:&"错误信息"
在编写了后台接收图片上传的url后，要将这个url告诉KindEditor。在配置KindEditor的时候，应该有说必须加上这么一些js脚本。
&&&&&&&&KindEditor.ready(function(K)&{
&&&&&&&&&&&&&&&&window.editor&=&K.create('#editor_id');
&&&&&&&&});
现在，将其该为：
&&&&&&&&KindEditor.ready(function(K)&{
&&&&&&&&&&&&&&&&window.editor&=&('#editor-id',&{
&&&&&&&&&&&&&&&&&&&&&&&uploadJson&:&'/image_upload/upload'
&&&&&&&&&&&&&&&&});
&&&&&&&&});
我这么改了以后，等于是为KindEditor的初始化配置了一个参数。即uploadJson，这个参数说明当KindEditor要上传图片的时候，它应该访问哪个url接口。这种初始化参数还有很多。详情可以查看 。鉴于本篇只讨论上传图片，其他参数就不罗嗦了。
（哦，还有，本文的代码仅供参考，直接复制粘贴肯定不能运行的。如果非要复制粘贴，请将代码中的特定部分改为你的项目中的内容。）
之后，如果使用KindEditor的上传图片功能，在一段时间的等待后，你将看到上传的图片出现在编辑区内。这就代表成功了。
如果上传图片成功（没有出现错误信息），但是图片却在编辑区内无法显示，那么就检查一下json返回的那个图片url信息是否正确吧。试图将它输入到浏览器中，试试浏览器能否访问到该图片。总之，要让那个url是有效的。
哦，写到这里我突然想起来了一个东西，就是错误信息。官方文档说uploadJson参数的url应该返回一个json，但是，如果我偏不返回json，而是返回一个Content-Type=text/html的页面，那么KindEditor将视为图片上传失败的错误，并将这个页面以弹出对话框的形式显示出来。（我只试过4.1，其他版本是否如此没试过。）
因此如果你不想让图片上传失败后仅仅显示文字的话，返回一个漂亮点的页面提醒图片上传失败了，也是可以的。KindEditor会把它显示出来。
附录：上传图片时发生CSRF校验错误
不同的语言和技术，这个错误信息的描述可能不一样。但是，看到这条错误信息，你大概就知道是怎么回事了。如果你使用Ruby on Rails开发后台，那么默认情况下对于浏览器提交的POST方法，都会进行CSRF校验。（实际上Rails还会对PUT，DELETE方法校验，但这就扯远了，和本主题无关了。）
为什么要校验，请参考。如果你对CSRF攻击不感兴趣，只想知道如何令你的图片可以通过验证成功上传，也没关系。
遗憾的是，KindEditor似乎没有提供CSRF验证的支持（这点尚未考证，我接触KindEditor不久，如有勿请告诉我），因此，如果你的后台程序要求CSRF验证，那么，KindEditor的图片肯定不能上传成功。
因此，最简单的解决方法，就是关掉CSRF验证。关掉整个服务器的CSRF验证肯定是把玩笑开大了，那么你可以只关掉上传图片的url的验证。
但这么一来，就算是阿猫阿狗都能通过你的url向你的服务器疯狂上传图片了。所以，手动写一段过滤程序吧。例如必须是登录用户且有上传图片权限的用户才能上传图片，否则直接返回error。
但是，你可能会说，我一定要验证，不验证不行！那么，就去改KindEditor的源代码吧。怎么改网上貌似还是有很多，但是大家改法不一。我也把我改的东西贴出来，这样也多一个参考。
CSRF的验证有很多种，一定要知道自己的后台如何验证才能开始动手改。例如我是用的Ruby on Rails，它会在html页面的head中加入如下信息。
&meta&name="csrf-param"&content="authenticity_token"/&
&meta&name="csrf-token"&content="eNaG5Hp25pctFmtko9LEvXWtbnBXnN8wxzzlcpMeupc="/&
如果在POST提交的时候加一个字段 'authenticity_token' =&'eNaG5Hp25pctFmtko9LEvXWtbnBXnN8wxzzlcpMeupc='，那么验证就会通过，至少Rails是如此。但是，这个csrf-token不是一个固定值，因此每次提交图片的时候必须动态的从head里取才行。
因此，我们要通过修改KindEditor的源代码，令它在上传图片的时候，把authenticity_token字段带上。
首先，找到kindeditor.js文件，然后找到大约4100行前后的范围（我的版本是4.1.x具体忘了），算了，我不写怎么找了，反正也不好找。我直接贴出我是怎么改的，如果你要想跟着改的话，直接ctrl+F找到附近位置就好了。
var&hiddenElements&=&[];
for(var&k&in&extraParams){
hiddenElements.push('&input&type="hidden"&name="'&+&k&+&'"&value="'&+&extraParams[k]&+&'"&/&');
&&&&&&&//MOsky&inserts&this&code.
var&csrfParam&=&$("meta[name='csrf-param']").attr("content");
var&csrfToken&=&$("meta[name='csrf-token']").attr("content");
//End&insert
var&html&=&[
'&div&class="ke-inline-block&'&+&cls&+&'"&',
(options.target&?&''&:&'&iframe&name="'&+&target&+&'"&style="display:"&&/iframe&'),
(options.form&?&'&div&class="ke-upload-area"&'&:&'&form&class="ke-upload-area&ke-form"&method="post"&enctype="multipart/form-data"&target="'&+&target&+&'"&action="'&+&url&+&'"&'),
'&span&class="ke-button-common"&',
hiddenElements.join(''),
//MOsky&inserts&this&code.
'&input&type="hidden"&name="',&csrfParam,&'"&value="',&csrfToken,&'"/&',
//End&insert
'&input&type="button"&class="ke-button-common&ke-button"&value="'&+&title&+&'"&/&',
'&/span&',
'&input&type="file"&class="ke-upload-file"&name="'&+&fieldName&+&'"&tabindex="-1"&/&',
(options.form&?&'&/div&'&:&'&/form&'),
'&/div&'].join('');
var&div&=&K(html,&button.doc);
//MOsky&inserts&this&code.&后的内容是我插入的，不属于源代码的内容。
原理就是我直接从html文件的head中将这两个标签中的值取出来。
然后在提交图片的时候，生成一个input，将其name设置成authenticity_token，value设置成取的token值。然后一起提交上去了。
更多开发者职位上
1)">1)">1" ng-class="{current:{{currentPage==page}}}" ng-repeat="page in pages"><li class='page' ng-if="(endIndex<li class='page next' ng-if="(currentPage
相关文章阅读kindeditor只要图片本地上传_百度知道
kindeditor只要图片本地上传
用了kind的做文本编辑器，但图片上传那里我只想保留本地上传功能，想把网络图片那部分删掉该怎么做？
提问者采纳
整理一下后台代码 @Action(value = &uploadFile&)
public String uploadFile(){
//文件保存目录路径
img_upload是服务器存储上传图片的目录名
String savePath = request.getSession().getServletContext()
.getRealPath(&/&)
+ &imgupload/&;
//文件保存目录URL
String saveUrl = request.getContextPath() + &/imgupload/&;
//定义允许上传的文件扩展名
String[] fileTypes = new String[] { &gif&, &jpg&, &jpeg&, &png&,&bmp& };
//允许最大上传文件大小
long maxSize = 1024000;
//Struts2 请求 包装过滤器
MultiPartRequestWrapper wrapper = (MultiPartRequestWrapper)
//获得上传的文件名
String fileName = wrapper.getFileNames(&imgFile&)[0];
//获得文件过滤器
File file = wrapper.getFiles(&imgFile&)[0];
//得到上传文件的扩展名
String fileExt = fileName.substring(fileName.lastIndexOf(&.&) + 1)
.toLowerCase();
//检查扩展名
if (!Arrays. asList(fileTypes).contains(fileExt)) {
//out.println(getError(&上传文件扩展名是不允许的扩展名。&));
//检查文件大小
if (file.length() & maxSize) {
//out.println(getError(&上传文件大小超过限制。&));
//检查目录
SimpleDateFormat sdf= new SimpleDateFormat(&yyyy_MM&);
String dir=sdf.format(new Date());
File uploadDir = new File(savePath+dir);
uploadDir.mkdirs();
if (!uploadDir.isDirectory()) {
//out.println(getError(&上传目录不存在 。&));
//检查目录写入权限
if (!uploadDir.canWrite()) {
// out.println(getError(&上传目录没有写入权限。&));
//重构上传图片的名称
SimpleDateFormat df = new SimpleDateFormat(&yyyyMMddHHmmss&);
String newImgName = df.format(new Date()) + &_&
+ new Random().nextInt(1000) + &.& + fileE
//设置 KE 中的图片文件地址
String newFileName = request.getScheme() + &://&
+ request.getServerName() + &:& + request.getServerPort()
+ saveUrl + dir+&/&+ newImgN
byte[] buffer = new byte[1024];
//获取文件输出流
FileOutputStream fos = new FileOutputStream(savePath+dir+&/& + newImgName);
//获取内存中当前文件输入流
InputStream in = new FileInputStream(file);
int num = 0;
while ((num = in.read(buffer)) & 0) {
fos.write(buffer, 0, num);
} catch (Exception e) {
e.printStackTrace(System.err);
} finally {
in.close();
fos.close();
//发送给 KE
JSONObject obj = new JSONObject();
obj.put(&error&, 0);
obj.put(&url&, saveUrl + dir+&/& + newImgName);
System.out.println(obj.toString());
response.getWriter().write(obj.toString());
response.getWriter().flush();
response.getWriter().close();
} catch (Exception e) {
// TODO: handle exception
return &&;
//return &success&; }前台
提问者评价
其他类似问题
为您推荐：
kindeditor的相关知识
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁