`
maliqiang
  • 浏览: 1959 次
最近访客 更多访客>>
社区版块
存档分类
最新评论

CKeditor的使用以及一些应该注意的问题

阅读更多

一、使用方法:

1、下载ckeditor压缩包,把解压后的ckeditor文件复制到项目的webRoot文件夹小。


 

2、在页面<head>中引入ckeditor核心文件ckeditor.js

<scripttype="text/javas cript"src="ckeditor/ckeditor.js"></script>

<script> 标签用于定义客户端脚本,比如JavaScript。

script 元素既可以包含脚本语句,也可以通过src 属性指向外部脚本文件。

 

3、在使用编辑器的地方插入HTML控件<textarea> 。这是使用class方式实现

<textareaid="TextArea1" cols="20" rows="2"class="ckeditor"></textarea>

 

4、相应的控件替换成编辑器代码 。使用JS替换方式

<scripttype="text/javas cript">
CKEDITOR.replace('TextArea1');

</script>

 

5、配置编辑器

ckeditor的配置都集中在ckeditor/config.js 文件中,下面是一些常用的配置参数:

// 界面语言,默认为 'en'

config.language = 'zh-cn';

// 设置宽高

config.width = 400;

config.height = 400;

// 编辑器样式,有三种:'kama'(默认)、'office2003'、'v2'

config.skin = 'v2';

// 背景颜色

config.uiColor = '#FFF';

// 工具栏(基础'Basic'、全能'Full'、自定义)plugins/toolbar/plugin.js

config.toolbar = 'Basic';

config.toolbar = 'Full';

这将配合:
config.toolbar_Full = [
['Source','-','Save','NewPage','Preview','-','Templates'],
['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print', 'SpellChecker','Scayt'],
['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button','ImageButton', 'HiddenField'],
'/',
['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
['Link','Unlink','Anchor'],
['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],
'/',
['Styles','Format','Font','FontSize'],
['TextColor','BGColor']
];

//工具栏是否可以被收缩
config.toolbarCanCollapse = true;

//工具栏的位置
config.toolbarLocation = 'top';//可选:bottom

// 取消 “拖拽以改变尺寸”功能 plugins/resize/plugin.js
config.resize_enabled = false;

//改变大小的最大高度

config.resize_maxHeight = 3000;

//改变大小的最大宽度
config.resize_maxWidth = 3000;

//改变大小的最小高度
config.resize_minHeight = 250;

//改变大小的最小宽度
config.resize_minWidth = 750;

//设置HTML文档类型
config.docType = '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd%22';

//是否使用完整的html编辑模式如使用,其源码将包含:<html><body></body></html>等标签
config.fullPage = false;

// 设置是使用绝对目录还是相对目录,为空为相对目录
config.baseHref = ''

//所需要添加的CSS文件在此添加 可使用相对路径和网站的绝对路径
config.contentsCss = './contents.css';

//文字方向
config.contentsLangDirection = 'rtl'; //从左到右

//CKeditor的配置文件 若不想配置 留空即可
CKEDITOR.replace( 'myfiled', { customConfig : './config.js' } );

//界面编辑框的背景色plugins/dialog/plugin.js
config.dialog_backgroundCoverColor = '#fffefd'; //可设置参考
config.dialog_backgroundCoverColor = 'white' //默认

//是否开启 图片和表格 的改变大小的功能 config.disableObjectResizing = true;
config.disableObjectResizing = false //默认为开启

//默认的字体名plugins/font/plugin.js
config.font_defaultLabel = 'Arial';

//字体编辑时的字符集 可以添加常用的中文字符:宋体、楷体、黑体等 plugins/font/plugin.js
config.font_names = 'Arial;Times New Roman;Verdana';

//文字的默认式样plugins/font/plugin.js
config.font_style = {
element : 'span',
styles : { 'font-family' : '#(family)' },
overrides : [ { element : 'font', attributes : { 'face' : null } } ]
};

//字体默认大小plugins/font/plugin.js
config.fontSize_defaultLabel = '12px';

//字体编辑时可选的字体大小plugins/font/plugin.js
config.fontSize_sizes='8/8px;9/9px;10/10px;11/11px;12/12px;14/14px;16/16px;18/18px;20/20px;22/22px;24/24px;26/26px;28/28px;36/36px;48/48px;72/72px'

//设置字体大小时 使用的式样plugins/font/plugin.js
config.fontSize_style = {
element : 'span',
styles : { 'font-size' : '#(size)' },
overrides : [ { element : 'font', attributes : { 'size' : null } } ]
};

//是否强制复制来的内容去除格式plugins/pastetext/plugin.js
config.forcePasteAsPlainText =false //不去除

//当执行“新建”命令时,编辑器中的内容 plugins/newpage/plugin.js
config.newpage_html = '';

//当从word里复制文字进来时,是否进行文字的格式化去除 plugins/pastefromword/plugin.js
config.pasteFromWordIgnoreFontFace = true; //默认为忽略格式

//从word中粘贴内容时是否移除格式 plugins/pastefromword/plugin.js
config.pasteFromWordRemoveStyle = false;

//可选的表情替代字符plugins/smiley/plugin.js.
config.smiley_descriptions = [
':)', ':(', ';)', ':D', ':/', ':P',
'', '', '', '', '', '',
'', ';(', '', '', '', '',
'', ':kiss', '' ];

//对应的表情图片plugins/smiley/plugin.js
config.smiley_images = [
'regular_smile.gif','sad_smile.gif','wink_smile.gif','teeth_smile.gif','confused_smile.gif','tounge_smile.gif',
'embaressed_smile.gif','omg_smile.gif','whatchutalkingabout_smile.gif','angry_smile.gif','angel_smile.gif','shades_smile.gif',
'devil_smile.gif','cry_smile.gif','lightbulb.gif','thumbs_down.gif','thumbs_up.gif','heart.gif',
'broken_heart.gif','kiss.gif','envelope.gif'];

//表情的地址plugins/smiley/plugin.js
config.smiley_path = 'plugins/smiley/images/';

//默认使用的模板plugins/templates/plugin.js.
config.templates = 'default';

//当使用模板时,“编辑内容将被替换”框是否选中plugins/templates/plugin.js
config.templates_replaceContent = true;

//主题
config.theme = 'default';

//撤销的记录步数plugins/undo/plugin.js
config.undoStackSize =20;


//示例2:工具栏为自定义类型
CKEDITOR.replace( 'editor1',
{
toolbar :
[
//加粗 斜体, 下划线穿过线 下标字 上标字
['Bold','Italic','Underline','Strike','Subscript','Superscript'],
//数字列表实体列表减小缩进 增大缩进
['NumberedList','BulletedList','-','Outdent','Indent'],
//左对齐居中对齐右对齐两端对齐
['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
//超链接 取消超链接 锚点
['Link','Unlink','Anchor'],
//图片 flash 表格 水平线表情 特殊字符 分页符
['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],
'/',
//样式 格式 字体字体大小
['Styles','Format','Font','FontSize'],
//文本颜色 背景颜色
['TextColor','BGColor'],
//全屏显示区块
['Maximize', 'ShowBlocks','-']
]
}
);

6、在页面即时配置编辑器

可通过<script>CKEDITOR.replace(“textarea的ID”,{属性})</script>

如配置编辑器大小,只需<script>CKEDITOR.replace(“textarea的ID”,{width:’300px’height:’100px’})</script>

 

二、注意事项

1、在使用Ajax提交表单时,要在调用Ajax方法之前添加

for(instanceinCKEDITOR.instances){CKEDITOR.instances[instance].updateElement();}
以防止在servlet中获取不到CKeditor的值。
2、注意CKEDITOR.replace的书写,ckeditor必须是大写才行。

 

分享到:
评论

相关推荐

    ckeditor配置上传视频

    需要注意的细节有:flvPlayer文件夹的内容直接放在ckeditor文件夹里面的plugins文件夹下面。然后配置config.js文件的节点:config.extraPlugins = 'flvPlayer'; 最后配置视频上传路径的URL路径,也就是POST上传文件...

    ckeditor5_v19完整版

    ckeditor5_v19完整版,可直接放在网站根目下使用,工具齐全,注意ckfinder请自行下载并放在网站根目录下。

    ckeditor 4代码插件

    把plugins复制到ckeditor目录中,注意是ckeditor4. 修改ckeditor/config.js,加入如下代码: CKEDITOR.editorConfig = function( config ) { // Define changes to default configuration here. For example: // ...

    ckeditor富文本编辑器

    注意,如果你想要加载一些数据到编辑器中,例如从数据库中读出数据,只需要把数据放在文本区域(textarea)内就可以了,就像上面的例子一样。在这个例子中,我们已经将文本区域(textarea)命名这“editor1”。当...

    ckeditor3.4.1+ckfinder2.0.1(asp.net整合版)

    ckeditor3.4.1+ckfinder2.0.1(asp.net整合版) 使用方法: 1、在页面中引入ckeditor核心文件ckeditor.js ...注意在控件中加上 class="ckeditor" 。 ckfinder需要引用bin文件夹底下的CKFinder.dll

    ckeditor完整版

    CKEditor完整版,通过修改ckeditor自带的flash插件,使ckeditor4.4.3支持flv文件播放,下载资源后直接覆盖ckeditor/plugins/flash即可,注意ckeditor版本是否一致。

    我修改完善的CKeditor編輯器

    注意:  該編輯器由Seven修改而來  使用該編輯器時要首先修改config.js的配置,如果要開啟上傳圖片的功能,則修改唯一的那個php文件即可! 用法:  只要給 &lt;textarea&gt; 元件加上 class="ckeditor" 就行了!

    jsp嵌入ckeditor编辑器的例子

    该事例主要演示了如何向jsp中嵌入ckeditor编辑器。注意首先要引入ckeditor资源库。上网就可以下载。下载下来之后将其放到webRoot目录下就可以了。

    django-ckeditor:Django管理员CKEditor集成

    Django CKEditor 注意:django-ckeditor 5对4.5.1的代码向后不兼容。 文件上传支持已移至ckeditor_uploader。 这些网址位于ckeditor_uploader.urls中,而对于文件上传小部件,您必须使用RichTextUploadingField而...

    ckeditor配置说明

    对ckeditor详细配置说明,随着版本更新,会有所变化,请注意!

    ckeditor5:经典CKEditor

    使用在线生成器生成的CKEditor 5编辑器 该存储库显示了由“生成的CKEditor 5编辑器构建 ... 注意:如果您对浏览器缓存有任何问题,请根据系统使用Ctrl + R或Cmd + R快捷方式。 但是,如果要删除插件或向其

    完美CKEDITOR配置(若在本地,休息COFIG.XML中BASEDIR路径即可)

    针对JSP中CKEDITOR 上传图片到服务器的功能。注意:如若在本地,代码处要更改COFIG.XML中的BASEDIR路径直接写userfiles/,如若在服务器端则路径为../项目名称/userfiles/即可

    html富文本编辑器ckeditor最新版

    ckeditor插件包括使用方法和注意事项。缩减版,可以直接使用

    Laravel5.6框架使用CKEditor5相关配置详解

    主要介绍了Laravel5.6框架使用CKEditor5相关配置,结合实例形式详细分析了Laravel5.6框架整合CKEditor5编辑器相关操作技巧与注意事项,需要的朋友可以参考下

    ext-2.3.0+CKEditor 3.0.1+ckfinder_asp_1.4配置详解及工程源码

    ext-2.3.0+CKEditor 3.0.1+ckfinder_asp_1.4配置详解 一、去http://cksource.com/下载这两个东西 二、去http://www.extjs.com/下载ext-2.3.0 三、将ext-2.3.0、CKEditor 3.0.1、ckfinder_asp_1.4,取出解压后的...

    ckeditor:自定义CKEditor v4

    使用在线生成器生成的CKEditor 5编辑器该存储库显示了由生成的CKEditor 5编辑器版本快速开始在浏览器中... 注意:如果您对浏览器缓存有任何问题,请根据系统使用Ctrl + R或Cmd + R快捷方式。 但是,如果要删除插件或

    Asp.net CKEditor 4.0和CKFinder 2.1 上传文件

    开发中的终结版,狼王编辑器,打包下载。...1. 注意ckEditor中config.js 的ckfinder的路径 2.ckfinder中,config.ascx 这里可以配置到 web.config中, 方便统一设置BaseUrl = "~/ckfinder/userfiles/";

    ckeditor5-custom-build:定制的ckeditor5

    使用在线生成器生成的CKEditor 5编辑器该存储库显示了由“生成的CKEditor 5编辑器构建快速开始在... 注意:如果您对浏览器缓存有任何问题,请根据系统使用Ctrl + R或Cmd + R快捷方式。 但是,如果要删除插件或向其

    ckeditor+ckfinder 编辑器(fckeditor的升级版)

    已经集成ckfinder上传功能了(去掉了使用限制),注意提交的内容通不过验证的话先加上 ValidateRequest="false" 例: 调用前,先在页面引用 路径可以自己改。&lt;script type="text/javascript" src="ckeditor/...

    ckeditor

    使用在线生成器生成的CKEditor 5编辑器 该存储库显示了由生成的CKEditor 5编辑器版本 ... 注意:如果您对浏览器缓存有任何问题,请根据系统使用Ctrl + R或Cmd + R快捷方式。 但是,如果要删除插件或将

Global site tag (gtag.js) - Google Analytics