ckeditor（怎么为ckeditor添加图像）

本文目录

• 怎么为ckeditor添加图像
• ckeditor怎么配置上传文件
• jsp项目中ckeditor如何实现文件上传
• ckeditor怎么添加行距
• ckeditor上传图片php 网上垃圾信息好多都是复制的没用求解答
• ckeditor 使用方法
• asp.net c#下怎么读取ckeditor里的值并放进数据库里 然后再查看的话用什么途径显示啊

怎么为ckeditor添加图像

　　为ckeditor添加图像的方法
　　1. 到官网下载ckeditor
　　2. 复制到java web项目目录下
　　3. 配置config文件，打开图片上传功能

　　CKEDITOR.editorConfig = function (config) {
　　// 换行方式
　　config.enterMode = CKEDITOR.ENTER_BR;
　　// 当输入：shift+Enter是插入的标签
　　config.shiftEnterMode = CKEDITOR.ENTER_BR;//
　　//图片处理
　　config.pasteFromWordRemoveStyles = true;
　　config.filebrowserImageUploadUrl = “ckUploadImage.action?type=image“;

　　// 去掉ckeditor“保存”按钮
　　config.removePlugins = ’save’;
　　};

　　4. java后台处理代码
　　// 上传图片
　　@Action(value = “/ckUploadImage“, results = { @Result(name = “success“, location = “/upload.jsp“) })
　　public String uploadImages() throws Exception {
　　HttpServletRequest request = ServletActionContext.getRequest();
　　FileOutputStream fos;
　　String webRoot = request.getSession().getServletContext().getRealPath(
　　““);
　　// 获取图片后缀名
　　String partRightType = uploadFileName.substring(uploadFileName
　　.lastIndexOf(“.“));
　　String CKEditorFuncNum = request.getParameter(“CKEditorFuncNum“);
　　// 判断图片的格式
　　if (!ImageFile.checkImageType(partRightType)) {
　　String path = ““;
　　String alt_msg = “Sorry! Image format selection is incorrect, please choose GIF, jpeg, PNG format JPG, picture!“;
　　pringWriterToPage(“《script type=’text/javascript’》window.parent.CKEDITOR.tools.callFunction(“
　　+ CKEditorFuncNum
　　+ “, ’“
　　+ path
　　+ “’ , ’“
　　+ alt_msg
　　+ “’);《/script》“);
　　} else {
　　try {
　　uploadFileName = DateUtils.getDateNoStyle() + “-“
　　+ UUID.randomUUID() + partRightType;
　　String savePath = webRoot + Constants.UPLOAD_IMAGES_PATH;
　　File uploadFilePath = new File(savePath);
　　if (uploadFilePath.exists() == false) {
　　uploadFilePath.mkdirs();
　　System.out.println(“路径不存在,但是已经成功创建了“ + savePath);
　　} else {
　　System.out.println(“路径存在了“ + savePath);
　　}
　　fos = new FileOutputStream(new File(savePath + uploadFileName));
　　FileInputStream fis = new FileInputStream(getUpload());
　　byte buffer = new byte;
　　int len = 0;
　　while ((len = fis.read(buffer)) 》 0) {
　　fos.write(buffer, 0, len);
　　}
　　fos.close();
　　fis.close();
　　} catch (FileNotFoundException foe) {
　　System.out.println(“上传文件为0字节“);
　　}
　　// String path = “

ckeditor怎么配置上传文件

想把java web项目中的fckeditor在线文本器升级到ckeditor，但又不想购买ckfinder来实现文件上传？老k将告诉你一个不用花钱就可以实现ckeditor上传文件的好方法，只要对fckeditor的filemanager做出几处修改，就可以集成fckeditor的文件上传管理器到ckeditor中使用，可以方便在文章中插入图片及flash。 1.在java web项目中集成fckeditor
如果你是把fckeditor升级到ckeditor的话，可以跳过这一步，否则请下载fckeditor的最终版本，然后把fckeditor文件夹复制到java web项目的webroot目录下。当然，你可以直接下载本文的示例项目fckeditro文件上传管理器集成到ckeditor示例项目 (0)来获得最终版本的fckeditor，而且是已经可以集成到ckeditor的fckeditor。 2.把java实现文件上传需要的jar复制到项目lib目录下
下载本文的示例项目后解压，把项目lib目录下的所有jar文件复制到你的项目的lib下面，如果不是通过myeclipse或者eclipse进行粘贴的话，你还需要把这些jar加入到项目编译路径下。
3.重写fckeditor实现文件上传的ConnectorServlet以解决中文乱码的问题
你可以直接到本文示例项目net.laokboke.servlet目录下的ConnectorServlet.java复制到你的项目的src目录下。
4.实现fckeditor的connector.userActionImpl
其实只需要把fckeditor.properties文件复制到你项目的src目录下就可以了 5.配置你的web.xml文件
配置上传文件的servlet，使tomcat启动的时候就加载该servlet，在web.xml中加入以下的代码：
《servlet》
《servlet-name》Connector《/servlet-name》 《servlet-class》
net.laokboke.servlet.ConnectorServlet
《/servlet-class》

《init-param》
《param-name》baseDir《/param-name》 《param-value》/userfiles/《/param-value》 《/init-param》
《init-param》
《param-name》debug《/param-name》 《param-value》true《/param-value》 《/init-param》
《load-on-startup》1《/load-on-startup》
《/servlet》
《servlet-mapping》 《servlet-name》Connector《/servlet-name》
《url-pattern》/fckeditor/connector《/url-pattern》

《/servlet-mapping》
6.修改fckeditor文件上传管理器的若干文件
这些文件全部位于fckeditor\editor\filemanager\browser\default\目录下，你只需要把本文的示例项目中同目录下的所有文件复制替换你的就可以了。 7.修改ckeditor的图像属性窗口js，屏蔽一些不必要的选项
该文件是位于ckeditor\plugins\image\dialogs\目录下的image.js文件，增加了291-293这几行代码。
8.在ckeditor集成fckeditor filemanager
其实就是在使用ckeditor时配置它的filebrowserBrowseUrl和filebrowserUploadUrl等属性，如以下js代码
《script type=“text/javascript“》 CKEDITOR.replace( ’editor1’, {
filebrowserBrowseUrl :
’《%=path %》/fckeditor/editor/filemanager/browser/default/browser.html?Type=Image&Connector=/fckeditor/connector’, filebrowserUploadUrl : ’《%=path %》/fckeditor/connector?Type=Image’
}); 《/script》

jsp项目中ckeditor如何实现文件上传

老k曾经在《ckeditor用fckeditor的文件管理器实现图片上传》一文中提到可以通过移植fckeditor的文件管理器来在jsp项目中实现文件上传，不过fckeditor文件管理器的界面相对比较简单，和ckfinder比起来实在是太寒碜了。同时在《能集成到ckeditor的文件管理器》中老k也列举了多种可以集成到ckeditor的文件管理器，其中corefive filemanager是支持jsp的，所以如果你不能忍受fckeditor文件管理器的界面的话，不妨考虑一下corefive。下面是它的使用方法。1.下载corefive filemanagercorefive filemanager是托管在GitHub的，点击下载它。2.部署到jsp项目解压zip文件后，将filemanager整个目录复制到jsp项目的WebRoot目录下，然后将scripts目录下的filemanager.config.js.default文件重命名为filemanager.config.js。修改该文件中的culture选项值为zh-cn，修改lang选项值为jsp，修改relpath选项值为window.location.protocol + ‘//’ + document.domain + “:” + window.location.port+”/”;3.编译connector的类文件将connectors\jsp目录里的java文件复制到jsp项目的src目录下，并修改config.properties文件中的culture选项为zh-cn4.复制jsp文件上传的apache类库到jsp项目的lib目录下类库包括commons-fileupload-1.2.2.jar、commons-io-2.0.1.jar、commons-lang-2.6.jar和commons-logging-1.1.1.jar等。5.集成到ckeditor中使用在调用ckeditor的时候定义filebrowserBrowseUrl，如下 《script type=“text/javascript“》 CKEDITOR.replace( ’editor1’, { filebrowserBrowseUrl : ’《%=path %》/filemanager/index.html’ }); 《/script》 这样当你点击ckeditor插入图片并浏览服务器的时候，你将得到下面的效果图jsp项目ckeditor实现文件上传更多如果您觉得文章对您有帮助，不妨通过支付宝打赏点碎钱支持一下老K博客吧除非注明，老K博客文章均为原创并采用BY-NC-SA协议进行授权，转载请注明转自

ckeditor怎么添加行距

由于dedecms将ckeditor做了集成，和一般的只针对于ckeditor对config.js修改不同，以后是我在dedecms 5.7版本上添加行间距按钮的方法：
1、下载ckeditor的行距插件包 ；
2.解压到ckeditor/plugins目录下；
3、由于dedecms 5.7自己集成了一个dedepage插件，用来添加ckeditor自定义插件，在/include/ckeditor/plugins/dedepage文件夹下，打开plugin.js文件在最后面添加： requires : [ ’lineheight’ ]，添加完之后的代码如下：
// Register a plugin named “dedepage“.
(function()
{
CKEDITOR.plugins.add( ’dedepage’,
{
init : function( editor )
{
// Register the command.
editor.addCommand( ’dedepage’,{
exec : function( editor )
{
// Create the element that represents a print break.
// alert(’dedepageCmd!’);
editor.insertHtml(“#p#副标题#e#“);
}
});
// alert(’dedepage!’);
// Register the toolbar button.
editor.ui.addButton( ’MyPage’,
{
label : ’插入分页符’,
command : ’dedepage’,
icon: ’images/dedepage.gif’
});
// alert(editor.name);
},
requires : [ ’fakeobjects’ ],
requires : [ ’lineheight’ ]
});
})();

4、修改/include/ckeditor/ckeditor.inc.php文件，在$toolbar[’Basic’] 的最后一行添加元素Code，修改后代码如下：

$toolbar[’Basic’] = array(
array( ’Source’,’-’,’Templates’),
array( ’Cut’,’Copy’,’Paste’,’PasteText’,’PasteFromWord’,’-’,’Print’),
array( ’Undo’,’Redo’,’-’,’Find’,’Replace’,’-’,’SelectAll’,’RemoveFormat’),
array( ’ShowBlocks’),array(’Image’,’Flash’,’Addon’),array(’Maximize’),’/’,
array( ’Bold’,’Italic’,’Underline’,’Strike’,’-’),
array( ’NumberedList’,’BulletedList’,’-’,’Outdent’,’Indent’,’Blockquote’),
array( ’JustifyLeft’,’JustifyCenter’,’JustifyRight’,’JustifyBlock’),
array( ’Table’,’HorizontalRule’,’Smiley’,’SpecialChar’),
array( ’Link’,’Unlink’,’Anchor’),’/’,
array( ’Styles’,’Format’,’Font’,’FontSize’),
array( ’TextColor’, ’BGColor’, ’MyPage’,’MultiPic’),
array( ’lineheight’)
);

至此OK！
ps，简单的自定义行距功能

1.修改该功能的语言，在lineheight（就是行距插件的目录）/lang目录下添加相应的语言包，修改plugin.js文件115行为相应的语言。

2.更改行距的功能按钮，修改plugin.js文件139行。

ckeditor上传图片php 网上垃圾信息好多都是复制的没用求解答

其实简单来说，不管用什么语言，ckeditor上传（不管图片还是其他文件）只要注意三点：
一、config里面设置上传路径
oCKeditor.config.filebrowserBrowseUrl = 对应的文件浏览页面;
oCKeditor.config.filebrowserImageBrowseUrl = 对应的图片浏览页面;
oCKeditor.config.filebrowserFlashBrowseUrl = 对应的flash浏览页面;
oCKeditor.config.filebrowserUploadUrl = 对应的文件上传页面;
oCKeditor.config.filebrowserImageUploadUrl = 对应的图片上传页面;
oCKeditor.config.filebrowserFlashUploadUrl = 对应的flash上传页面;
二、上传后（或浏览已上传文件并选择后）的文件参数的回传
ckeditor在提交上传时会自动提交一个CKEditorFuncNum的参数，这是ckeditor的回传函数排序号，可以通过window.parent.oCKeditor.tools.callFunction( funcNum, fileUrl, data )回传文件路径和附件信息（data包括错误码），这些可以在上传页面通过输出javascript代码实现。
当然，如果你不满足仅仅将文件参数回传给ckeditor,你可以额外增加其他代码，或通过前置定义重定义ckeditor的回传函数，代码可参考如下：
var oCKeditor = CKEDITOR.replace(editorName(你定义的ckeditor的名称）);
oCKeditor.on( ’instanceReady’, function( event )
{
var editor = event.editor;
setTimeout( function()
{
if ( !editor.element )
{
setTimeout( arguments.callee, 100 );
return;
}
event.removeListener( ’instanceReady’, this.callee );
if ( editor.name == editorName(你定义的ckeditor的名称） )
{
var bFilebrowserFn = editor._.filebrowserFn;
var setUploadFileck=function(a,b){CKEDITOR.tools.callFunction(bFilebrowserFn, a, b);此处可编写自定义文件上传后页面交互，可将文件路径提交给某一input};
editor._.filebrowserFn = CKEDITOR.tools.addFunction( setUploadFileck, editor );
}
}, 0 );
}, null, null, 9999);
三、就是页面编码问题，防止上传后中文文件名出现乱码，这个我就不累述啦。

希望对你有所帮助。

ckeditor 使用方法

cheditor与ckfinder的集成使用
1，将ckeditor解压打开，打开_Samples，将ckeditor文件夹拷贝项目中的根目录下，把bin放在根目录下

2，将ckfinder解压，ckfinder文件夹拷贝项目中的根目录下，把bin放在根目录下，把_sample，_source，help文件夹删除掉，（注：没有用）

3，在ckeditor文件下找到config.js 打开，找到
在CKEDITOR.editorCongig=function(config)
{
//填写以下内容，图片，flash路径
config.uiColor = ’#F7F8F9’
config.scayt_autoStartup = false
config.language = ’zh-cn’; //中文
config.filebrowserBrowseUrl = ’ckfinder/ckfinder.html’;
config.filebrowserImageBrowseUrl = ’ckfinder/ckfinder.html?Type=Images’;
config.filebrowserFlashBrowseUrl = ’ckfinder/ckfinder.html?Type=Flash’;
config.filebrowserUploadUrl = ’ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Files’;
config.filebrowserImageUploadUrl = ’ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Images’;
config.filebrowserFlashUploadUrl = ’ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Flash’;
}；

4，在ckfinder文件下找到config.ascx文件，打开
1)把public overrider bool ChekcAuthentication(){return false;改为：return true;}
2)public overrider void SetConfig(){BaseUrl = “~/ckfinder/userfiles/“;}

5，在页面中head标签内写入：
《script type=“text/javascript“ src=“ckeditor/ckeditor.js“ 》《/script》
《script type=“text/javascript“ src=“ckfinder/ckfinder.js“》《/script》
如果有母版页，在母版页中写
--注：单纯的配置，6,7可以不要，但是一旦要入数据库中，就要配置6.7步骤

6，在Default.aspx页面中，写入《%@Page ValidateRequest=“false“%》

7,在web.config文件中，在system.web下写 《

asp.net c#下怎么读取ckeditor里的值并放进数据库里 然后再查看的话用什么途径显示啊

//前台设置文本框为ckeditor
《script src=“../yeditor/ckeditor.js“ type=“text/javascript“》《/script》
《script src=“../yfinder/ckfinder.js“ type=“text/javascript“》《/script》
《asp:TextBox ID=“txtcontents“ runat=“server“ CssClass=“ckeditor“ TextMode=“MultiLine“》《/asp:TextBox》

//后台读取 前台ckeditor文本框

string ss = this.txtcontents.Text;

//后台给前台ckeditor文本框赋值

this.txtcontents.Text=从数据库中取到的数据;