标签：ckeditor
重点汇总:
作为一个可视化的HTML 编辑器，最重要的一点是对于文件、图片和视频的管理，一个好的可视化的HTML 编辑器应该有很好的设计。
其他的话就不多说了，现在开始进入正题。
ckeditor就是一个可视化的HTML编辑器，但是他的上传图片和视频却交给了另外的软件：ckfinder，为什么要这么做其中的好处应该看其公司吧。
参看之前的文章。
项目背景：
maven 项目（虽然是使用maven 管理包依赖的，但是我们没必要就一定要用maven来管理所有依赖的包，也可以手动加入相关的依赖包。）
软件包：
ckfinder_java_2.4.1.zip
解压后有如下文件：
CKFinderJava-2.4.1.war 解压后有如下文件：
<span style="font-size:14px;font-weight: normal;"><!-- CKFinder 的配置 --> <servlet> <servlet-name>ConnectorServlet</servlet-name> <servlet-class>com.ckfinder.connector.ConnectorServlet</servlet-class> <init-param> <param-name>XMLConfig</param-name> <param-value>/WEB-INF/config.xml</param-value><!-- 指定ckfinder的配置文件 --> </init-param> <init-param> <param-name>debug</param-name> <param-value>false</param-value> </init-param> <load-on-startup>1</load-on-startup> </servlet> <servlet-mapping> <servlet-name>ConnectorServlet</servlet-name> <url-pattern> /js/ckfinder/core/connector/java/connector.java<!-- 什么样的请求是交给该servlet处理的 --> </url-pattern> </servlet-mapping> <filter> <filter-name>FileUploadFilter</filter-name> <filter-class>com.ckfinder.connector.FileUploadFilter</filter-class> <init-param> <param-name>sessionCookieName</param-name> <param-value>JSESSIONID</param-value> </init-param> <init-param> <param-name>sessionParameterName</param-name> <param-value>jsessionid</param-value> </init-param> </filter> <filter-mapping> <filter-name>FileUploadFilter</filter-name> <url-pattern> /js/ckfinder/core/connector/java/connector.java </url-pattern> </filter-mapping> <!-- CKFinder 的配置 --></span>
配置ckfinder 的配置文件：config.xml
<span style="font-size:14px;"><span style="font-family:Times New Roman;"><config> <!-- CKFinder : Configuration File - Basic Instructions In a generic usage case, the following tasks must be done to configure CKFinder: 1. Check the baseDir and baseUrl options; 2. If available, paste your license key in the "licenseKey" setting; 3. Enable CKFinder using the "enabled" setting. WARNING : DO NOT simply set "enabled" to "true" on a production site. By doing so, you are allowing "anyone" to upload and list the files in your server. You must implement some kind of session validation. http://docs.cksource.com/CKFinder_2.x/Developers_Guide/Java/Configuration/Extending --> <enabled>true</enabled><!--将false 改为true--> <!-- Configure the location of uploaded files. See the following article for more details: http://docs.cksource.com/CKFinder_2.x/Developers_Guide/Java/Configuration/baseURL_and_baseDir --> <baseDir></baseDir><!--配置上传文件保存的基本绝对路径， 即上传的文件的保存在电脑硬盘上哪个文件夹下，没试验的！--> <baseURL>/Article/userfiles/</baseURL><span style="font-family: Arial, Helvetica, sans-serif;"><!--配置上传文件保存的相对路径，是相对于项目的--></span> <!-- <baseURL>C:\userfiles</baseURL> --> <licenseKey></licenseKey> <licenseName></licenseName> <!-- Set the maximum size of uploaded images. If an uploaded image is larger, it gets scaled down proportionally. Set to 0 to disable this feature. --> <imgWidth>1600</imgWidth> <imgHeight>1200</imgHeight> <imgQuality>80</imgQuality> <!-- See the following article for more details: http://docs.cksource.com/CKFinder_2.x/Developers_Guide/Java/Configuration/URI_Encoding --> <uriEncoding>UTF-8</uriEncoding> <!-- ResourceType : defines the "resource types" handled in CKFinder. A resource type is nothing more than a way to group files under different paths, each one having different configuration settings. Each resource type name must be unique. When loading CKFinder, the "type" querystring parameter can be used to display a specific type only. If "type" is omitted in the URL, the "DefaultResourceTypes" settings is used (may contain the resource type names separated by a comma). If left empty, all types are loaded. maxSize is defined in bytes, but shorthand notation may be also used. Available options are: G, M, K (case insensitive). 1M equals 1048576 bytes (one Megabyte), 1K equals 1024 bytes (one Kilobyte), 1G equals one Gigabyte. Example: 'maxSize' => "8M", ============================================================================== ATTENTION: Flash files with `swf' extension, just like HTML files, can be used to execute JavaScript code and to e.g. perform an XSS attack. Grant permission to upload `.swf` files only if you understand and can accept this risk. ============================================================================== --> <defaultResourceTypes></defaultResourceTypes> <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> <!-- The session variable name that CKFinder must use to retrieve the "role" of the current user. The "role", can be used in the "accessControls" settings (bellow). --> <userRoleSessionVar>CKFinder_UserRole</userRoleSessionVar> <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> <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> <!-- Increases the security on an IIS web server. If enabled, CKFinder will disallow creating folders and uploading files whose names contain characters that are not safe under an IIS web server. --> <disallowUnsafeCharacters>false</disallowUnsafeCharacters> <!-- Due to security issues with Apache modules, it is recommended to leave the following setting enabled. How does it work? Suppose the following: - If "php" is on the denied extensions list, a file named foo.php cannot be uploaded. - If "rar" (or any other) extension is allowed, one can upload a file named foo.rar. - The file foo.php.rar has "rar" extension so, in theory, it can be also uploaded. In some conditions Apache can treat the foo.php.rar file just like any PHP script and execute it. If CheckDoubleExtension is enabled, each part of the file name after a dot is checked, not only the last part. In this way, uploading foo.php.rar would be denied, because "php" is on the denied extensions list. --> <checkDoubleExtension>true</checkDoubleExtension> <!-- Indicates that the file size (maxSize) for images must be checked only after scaling them. Otherwise, it is checked right after uploading. --> <checkSizeAfterScaling>true</checkSizeAfterScaling> <!-- Perform additional checks for image files if set to true, validate image size --> <secureImageUploads>true</secureImageUploads> <!-- For security, HTML is allowed in the first Kb of data for files having the following extensions only. --> <htmlExtensions>html,htm,xml,js</htmlExtensions> <!-- Force ASCII names for files and folders. If enabled, characters with diactric marks will be automatically converted to ASCII letters. --> <forceASCII>false</forceASCII> <!-- Folders to not display in CKFinder, no matter their location. No paths are accepted, only the folder name. The * and ? wildcards are accepted. ".*" disallows the creation of folders starting with a dot character. --> <hideFolders> <folder>.*</folder> <folder>CVS</folder> </hideFolders> <!-- Files to not display/upload in CKFinder, no matter their location. No paths are accepted, only the file name, including extension. The * and ? wildcards are accepted. --> <hideFiles> <file>.*</file> </hideFiles> <plugins> <plugin> <name>imageresize</name> <class>com.ckfinder.connector.plugins.ImageResize</class> <params> <param name="smallThumb" value="90x90"></param> <param name="mediumThumb" value="120x120"></param> <param name="largeThumb" value="180x180"></param> </params> </plugin> <plugin> <name>fileeditor</name> <class>com.ckfinder.connector.plugins.FileEditor</class> <params></params> </plugin> <!-- Before enabling the watermark plugin make sure to specify path to source image --> <!-- The "internal" flag informs CKFinder that watermark is a pure server side plugin --> <!-- <plugin> <name>watermark</name> <class>com.ckfinder.connector.plugins.Watermark</class> <params> <param name="source" value="/path/in/servlet/context/logo.gif"></param> <param name="transparency" value="0.8"></param> <param name="quality" value="100"></param> <param name="marginRight" value="5"></param> <param name="marginBottom" value="5"></param> </params> <internal>true</internal> </plugin> --> </plugins> <basePathBuilderImpl>com.ckfinder.connector.configuration.ConfigurationPathBuilder </basePathBuilderImpl> </config></span> </span>
要修改的地方:
<span style="font-size:14px;"><enabled>true</enabled></span>
<span style="font-size:14px;"><pre name="code" class="html"><baseDir></baseDir> <baseURL>/Article/userfiles/</baseURL></span>
1、修改ckeditor 的config.js文件，即ckeditor/config.js
默认配置如下：
/**
* @license Copyright (c) 2003-2013, CKSource - Frederico Knabben. All rights reserved.
* For licensing, see LICENSE.html or http://ckeditor.com/license
*/
CKEDITOR.editorConfig = function( config ) {
// Define changes to default configuration here. For example:
// config.language = 'fr';
// config.uiColor = '#AADC6E';
};
修改为如下：
/**
* @license Copyright (c) 2003-2013, CKSource - Frederico Knabben. All rights
* reserved. For licensing, see LICENSE.html or
* http://ckeditor.com/license
*/
CKEDITOR.editorConfig = function(config) {
// Define changes to default configuration here. For example:
// config.language = 'fr';
// config.uiColor = '#AADC6E';
config.language = 'zh-cn';
config.filebrowserBrowseUrl = 'js/ckfinder/ckfinder.html';
config.filebrowserImageBrowseUrl = 'js/ckfinder/ckfinder.html?Type=Images';
config.filebrowserFlashBrowseUrl = 'js/ckfinder/ckfinder.html?Type=Flash';
config.filebrowserUploadUrl = 'js/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Files';
config.filebrowserImageUploadUrl = 'js/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Images';
config.filebrowserFlashUploadUrl = 'js/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Flash';
config.filebrowserWindowHeight = '50%';// CKFinder浏览窗口高度,默认值70%，也可以赋像素值如：1000
config.filebrowserWindowWidth = '70%';// CKFinder浏览窗口宽度,默认值80%，也可以赋像素值
};
config.filebrowserBrowseUrl = '/Article/js/ckfinder/ckfinder.html'; config.filebrowserImageBrowseUrl = '/Article/js/ckfinder/ckfinder.html?Type=Images'; config.filebrowserFlashBrowseUrl = '/Article/js/ckfinder/ckfinder.html?Type=Flash'; config.filebrowserUploadUrl = '/Article/js/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Files'; config.filebrowserImageUploadUrl = '/Article/js/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Images'; config.filebrowserFlashUploadUrl = '/Article/js/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Flash';
注意：
/Article/js/ckfinder/ckfinder.html 这里是写绝对路径的，Artilce 是项目的上下文，也就是说要将项目的上下文写死在这里，如果是写成相对路的话就会找不到相关的文件从而报404 的错误。
这些是干什么的呢？还有ckeditor/config.js这个文件是什么作用的？
在jsp中将<textarea>替换为ckeditor编辑器
<script type="text/javascript"
src="${pageContext.request.contextPath}/js/ckeditor/ckeditor.js"></script>
<script type="text/javascript"
src="${pageContext.request.contextPath}/js/ckfinder/ckfinder.js"></script>
<pre name="code" class="html"><script type="text/javascript">
$(document).ready(function() {
if (typeof CKEDITOR == 'undefined') {
document.write('加载ckeditor失败！')
} else {
var editor = CKEDITOR.replace('content');
CKFinder.setupCKEditor(editor, '/ckfinder/');
}
});
</script></pre><textarea id="content" name="content"></textarea><p></p><pre>
先开个头，以后待续……
参考如下此处
Java web 项目中使用ckeditor和ckfinder,布布扣,bubuko.com
Java web 项目中使用ckeditor和ckfinder
标签：ckeditor
原文地址：http://blog.csdn.net/jast_zhang/article/details/32333599
