CKEditor3.0.1初步使用
2009-10-26 10:00
148 查看
去http://ckeditor.com/download下载。
然后就是部署！
为了最小，最简单，够用的部署原则。
下了CKEditor3.0.1包后就是一系列的删除。
之后目录如下：
ckHelp.js 是后来添加，源自sample中检测兼容性的js，我将它重命名为ckHelp.js。
它的内容：
if ( typeof console != 'undefined' )
console.log();
if ( window.CKEDITOR )
{
(function()
{
var showCompatibilityMsg = function()
{
var env = CKEDITOR.env;
var html = '<p><strong>Your browser is not compatible with CKEditor.</strong>';
var browsers =
{
gecko : 'Firefox 2.0',
ie : 'Internet Explorer 6.0',
opera : 'Opera 9.5',
webkit : 'Safari 3.0'
};
var alsoBrowsers = '';
for ( var key in env )
{
if ( browsers[ key ] )
{
if ( env[key] )
html += ' CKEditor is compatible with ' + browsers[ key ] + ' or higher.';
else
alsoBrowsers += browsers[ key ] + '+, ';
}
}
alsoBrowsers = alsoBrowsers.replace( //+,([^,]+), $/, '+ and $1' );
html += ' It is also compatible with ' + alsoBrowsers + '.';
html += '</p><p>With non compatible browsers, you should still be able to see and edit the contents (HTML) in a plain text field.</p>';
document.getElementById( 'alerts' ).innerHTML = html;
};
var onload = function()
{
if ( !CKEDITOR.env.isCompatible )
showCompatibilityMsg();
};
if ( window.addEventListener )
window.addEventListener( 'load', onload, false );
else if ( window.attachEvent )
window.attachEvent( 'onload', onload );
})();
}
lang 包中只留简体中文（zh-cn.js ）和英文（en.js）
skins 中使用 office2003 皮肤，当然这个是最大的那个，但是Office的使用方式容易让人接受，其余的两种皮肤都删除掉。
config.js内容如下：如有别的需求，在另行更改。
CKEDITOR.editorConfig = function( config )
{
config.language = 'zh-cn';
config.toolbar =
[
['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
['Link','Unlink','Anchor'],
['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar'],
'/',
['Styles','Format','Font','FontSize'],
['TextColor','BGColor'],
['Maximize', 'ShowBlocks','-','Undo','Redo']
];
config.skin = 'office2003';
config.font_names = '宋体;黑体;隶书;楷体_GB2312;Arial;Times New Roman;Verdana';
config.RemoveFormatTags = 'b,big,code,del,dfn,em,font,i,ins,kbd,q,samp,small,span,strike,strong,sub,sup,tt,u,var' ;
config.RemoveAttributes = 'class,style,lang,width,height,align,hspace,valign';
};
之后就是页面的使用，我使用css样式识别方式，因为它简单。加入 class="ckeditor" 就不用写置换代码了。
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@include file="/common/common.jsp" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="style/oa.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="${pageContext.request.contextPath}/ckeditor/ckeditor.js"</script>
<script type="text/javascript" src="${pageContext.request.contextPath}/ckeditor/ckHelp.js"</script>
<title></title>
</head>
<body>
<table class="tableEdit" style="width:780px;" cellspacing="1" border="0" cellpadding="0">
<tr>
<td>
<textarea class="ckeditor" rows="10" cols="80" id="approveInfo" name="approveInfo" ></textarea>
</td>
</tr>
</table>
<table>
<tr align="center">
<td bgcolor="#EFF3F7">
<input type="submit" name="saveButton" value="保存">
</td>
</tr>
</table>
</form>
</center>
</body>
</html>
然后就是部署！
为了最小，最简单，够用的部署原则。
下了CKEditor3.0.1包后就是一系列的删除。
之后目录如下：
ckHelp.js 是后来添加，源自sample中检测兼容性的js，我将它重命名为ckHelp.js。
它的内容：
if ( typeof console != 'undefined' )
console.log();
if ( window.CKEDITOR )
{
(function()
{
var showCompatibilityMsg = function()
{
var env = CKEDITOR.env;
var html = '<p><strong>Your browser is not compatible with CKEditor.</strong>';
var browsers =
{
gecko : 'Firefox 2.0',
ie : 'Internet Explorer 6.0',
opera : 'Opera 9.5',
webkit : 'Safari 3.0'
};
var alsoBrowsers = '';
for ( var key in env )
{
if ( browsers[ key ] )
{
if ( env[key] )
html += ' CKEditor is compatible with ' + browsers[ key ] + ' or higher.';
else
alsoBrowsers += browsers[ key ] + '+, ';
}
}
alsoBrowsers = alsoBrowsers.replace( //+,([^,]+), $/, '+ and $1' );
html += ' It is also compatible with ' + alsoBrowsers + '.';
html += '</p><p>With non compatible browsers, you should still be able to see and edit the contents (HTML) in a plain text field.</p>';
document.getElementById( 'alerts' ).innerHTML = html;
};
var onload = function()
{
if ( !CKEDITOR.env.isCompatible )
showCompatibilityMsg();
};
if ( window.addEventListener )
window.addEventListener( 'load', onload, false );
else if ( window.attachEvent )
window.attachEvent( 'onload', onload );
})();
}
lang 包中只留简体中文（zh-cn.js ）和英文（en.js）
skins 中使用 office2003 皮肤，当然这个是最大的那个，但是Office的使用方式容易让人接受，其余的两种皮肤都删除掉。
config.js内容如下：如有别的需求，在另行更改。
CKEDITOR.editorConfig = function( config )
{
config.language = 'zh-cn';
config.toolbar =
[
['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
['Link','Unlink','Anchor'],
['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar'],
'/',
['Styles','Format','Font','FontSize'],
['TextColor','BGColor'],
['Maximize', 'ShowBlocks','-','Undo','Redo']
];
config.skin = 'office2003';
config.font_names = '宋体;黑体;隶书;楷体_GB2312;Arial;Times New Roman;Verdana';
config.RemoveFormatTags = 'b,big,code,del,dfn,em,font,i,ins,kbd,q,samp,small,span,strike,strong,sub,sup,tt,u,var' ;
config.RemoveAttributes = 'class,style,lang,width,height,align,hspace,valign';
};
之后就是页面的使用，我使用css样式识别方式，因为它简单。加入 class="ckeditor" 就不用写置换代码了。
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@include file="/common/common.jsp" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="style/oa.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="${pageContext.request.contextPath}/ckeditor/ckeditor.js"</script>
<script type="text/javascript" src="${pageContext.request.contextPath}/ckeditor/ckHelp.js"</script>
<title></title>
</head>
<body>
<table class="tableEdit" style="width:780px;" cellspacing="1" border="0" cellpadding="0">
<tr>
<td>
<textarea class="ckeditor" rows="10" cols="80" id="approveInfo" name="approveInfo" ></textarea>
</td>
</tr>
</table>
<table>
<tr align="center">
<td bgcolor="#EFF3F7">
<input type="submit" name="saveButton" value="保存">
</td>
</tr>
</table>
</form>
</center>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- CKEditor/FCKEditor 使用－CKeditor 3.0.1 快速教程（含插入图片）
- CKEditor/FCKEditor 使用－CKeditor 3.0.1 快速教程（含插入图片）
- CKEditor/FCKEditor 使用 CKeditor 3.0.1 快速使用教程（含插入图片）
- CKEditor/FCKEditor 使用－CKeditor 3.0.1 快速教程（含插入图片）
- [ckeditor系列]CKEditor/FCKEditor 使用 CKeditor 3.0.1 快速使用教程
- CKEditor/FCKEditor 使用－CKeditor 3.0.1 快速教程（含插入图片）
- docker 初步使用
- asp.net下使用CKEditor和CKFinder
- JSP页面使用富文本控件ckeditor自定义样式
- 操作系统实验五：保护模式之初步认知门任务(求助:如何使用其他指令替代或模拟retf指令)
- 【Python】 SQLAlchemy的初步使用
- asp.net ckeditor编辑器的使用方法
- SpringData 学习（2）—— 使用注解替代继承标记接口、初步认识 Repository 接口
- EventBus使用详解(一)——初步使用EventBus
- SQLite3数据库Native C++封装类（Unicode）CppSQLite3U的初步认识与使用
- VC++6.0调试工具使用初步
- JAVA使用JDBC编程的初步认识
- [转]C#中TreeView组件使用方法初步
- Git 使用篇一：初步使用GitHub,下载安装git，并上传项目
- websocket 初步使用经验（python）