1、本人使用的CKEditor版本是4.2 在官网上下载个CKeditor http://ckeditor.com/download,如果您只是简单的使用,可以下载一个简洁版
,如果是想功能完善一点,可以下载full版!
这里我下载的是Full Package! 下载之后解压,直接添加到项目中的WebRoot下任意路径下!
2、页面引用:
①引入js:
<script language="javascript" src="<%=request.getContextPath()%>/common/ckeditor/ckeditor.js" type="text/javascript"></script>
我这里把ckeditor放在了WebRoot下的common目录下
②通过一个textarea 替换成编辑器:
<html:hidden property="oper" />
<textarea rows="30" cols="50" name="content"></textarea>
这里隐藏了一个对象字段,对应到数据库保存字段!主要用 于 回显
③js 创建ckeditor对应,引入编辑器:
<script type="text/javascript">
var editor = null;
window.οnlοad=function(){
editor = CKEDITOR.replace('content');//替换textarea
editor.setData(document.getElementsByName("oper")[0].value);//用于回显数据库数据
}
</script>
至此就可以用了
3、上传图片
点击编辑器中图标可以看到插入图片的窗口!可能我只是个新手,但是我还是感觉这块太不好用了只是有个【图片信息】、【链接】、【高级】;想插入图片非常麻烦,这里可以把 隐藏的【上传】功能按钮显示出来,但是具体的上传功能还是要咱们手写;
①把【上传】按钮显示出来:
首先,还是image.js这个文件,搜索“upload”可以找到这一段
id:'Upload',hidden:!0
实际上上传功能被隐藏了,把上面的!0改成false,或者是0,再打开编辑器,就能找到上传功能了。
②完成上传类:
public class UploadAction extends Action{ private FormFile upload; public FormFile getUpload() { return upload; } public void setUpload(FormFile upload) { this.upload = upload; } public ActionForward execute(ActionMapping mapping,ActionForm form, HttpServletRequest request,HttpServletResponse response) throws Exception{ PrintWriter out = response.getWriter(); DiskFileUpload upload = new DiskFileUpload(); upload.setHeaderEncoding("UTF-8"); List list = upload.parseRequest(request); response.setCharacterEncoding("UTF-8"); String realPath = request.getSession().getServletContext().getRealPath("/"); Iterator iter= list.iterator(); while(iter.hasNext()) { String callback = request.getParameter("CKEditorFuncNum"); FileItem element = (FileItem) iter.next(); String fileName = element.getName(); String fileType = fileName.split("\\.")[1]; String fileNamed = java.util.UUID.randomUUID().toString(); fileNamed = fileNamed+"."+fileType; if(!fileType.equals("png")&&!fileType.equals("gif")&&!fileType.equals("jpg")&&!fileType.equals("jpeg")&&!fileType.equals("bmp")){ out.println("<script type=\"text/javascript\">"); out.println("window.parent.CKEDITOR.tools.callFunction(" + callback + ",''," + "'文件格式不正确(必须为.jpg/.gif/.bmp/.png文件)');"); out.println("</script>"); return null; } File file = new File(realPath+"UserFiles/",fileNamed); element.write(file); out.println("<script type=\"text/javascript\">"); out.println("window.parent.CKEDITOR.tools.callFunction(" + callback + ",'" + "UserFiles/"+fileNamed+"','')"); out.println("</script>"); } return null;} }
③ ckeditor 调用上传类:在config.js 中添加
var pathName = window.document.location.pathname;
//获取带"/"的项目名
var projectName = pathName.substring(0, pathName.substr(1).indexOf('/') + 1);
config.filebrowserImageUploadUrl = projectName+'/uploadAction.do'; //固定路径
config.filebrowserUploadUrl=projectName+"/uploadAction.do";
这里pathName指的是项目名!
④ 在ckeditor 字体中加 中文字体 :这是默认没有中文字体; 同样可以在config.js中添加:
config.font_names='宋体/宋体 ;黑体/黑体 ;仿宋/仿宋_GB2312 ;楷体/楷体_GB2312 ;隶书/隶书 ;幼圆/幼圆 ;微软雅黑/微软雅黑 ;'+ config.font_names;
这样就能显示中文字体了
4、添加行距:
①从百度上下载一个 ckeditor 行距包,解压放到ckeditor/plugins目录下。
②在config.js 中添加
config.extraPlugins += (config.extraPlugins ? ',lineheight' : 'lineheight');//行距③(转载)
CKEDITOR.plugins.add('lineheight',
{
lang: ['zh-cn'],
requires : [ 'richcombo', 'styles'],
init : function( editor )
.......
中的requires: ['rechcombo', 'styles'] 改为: requires: ['rechcombo']
Uncaught TypeError: Cannot read property 'editor' of undefined
editor.ui.addRichCombo( comboName,
{label : lang.label,title: lang.panelTitle,className: 'cke_' + (styleType == 'size' ? 'fontSize' : 'font'),panel :{css : editor.skin.editor.css.concat( config.contentsCss ),multiSelect : false,attributes: { 'aria-label': lang.panelTitle }},
init : function(){
.......
css: [CKEDITOR.skin.getPath("editor")].concat( config.contentsCss ),
editor.ui.addRichCombo( comboName,{label : lang.label,title: lang.panelTitle,className: 'cke_' + (styleType == 'size' ? 'fontSize' : 'font'),panel :{css : [CKEDITOR.skin.getPath("editor")].concat( config.contentsCss ),multiSelect : false,attributes: { 'aria-label': lang.panelTitle }},
init : function(){this.startGroup( lang.panelTitle );
editor.ui.addRichCombo( comboName,{label : lang.lineheight.label,title: lang.lineheight.panelTitle,className: 'cke_' + (styleType == 'size' ? 'fontSize' : 'font'),panel :{css : [CKEDITOR.skin.getPath("editor")].concat( config.contentsCss ),multiSelect : false,attributes: { 'aria-label': lang.lineheight.panelTitle }},
init : function(){this.startGroup( lang.lineheight.panelTitle );
CKEDITOR.config.lineheight_sizes = 'normal;1.5em;1.75em;2em;3em;4em;5em;100%;120%;130%;150%;170%;180%;190%;200%;220%;250%;300%;400%;500%';
看到这个配置,你就会发现,这只是这个行距插件的默认配置值 ,那么如果要添加一些行距元素的话,可以在ckeditor的config.js中添加:
CKEDITOR.config.lineheight_sizes = CKEDITOR.config.lineheight_sizes + ’你添加的行距元素‘;