一、使用方法:
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方法之前添加
相关推荐
需要注意的细节有:flvPlayer文件夹的内容直接放在ckeditor文件夹里面的plugins文件夹下面。然后配置config.js文件的节点:config.extraPlugins = 'flvPlayer'; 最后配置视频上传路径的URL路径,也就是POST上传文件...
ckeditor5_v19完整版,可直接放在网站根目下使用,工具齐全,注意ckfinder请自行下载并放在网站根目录下。
把plugins复制到ckeditor目录中,注意是ckeditor4. 修改ckeditor/config.js,加入如下代码: CKEDITOR.editorConfig = function( config ) { // Define changes to default configuration here. For example: // ...
注意,如果你想要加载一些数据到编辑器中,例如从数据库中读出数据,只需要把数据放在文本区域(textarea)内就可以了,就像上面的例子一样。在这个例子中,我们已经将文本区域(textarea)命名这“editor1”。当...
ckeditor3.4.1+ckfinder2.0.1(asp.net整合版) 使用方法: 1、在页面中引入ckeditor核心文件ckeditor.js ...注意在控件中加上 class="ckeditor" 。 ckfinder需要引用bin文件夹底下的CKFinder.dll
CKEditor完整版,通过修改ckeditor自带的flash插件,使ckeditor4.4.3支持flv文件播放,下载资源后直接覆盖ckeditor/plugins/flash即可,注意ckeditor版本是否一致。
注意: 該編輯器由Seven修改而來 使用該編輯器時要首先修改config.js的配置,如果要開啟上傳圖片的功能,則修改唯一的那個php文件即可! 用法: 只要給 <textarea> 元件加上 class="ckeditor" 就行了!
该事例主要演示了如何向jsp中嵌入ckeditor编辑器。注意首先要引入ckeditor资源库。上网就可以下载。下载下来之后将其放到webRoot目录下就可以了。
Django CKEditor 注意:django-ckeditor 5对4.5.1的代码向后不兼容。 文件上传支持已移至ckeditor_uploader。 这些网址位于ckeditor_uploader.urls中,而对于文件上传小部件,您必须使用RichTextUploadingField而...
对ckeditor详细配置说明,随着版本更新,会有所变化,请注意!
使用在线生成器生成的CKEditor 5编辑器 该存储库显示了由“生成的CKEditor 5编辑器构建 ... 注意:如果您对浏览器缓存有任何问题,请根据系统使用Ctrl + R或Cmd + R快捷方式。 但是,如果要删除插件或向其
针对JSP中CKEDITOR 上传图片到服务器的功能。注意:如若在本地,代码处要更改COFIG.XML中的BASEDIR路径直接写userfiles/,如若在服务器端则路径为../项目名称/userfiles/即可
ckeditor插件包括使用方法和注意事项。缩减版,可以直接使用
主要介绍了Laravel5.6框架使用CKEditor5相关配置,结合实例形式详细分析了Laravel5.6框架整合CKEditor5编辑器相关操作技巧与注意事项,需要的朋友可以参考下
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 5编辑器该存储库显示了由生成的CKEditor 5编辑器版本快速开始在浏览器中... 注意:如果您对浏览器缓存有任何问题,请根据系统使用Ctrl + R或Cmd + R快捷方式。 但是,如果要删除插件或
开发中的终结版,狼王编辑器,打包下载。...1. 注意ckEditor中config.js 的ckfinder的路径 2.ckfinder中,config.ascx 这里可以配置到 web.config中, 方便统一设置BaseUrl = "~/ckfinder/userfiles/";
使用在线生成器生成的CKEditor 5编辑器该存储库显示了由“生成的CKEditor 5编辑器构建快速开始在... 注意:如果您对浏览器缓存有任何问题,请根据系统使用Ctrl + R或Cmd + R快捷方式。 但是,如果要删除插件或向其
已经集成ckfinder上传功能了(去掉了使用限制),注意提交的内容通不过验证的话先加上 ValidateRequest="false" 例: 调用前,先在页面引用 路径可以自己改。<script type="text/javascript" src="ckeditor/...
使用在线生成器生成的CKEditor 5编辑器 该存储库显示了由生成的CKEditor 5编辑器版本 ... 注意:如果您对浏览器缓存有任何问题,请根据系统使用Ctrl + R或Cmd + R快捷方式。 但是,如果要删除插件或将