富文本编辑器

最新推荐文章于 2024-03-11 22:19:01 发布

gnicky

最新推荐文章于 2024-03-11 22:19:01 发布

阅读量2k

点赞数

分类专栏： .NET Framework

.NET Framework 专栏收录该内容

34 篇文章 0 订阅

订阅专栏

项目所迫，原来使用的都是些过早用的，如今缺少更新的，因此决定在后续的计划中要选定某个类型的编辑器，就这么统一使用下，最好是中英文或多种语言版本比较好的

有个比较明显的问题是，在能够有图片上传的类似的，就不多，比如tinymce需要单独的图片上传，可即使是非单独的也是搭售类型，例如ckeditor

http://www.aspsnippets.com/Articles/Adding-Images-to-TinyMCE-Rich-Text-Editor-using-ASP.Net-FileUpload-Control.aspx

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自己去判断文件存放路径:

如果想了解更多关于baseURL和baseDir的信息，可以浏览 baseURL and baseDir Parameters Explained 。

图片相关（Images）

accessControls

accessControls 用于为 CKFinder 中文件及文件夹对于不同用户的不同操作权限。默认情况是为所有用户开放所有文件及文件夹的所有操作权限：

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 中：

可以通过以下代码集成：

也可以通过 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

==========〉基本上讲解全面了

gnicky

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
富文本编辑器

项目所迫，原来使用的都是些过早用的，如今缺少更新的，因此决定在后续的计划中要选定某个类型的编辑器，就这么统一使用下，最好是中英文或多种语言版本比较好的有个比较明显的问题是，在能够有图片上传的类似的，就不多，比如tinymce需要单独的图片上传，可即使是非单独的也是搭售类型，例如ckeditorhttp://www.aspsnippets.com/Articles/Adding-Im
复制链接

扫一扫