项目所迫,原来使用的都是些过早用的,如今缺少更新的,因此决定在后续的计划中要选定某个类型的编辑器,就这么统一使用下,最好是中英文或多种语言版本比较好的
有个比较明显的问题是,在能够有图片上传的类似的,就不多,比如tinymce需要单独的图片上传,可即使是非单独的也是搭售类型,例如ckeditor
I have added a Panel with three controls a TextBox which will be out RichTextEditor, a FileUpload control to upload pictures, images or graphics and an upload
button to upload the pictures
http://ckeditor.com/demo
我们看到有最佳20个富文本编辑器,有最佳6个之类,且其中的排名是乱七八糟,其宗的描述也是个类型的,又说简介,又说体积小,下载很快。也有说功能强大的,也有说插件式的,自己开发插件
后来又选,还是很麻烦,成熟的,功能少,国产的,东西那个灵活,但是bug多,这点很正常,又要功能多,又要不出bug,还免费!
所以呢,选一个合适的最好,说到技术方面考虑,还要考虑不同的架构,比如asp.net mvc和form asp.net那采用脚本的当然最合适两个,可编程复杂度就高了。
再说kindeditor,结果发现每天多有人报告bug,这个。。。。
01.NICEDIT
NicEdit is lightweight, no-fuss cross-platform rich-text editor that emphasizes user-friendliness and simplicity over barraging users with too many features. You can serve NicEdit remotely from the NicEdit website; all you have to do is copy a JavaScript
code snipplet and voila – it just works (as well as saving your server some system resources).
2 tinymCE
3. freetextbox--使用方便,其实不简单
http://www.icanbecreative.com/top-6-free-rich-text-editors.html
FCKEditor 现在已经重新开发,并改名为 CKEditor。
FCKeditor是一个专门使用在网页上属于开放源代码的所见即所得文字编辑器。它志于轻量化,不需要太复杂的安装步骤即可使用。它可和PHP、JavaScript、ASP、ASP.NET、ColdFusion、Java、以及ABAP等不同的编程语言相结合。“FCKeditor”名称中的“FCK” 是这个编辑器的作者的名字Frederico Caldeira Knabben的缩写。
ckfinder2.3.1破解说明
打开ckfinder.js文件
ps:查看ckfinder版本,打开ckfinder.js,搜索关键字“version”,就可以看到“version='2.3.1'”等字样。
一、找到<h4 class='message_content'></h4>,改为<h4 style='display:none;' class='message_content'></h4>
二、找到
var p="\x3c\x64\151\x76\040\143\x6c\141\x73\163\075\x27\166\151\x65\167\040\x74\x6f\157\154\x5f\160\x61\156\x65\x6c\x27\x20\163\164\x79\154\145\075\x27\x70\141\x64\x64\x69\156\x67\072\062\x70\170\073\x64\151\x73\x70\154\x61\x79\072\x62\154\157\143\x6b\040\x21\x69\x6d\x70\157\x72\x74\141\156\164\073\x70\157\x73\151\164\151\x6f\x6e\072\163\x74\x61\x74\151\143\x20\041\x69\155\160\x6f\162\164\x61\x6e\164\073\x63\157\x6c\x6f\x72\x3a\142\154\141\143\153\040\041\x69\155\x70\x6f\x72\164\x61\156\x74\073\142\141\x63\x6b\147\162\x6f\165\156\144\055\x63\x6f\x6c\157\x72\x3a\x77\x68\x69\x74\145\x20\x21\151\155\x70\157\x72\164\x61\156\x74\x3b\x27\076",q="\x3c\x2f\144\x69\x76\076",r=p+"\x54\150\x69\163\040\x69\x73\x20\x74\150\145\x20\x44\105\x4d\x4f\x20\166\145\162\x73\x69\x6f\x6e\x20\157\146\040\x43\x4b\x46\151\156\x64\145\x72\x2e\040\x50\x6c\x65\x61\x73\145\040\x76\x69\x73\x69\x74\x20\164\x68\x65\x20\074\141\040\150\162\145\x66\x3d\047\150\164\x74\160\x3a\057\x2f\x63\153\163\x6f\x75\x72\143\x65\056\143\x6f\x6d\057\x63\x6b\x66\151\156\x64\145\x72\047\040\x74\141\x72\147\145\164\x3d\x27\137\x62\x6c\x61\156\x6b\047\076\x43\x4b\x46\151\156\144\145\162\x20\x77\x65\142\x20\163\151\164\145\074\057\141\076\040\x74\157\x20\x6f\x62\164\x61\x69\x6e\040\x61\040\x76\x61\154\x69\144\x20\154\151\x63\145\x6e\163\x65\056"+q,s=p+"\x43\113\x46\151\156\x64\x65\x72\x20\x44\145\166\145\x6c\x6f\x70\145\162\040\114\151\x63\145\156\x73\145\x3c\142\x72\x2f\x3e\x4c\151\x63\x65\x6e\163\x65\x64\040\164\157\x3a\040";
这个串因为大家的版本不同可能不太一样,总之就是很长一段八进制和十六进制的字符串,将其改为var p="\x20",q="\x20",r=p,s=p;
三、找到“\x54\150\151\x73\040\146\165\156\x63\x74\x69\x6f\x6e\x20\151\x73\040\x64\151\163\x61\142\x6c\x65\x64\x20\151\156\x20\x74\x68\145\040\144\145\155\x6f\040\166\145\x72\x73\x69\x6f\x6e\x20\x6f\146\x20\103\x4b\x46\151\156\144\145\x72\x2e\x3c\142\162\040\057\076\x50\x6c\145\141\x73\x65\040\166\151\x73\151\164\x20\164\150\145\040\x3c\141\040\150\162\x65\x66\x3d\047\150\164\x74\x70\072\x2f\x2f\143\153\x73\157\x75\x72\x63\x65\x2e\x63\x6f\155\057\x63\x6b\146\151\156\x64\x65\162\x27\x3e\x43\113\106\x69\156\144\x65\162\x20\167\x65\142\040\x73\x69\x74\145\x3c\x2f\x61\x3e\x20\x74\157\040\157\x62\x74\141\151\x6e\040\x61\x20\x76\x61\x6c\x69\144\x20\154\151\143\x65\x6e\163\145\x2e”
将他前面 if 中的语句删掉,
if(a.bF&&1==a.bs.indexOf(a.bF.substr(1,1))%5&&a.lS(r)!=a.lS(a.ed)||a.bF&&a.bF.substr(3,1)!=a.bs.substr((a.bs.indexOf(a.bF.substr(0,1))+a.bs.indexOf(a.bF.substr(2,1)))*9%(a.bs.length-1),1))
改成 if(false),这样可以解决一些方法不能使用的问题,比如拖拽文件到另一个文件夹。
4、ckfinder/ckfinder.js查找:
if((T.eu&& !Y||X)&&T.mj){V.addClass('files_message');this.tools.of().setHtml(T.mj);}
改成:
if((T.eu&& !Y||X)&&T.mj){V.addClass('files_message');if(T.mj==M)this.tools.of().hide();else{this.tools.of().setHtml(T.mj);this.tools.of().show()}}
5、ckfinder/ckfinder.js 删除两处js代码:
if(a.bF&&1==a.bs.indexOf(a.bF.substr(1,1))%5&&a.lS(r)!=a.lS(a.ed)||a.bF&&a.bF.substr(3,1)!=a.bs.substr((a.bs.indexOf(a.bF.substr(0,1))+a.bs.indexOf(a.bF.substr(2,1)))*9%(a.bs.length-1),1))w.msgDialog('',"\x54\150\151\x73\040\146\165\156\x63\x74\x69\x6f\x6e\x20\151\x73\040\x64\151\163\x61\142\x6c\x65\x64\x20\151\156\x20\x74\x68\145\040\144\145\155\x6f\040\166\145\x72\x73\x69\x6f\x6e\x20\x6f\146\x20\103\x4b\x46\151\156\144\145\x72\x2e\x3c\142\162\040\057\076\x50\x6c\145\141\x73\x65\040\166\151\x73\151\164\x20\164\150\145\040\x3c\141\040\150\162\x65\x66\x3d\047\150\164\x74\x70\072\x2f\x2f\143\153\x73\157\x75\x72\x63\x65\x2e\x63\x6f\155\057\x63\x6b\146\151\156\x64\x65\162\x27\x3e\x43\113\106\x69\156\144\x65\162\x20\167\x65\142\040\x73\x69\x74\145\x3c\x2f\x61\x3e\x20\x74\157\040\157\x62\x74\141\151\x6e\040\x61\x20\x76\x61\x6c\x69\144\x20\154\151\143\x65\x6e\163\145\x2e");else
改为 if(true)
if(a.bF&&1==a.bs.indexOf(a.bF.substr(1,1))%5&&a.lS(J)!=a.lS(a.ed)||a.bF&&a.bF.substr(3,1)!=a.bs.substr((a.bs.indexOf(a.bF.substr(0,1))+a.bs.indexOf(a.bF.substr(2,1)))*9%(a.bs.length-1),1))x.app.msgDialog('',"\x54\150\x69\x73\x20\146\x75\156\143\164\151\157\156\x20\151\163\040\x64\151\x73\141\x62\x6c\x65\144\x20\x69\156\x20\x74\x68\x65\x20\144\x65\x6d\157\040\x76\x65\x72\163\151\157\156\x20\x6f\x66\x20\x43\x4b\x46\x69\156\x64\x65\162\056\x3c\142\x72\040\057\076\120\154\145\141\163\145\040\166\151\163\x69\164\x20\x74\150\145\x20\074\141\040\150\162\145\x66\075\047\x68\x74\x74\160\x3a\x2f\057\x63\x6b\x73\x6f\165\x72\143\145\056\x63\x6f\155\057\143\x6b\x66\x69\x6e\144\x65\162\047\076\103\x4b\x46\x69\156\144\145\162\x20\167\145\x62\040\163\x69\164\x65\x3c\057\141\076\x20\164\157\x20\x6f\142\x74\141\x69\x6e\x20\141\x20\x76\141\x6c\x69\x64\x20\x6c\x69\x63\145\156\x73\145\x2e");else
代码删除
-----------------
ps:
ckfinder.js 中有很多这种转成16进制的字符,如果再遇到什么提示可以
document.write("\x65\144\x2e\x20");
这样就能看到要提示的是什么东西了,可以酌情修改了。
改完之后发现没效果可以清一下缓存,这样破解之后可以屏蔽掉“This is the demo version of CKFinder. Click here to visit our web site ”提示信息,也可以解决拖拽文件到另一个文件夹等功能不能使用的问题。暂时还没发现其他关于license的问题,不过要是想用个完整的 CKFinder,还是花店钞票吧。
============================
附:
在ckfinder/config.asp 106行
Set Thumbnails = server.CreateObject("Scripting.Dictionary")
Thumbnails.Add "url", baseUrl & "_thumbs"
Thumbnails.Add "directory", baseDir & "_thumbs"
Thumbnails.Add "enabled", true
作用:在列表中要看到图片必须开启缩略图功能。
===================================================================================
配置
baseURL、baseDir
baseURL 是CKFinder发布后URL基本路径;baseDir是服务器上文件存放地址的绝对路径,且必须是全路径。这两个地址指向必须是相同的,CKFinder 还要求路径中必须有最后一个斜线,如:
<baseDir>D:\Program Files\Apache Software Foundation\Tomcat 6.0\webapps\CKEditor_test\files\</baseDir>
<baseURL>/CKEditor_test/files/</baseURL>
或者也可以不写 baseDir 属性,让CKFinder 根据baseURL自己去判断文件存放路径:
<baseDir></baseDir>
如果想了解更多关于baseURL和baseDir的信息,可以浏览 baseURL and baseDir Parameters Explained 。
图片相关(Images)
accessControls
accessControls 用于为 CKFinder 中文件及文件夹对于不同用户的不同操作权限。默认情况是为所有用户开放所有文件及文件夹的所有操作权限:
<accessControls>
<accessControl>
<role>*</role>
<resourceType>*</resourceType>
<folder>/</folder>
<folderView>true</folderView>
<folderCreate>true</folderCreate>
<folderRename>true</folderRename>
<folderDelete>true</folderDelete>
<fileView>true</fileView>
<fileUpload>true</fileUpload>
<fileRename>true</fileRename>
<fileDelete>true</fileDelete>
</accessControl>
</accessControls>
role - 角色名称,默认是所有用户(*)。
resourceType - 资源类型,如Images, Flash, Files。默认为当前配置对所有类型(*)有效。
folder - 要进行限制的文件夹。
folder* and file* - 所有以folder和file开头的配置,都是一个布尔值,看名称就知道是干什么的了。
可以在 accessControls 下配置多个 accessControl 节点。所有的子文件夹或文件默认继承它们父文件夹的权限配置。
userRoleSessionVar
userRoleSessionVar 是一个 session 级的变量的名称,CKFinder 用这个变量来获取当前用户的角色。
<userRoleSessionVar>CKFinder_UserRole</userRoleSessionVar>
要切换至不同的角色,可以在 session 中这样控制:
HttpSession session = request.getSession(true);
session.setAttribute("CKFinder_UserRole", "admin");
其中,admin 为角色的名称,也就是上面 accessControl 中 role 配置的名称。
thumbs
CKFinder 允许为上传的图片创建缩略图,缩略图的配置在 thumbs 节点中,如:
<thumbs>
<enabled>true</enabled>
<url>%BASE_URL%_thumbs/</url>
<directory>%BASE_DIR%_thumbs</directory>
<directAccess>false</directAccess>
<maxHeight>100</maxHeight>
<maxWidth>100</maxWidth>
<quality>80</quality>
</thumbs>
maxWidth 和 maxHeight –设置缩略图的宽度和高度,单位为像素。
quality - 缩略图的品质,1至100之间。可以接受的品质的值最小为45左右,最常用的值为80左右。
directAccess - 这个配置可以提高 CKFinder 的整体性能。默认情况下,CKFinder 连接至 server connector 以获取缩略图。通常情况下,connector 会发送HTTP/304 Not Modified header以减轻服务器端压力,如果directAccess被置为true,CKFinder 直接从服务器获取缩略图。
imgWidth
imgHeight
imgQuality
这三个属性分别用于设置上传图片的最大宽度、最大高度以及图片品质。如果上传的图片大小超过预设的值,CKFinder 将按比例对其进行缩放。
资源类型相关(Resource Types )
CKFinder 内置了3种文件类型:files , images , Flash 。它们在config.xml 中的默认配置如下:
<types>
<type name="Files">
<url>%BASE_URL%files/</url>
<directory>%BASE_DIR%files</directory>
<maxSize>0</maxSize>
<allowedExtensions>7z,aiff,asf,avi,bmp,csv,doc,docx,fla,flv,gif,gz,gzip,jpeg,jpg,mid,mov,mp3,mp4,mpc,mpeg,mpg,ods,odt,pdf,png,ppt,pptx,pxd,qt,ram,rar,rm,rmi,rmvb,rtf,sdc,sitd,swf,sxc,sxw,tar,tgz,tif,tiff,txt,vsd,wav,wma,wmv,xls,xlsx,zip
</allowedExtensions>
<deniedExtensions></deniedExtensions>
</type>
<type name="Images">
<url>%BASE_URL%images/</url>
<directory>%BASE_DIR%images</directory>
<maxSize>0</maxSize>
<allowedExtensions>bmp,gif,jpeg,jpg,png</allowedExtensions>
<deniedExtensions></deniedExtensions>
</type>
<type name="Flash">
<url>%BASE_URL%flash/</url>
<directory>%BASE_DIR%flash</directory>
<maxSize>0</maxSize>
<allowedExtensions>swf,flv</allowedExtensions>
<deniedExtensions></deniedExtensions>
</type>
</types>
url 和 directory – 这种类型的文件上传的 url 和 dir。
maxSize – 文件最大限制,默认以 bytes 为单位。此处也可以使用 G , M , K 为单位, 1M 为 1048576 bytes (1 Megabyte), 1K 为 1024 bytes (1 Kilobyte), 1G 为 1 Gigabyte。
allowedExtensions - 允许上传的文件类型。
deniedExtensions - 不允许上传的文件类型。
建议使用allowedExtensions。
也可以扩展自定义的文件类型,如:
<types>
<type name="MSdocs">
<url>%BASE_URL%MSdocs/</url>
<directory>%BASE_DIR%MSdocs</directory>
<maxSize>2M</maxSize>
<allowedExtensions>doc,ppt,xls</allowedExtensions>
<deniedExtensions></deniedExtensions>
</type>
</types>
安全性相关(security)
checkDoubleExtension - 接受一个布尔值,对允许上传列表中扩展名的校验规则。如果置为 true,每个“.”后的单词均被视为文件的扩展名进行校验,否则,只将最后一个“.”后的单词视为扩展名并进行校验。
secureImageUploads - 是否对上传的图片类型的文件进行格式校验。
htmlExtensions - 通知 CKFinder 将何种类型的文件视为 HTML 代码上传。
hideFolders - 当一些文件夹不想被用户看到时,如cvs、svn的文件夹不想让用户浏览,可以在这里配置其对用户隐藏。
hideFiles - 当一些文件不想被用户看到时,可以在这里配置其对用户隐藏。
扩展配置(Extending CKFinder Configuration)
我们可以通过继承 com.ckfinder.connector.configuration.Configuration 类来扩展 CKFinder 配置,或者更改 config.xml 中的配置。比如,前面我们为了使得 CKFinder 可用,将 <enabled>true</enabled> 置为 true,这并不是CKFinder推荐的做法,CKFinder 建议我们重写 checkAuthentication 方法,那么现在,这个任务就可以在这里完成了。
首先,需要建立一个自定义的类,继承于“com.ckfinder.connector.configuration.Configuration”,基本结构如下:
public class MyConfiguration extends Configuration {
public MyConfiguration(ServletConfig servletConfig) {
super(servletConfig);
}
@Override
protected Configuration createConfigurationInstance() {
return new MyConfiguration(this.servletConf);
}
}
然后,需要在 web.xml 中加入如下配置(假定上面的类全路径为com.ckfinder.connector.configuration.MyConfiguration):
<init-param>
<param-name>configuration</param-name>
<param-value>com.ckfinder.connector.configuration.MyConfiguration</param-value>
</init-param>
完成了上面的步骤,我们就可以对 CKFinder 进行扩展了。
重写 init 方法
通过重写 init 方法,我们对 xml 文件中的所有配置进行更改。下面的例子展示了如何更改baseURL 及将 zip 类型的文件加入到 allowedExtensions 配置中。
@Override
public void init() throws Exception {
super.init();
this.baseURL = "/CKEditor_test/files/";
ResourceType resourceType = this.types.get("Files");
resourceType.setAllowedExtensions(
resourceType.getAllowedExtensions().concat(",zip,7z"));
}
重写 checkAuthentication 方法
CKFinder 建议通过重写 checkAuthentication 方法来控制用户操作权限,如下面的例子中,如果用户已经登陆,session 有名为“loggedIn ”的属性时,才允许用户具有 CKFinder 的操作权限:
@Override
public boolean checkAuthentication(final HttpServletRequest request) {
return request.getSession().getAttribute("loggedIn") != null;
}
更多内容还是看 CKFinder 的使用手册吧 http://docs.cksource.com/CKFinder_2.x/Developers_Guide/Java
参考资料:
http://wuhongyu.iteye.com/blog/1119865
http://www.scscms.com/article/2012-9/131211594.html
=========================================================
CKFinder 集成到 CKEditor 中:
可以通过以下代码集成:
<script type="text/javascript" src="/ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="/ckfinder/ckfinder.js"></script>
<script type="text/javascript">
<!--
var editor = CKEDITOR.replace("content");
CKFinder.SetupCKEditor(editor) ;
//-->
</script>
也可以通过 ckeditor/config.js 里面配置代码:
//CKFinder目录路径地址(根据具体情况请自己修改):
var CKFinderPath = CKEDITOR.basePath + 'ckfinder/';
config.filebrowserBrowseUrl = CKFinderPath + 'ckfinder.html';
config.filebrowserImageBrowseUrl = CKFinderPath + 'ckfinder.html?Type=Images';
config.filebrowserFlashBrowseUrl = CKFinderPath + 'ckfinder.html?Type=Flash';
//config.filebrowserMediaBrowseUrl = CKFinderPath + 'ckfinder.html?Type=Media';
config.filebrowserUploadUrl = CKFinderPath + 'core/connector/php/connector.php?command=QuickUpload&type=Files';
config.filebrowserImageUploadUrl = CKFinderPath + 'core/connector/php/connector.php?command=QuickUpload&type=Images';
config.filebrowserFlashUploadUrl = CKFinderPath + 'core/connector/php/connector.php?command=QuickUpload&type=Flash';
//config.filebrowserMediaUploadUrl = CKFinderPath + 'core/connector/php/connector.php?command=QuickUpload&type=Media';
/*
config.filebrowserWindowWidth = '640';
config.filebrowserWindowHeight = '480';
config.filebrowserImageWindowWidth = '640';
config.filebrowserImageWindowHeight = '480';
*/
=======================================================
附:
ckfinder改进:自动按用户日期时间(年月)划分文件夹:
http://suoys.blog.163.com/blog/static/1274719092010112051734629/
ckfinder 按年月建文件夹:
http://suoys.blog.163.com/blog/static/1274719092010112051734629/
----------------------------
网盘下载:
http://pan.baidu.com/share/link?shareid=365104&uk=1962957486
==========〉基本上讲解全面了