当前位置:文档之家› ckeditor完全配置手册

ckeditor完全配置手册

ckeditor完全配置手册
ckeditor完全配置手册

一、使用方法:

1、在页面中引入ckeditor核心文件ckeditor.js

2、在使用编辑器的地方插入HTML控件 如果是https://www.doczj.com/doc/1918697644.html,环境,也可用服务器端控件

注意在控件中加上 class="ckeditor" 。

3、将相应的控件替换成编辑器代码

4、配置编辑器

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

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

https://www.doczj.com/doc/1918697644.html,nguage = '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

//工具栏默认是否展开

config.toolbarStartupExpanded = true;

// 取消“拖拽以改变尺寸”功能 plugins/resize/plugin.js

config.resize_enabled = false;

//改变大小的最大高度

config.resize_maxHeight = 3000;

//改变大小的最大宽度

config.resize_maxWidth = 3000;

//改变大小的最小高度

config.resize_minHeight = 250;

//改变大小的最小宽度

config.resize_minWidth = 750;

// 当提交包含有此编辑器的表单时,是否自动更新元素内的数据config.autoUpdateElement = true;

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

// 编辑器的z-index值

config.baseFloatZIndex = 10000;

//设置快捷键

config.keystrokes = [

[ CKEDITOR.ALT + 121 /*F10*/, 'toolbarFocus' ], //获取焦点

[ CKEDITOR.ALT + 122 /*F11*/, 'elementsPathFocus' ], //元素焦点

[ CKEDITOR.SHIFT + 121 /*F10*/, 'contextMenu' ], //文本菜单

[ CKEDITOR.CTRL + 90 /*Z*/, 'undo' ], //撤销

[ CKEDITOR.CTRL + 89 /*Y*/, 'redo' ], //重做

[ CKEDITOR.CTRL + CKEDITOR.SHIFT + 90 /*Z*/, 'redo' ], //

[ CKEDITOR.CTRL + 76 /*L*/, 'link' ], //链接

[ CKEDITOR.CTRL + 66 /*B*/, 'bold' ], //粗体

[ CKEDITOR.CTRL + 73 /*I*/, 'italic' ], //斜体

[ CKEDITOR.CTRL + 85 /*U*/, 'underline' ], //下划线

[ CKEDITOR.ALT + 109 /*-*/, 'toolbarCollapse' ]

]

//设置快捷键可能与浏览器快捷键冲突 plugins/keystrokes/plugin.js. config.blockedKeystrokes = [

CKEDITOR.CTRL + 66 /*B*/,

CKEDITOR.CTRL + 73 /*I*/,

CKEDITOR.CTRL + 85 /*U*/

]

//设置编辑内元素的背景色的取值 plugins/colorbutton/plugin.js.

config.colorButton_backStyle = {

element : 'span',

styles : { 'background-color' : '#(color)' }

}

//设置前景色的取值 plugins/colorbutton/plugin.js

config.colorButton_colors =

'000,800000,8B4513,2F4F4F,008080,000080,4B0082,696969,B22222,A52A2A,DA A520,

006400,40E0D0,0000CD,800080,808080,F00,FF8C00,FFD700,008000,0FF,00F,E E82EE,

A9A9A9,FFA07A,FFA500,FFFF00,00FF00,AFEEEE,ADD8E6,DDA0DD,D3D3D 3,FFF0F5,

FAEBD7,FFFFE0,F0FFF0,F0FFFF,F0F8FF,E6E6FA,FFF’

//是否在选择颜色时显示“其它颜色”选项 plugins/colorbutton/plugin.js config.colorButton_enableMore = false

//区块的前景色默认值设置 plugins/colorbutton/plugin.js

config.colorButton_foreStyle = {

element : 'span',

styles : { 'color' : '#(color)' }

};

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

//文字方向

config.contentsLangDirection = 'rtl'; //从左到右

//CKeditor的配置文件若不想配置留空即可

CKEDITOR.replace( 'myfiled', { customConfig : './config.js' } );

//界面编辑框的背景色 plugins/dialog/plugin.js

config.dialog_backgroundCoverColor = 'rgb(255, 254, 253)'; //可设置参考config.dialog_backgroundCoverColor = 'white' //默认

//背景的不透明度数值应该在:0.0~1.0 之间 plugins/dialog/plugin.js config.dialog_backgroundCoverOpacity = 0.5

//移动或者改变元素时边框的吸附距离单位:像素 plugins/dialog/plugin.js config.dialog_magnetDistance = 20;

//是否拒绝本地拼写检查和提示默认为拒绝目前仅firefox和safari支持plugins/wysiwygarea/plugin.js.

config.disableNativeSpellChecker = true

//进行表格编辑功能如:添加行或列目前仅firefox支持

plugins/wysiwygarea/plugin.js

config.disableNativeTableHandles = true; //默认为不开启

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

config.disableObjectResizing = false //默认为开启

//设置HTML文档类型

config.docType = '

//是否对编辑区域进行渲染 plugins/editingblock/plugin.js

config.editingBlock = true;

//编辑器中回车产生的标签

config.enterMode = CKEDITOR.ENTER_P; //可选:CKEDITOR.ENTER_BR 或CKEDITOR.ENTER_DIV

//是否使用HTML实体进行输出 plugins/entities/plugin.js

config.entities = true;

//定义更多的实体 plugins/entities/plugin.js

config.entities_additional = '#39'; //其中#代替了&

//是否转换一些难以显示的字符为相应的HTML字符

plugins/entities/plugin.js

config.entities_greek = true;

//是否转换一些拉丁字符为HTML plugins/entities/plugin.js

config.entities_latin = true;

//是否转换一些特殊字符为ASCII字符如"This is Chinese: 汉语."转换为"This is Chinese: 汉语." plugins/entities/plugin.js

config.entities_processNumerical = false;

//添加新组件

config.extraPlugins = 'myplugin'; //非默认仅示例

//使用搜索时的高亮色 plugins/find/plugin.js

config.find_highlight = {

element : 'span',

styles : { 'background-color' : '#ff0', 'color' : '#00f' }

};

//默认的字体名 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/22 px;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/htmldataprocessor/plugin.js config.forceSimpleAmpersand = false;

//对address标签进行格式化 plugins/format/plugin.js

config.format_address = { element : 'address', attributes : { class :

'styledAddress' } };

//对DIV标签自动进行格式化 plugins/format/plugin.js

config.format_div = { element : 'div', attributes : { class : 'normalDiv' } };

//对H1标签自动进行格式化 plugins/format/plugin.js

config.format_h1 = { element : 'h1', attributes : { class : 'contentTitle1' } };

//对H2标签自动进行格式化 plugins/format/plugin.js

config.format_h2 = { element : 'h2', attributes : { class : 'contentTitle2' } };

//对H3标签自动进行格式化 plugins/format/plugin.js

config.format_h1 = { element : 'h3', attributes : { class : 'contentTitle3' } };

//对H4标签自动进行格式化 plugins/format/plugin.js

config.format_h1 = { element : 'h4', attributes : { class : 'contentTitle4' } };

//对H5标签自动进行格式化 plugins/format/plugin.js

config.format_h1 = { element : 'h5', attributes : { class : 'contentTitle5' } };

//对H6标签自动进行格式化 plugins/format/plugin.js

config.format_h1 = { element : 'h6', attributes : { class : 'contentTitle6' } };

//对P标签自动进行格式化 plugins/format/plugin.js

config.format_p = { element : 'p', attributes : { class : 'normalPara' } };

//对PRE标签自动进行格式化 plugins/format/plugin.js

config.format_pre = { element : 'pre', attributes : { class : 'code' } };

//用分号分隔的标签名字在工具栏上显示 plugins/format/plugin.js config.format_tags = 'p;h1;h2;h3;h4;h5;h6;pre;address;div';

//是否使用完整的html编辑模式如使用,其源码将包含:

等标签

config.fullPage = false;

//是否忽略段落中的空字符若不忽略则字符将以“”表示

plugins/wysiwygarea/plugin.js

config.ignoreEmptyParagraph = true;

//在清除图片属性框中的链接属性时是否同时清除两边的标签

plugins/image/plugin.js

config.image_removeLinkByEmptyURL = true;

//一组用逗号分隔的标签名称,显示在左下角的层次嵌套中

plugins/menu/plugin.js.

config.menu_groups

='clipboard,form,tablecell,tablecellproperties,tablerow,tablecolumn,table,anchor ,link,image,flash,checkbox,radio,textfield,hiddenfield,imagebutton,button,select,t extarea';

//显示子菜单时的延迟,单位:ms plugins/menu/plugin.js

config.menu_subMenuDelay = 400;

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

//当从word里复制文字进来时,是否进行文字的格式化去除

plugins/pastefromword/plugin.js

config.pasteFromWordIgnoreFontFace = true; //默认为忽略格式

//是否使用

等标签修饰或者代替从word文档中粘贴过来的内容plugins/pastefromword/plugin.js

config.pasteFromWordKeepsStructure = false;

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

//对应后台语言的类型来对输出的HTML内容进行格式化,默认为空config.protectedSource.push( /<\?[\s\S]*?\?>/g ); // PHP Code

config.protectedSource.push( //g ); // ASP Code

config.protectedSource.push( /(]+>[\s|\S]*?<\/asp:[^\>]+>)|(]+\/>)/gi ); // https://www.doczj.com/doc/1918697644.html, Code

//当输入:shift+Enter时插入的标签

config.shiftEnterMode = CKEDITOR.ENTER_P; //可选:

CKEDITOR.ENTER_BR或CKEDITOR.ENTER_DIV

//可选的表情替代字符 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_smi le.gif','tounge_smile.gif',

'embaressed_smile.gif','omg_smile.gif','whatchutalkingabout_smile.gif','angry_s mile.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/editingblock/plugin.js plugins/editingblock/plugin.js.

config.startupFocus = false;

//载入时,以何种方式编辑源码和所见即所得 "source"和"wysiwyg" plugins/editingblock/plugin.js.

config.startupMode ='wysiwyg';

//载入时,是否显示框体的边框 plugins/showblocks/plugin.js

config.startupOutlineBlocks = false;

//是否载入样式文件 plugins/stylescombo/plugin.js.

config.stylesCombo_stylesSet = 'default';

//以下为可选

config.stylesCombo_stylesSet = 'mystyles';

config.stylesCombo_stylesSet = 'mystyles:/editorstyles/styles.js';

config.stylesCombo_stylesSet =

'mystyles:https://www.doczj.com/doc/1918697644.html,/editorstyles/styles.js';

//起始的索引值

config.tabIndex = 0;

//当用户键入TAB时,编辑器走过的空格数,( ) 当值为0时,焦点将移出编辑框 plugins/tab/plugin.js

config.tabSpaces = 0;

//默认使用的模板 plugins/templates/plugin.js.

config.templates = 'default';

//用逗号分隔的模板文件plugins/templates/plugin.js.

config.templates_files = [ 'plugins/templates/templates/default.js' ]

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

config.templates_replaceContent = true;

//主题

config.theme = 'default';

//撤销的记录步数 plugins/undo/plugin.js

config.undoStackSize =20;

// 在 CKEditor 中集成 CKFinder,注意 ckfinder 的路径选择要正确。

//CKFinder.SetupCKEditor(null, '/ckfinder/');

ckeditor配置

一、使用方法: 1、在页面中引入ckeditor核心文件ckeditor.js 2、在使用编辑器的地方插入HTML控件 如果是https://www.doczj.com/doc/1918697644.html,环境,也可用服务器端控件 注意在控件中加上class="ckeditor" 。 3、将相应的控件替换成编辑器代码 4、配置编辑器 ckeditor的配置都集中在ckeditor/config.js 文件中,下面是一些常用的配置参数: // 界面语言,默认为'en' https://www.doczj.com/doc/1918697644.html,nguage = 'zh-cn'; // 设置宽高 config.width = 400; config.height = 400; // 编辑器样式,有三种:'kama'(默认)、'office2003'、'v2' config.skin = 'v2';

ckeditor配置大全

前言 因为项目中在传输大数据时,需要各种格式的数据,所以在页面选择了使用ckeditor编辑器,我是从官网下载的最新的版本,经过5天的奋战,终于搞定,实现了ckeditor的基本配置和自定义的图片上传功能,善于总结,才能进步嘛,所以写下此篇,希望能帮到需要的人…… 软件准备 Ckeditor: ckeditor_3.6.3 下载地址去官网吧呵呵我懒得写了百度下就可以找到 jquery: jquery-1.2.7 官网下载吧版本无所谓的这个是我用的版本 ajaxfileupload.js jquery文件上传插件官网下载吧 ckeditor配置 1.把ckeditor文件夹放到自己工程的js目录下,然后在自己需要ckeditor的页面引入: 新建一个文本域放置编辑器: 通过js代码把ckeditor编辑器放置到上面的文本域中: var editor = CKEDITOR.replace('content'); 现在访问这个页面,可以看到下图: 文本域已经被编辑器替换。 2.通过config.js来配置编辑器的外观、语言显示、按钮显示等等。 我的配置文件如下:

CKEDITOR.editorConfig = function( config ) { // Define changes to default configuration here. For example: https://www.doczj.com/doc/1918697644.html,nguage = 'zh-cn'; // config.uiColor = '#AADC6E'; // 设置宽高 config.width = 860; config.height = 300; config.skin = 'v2'; //共有3中皮肤可选择:kama(默认)、office2003、v2 // 工具栏(基础'Basic'、全能'Full'、自定义)plugins/toolbar/plugin.js config.toolbar = 'Basic'; config.toolbar = 'Full'; config.toolbar_Full = [ ['Source','-','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','Superscrip t'], ['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'] ];//以上配置自己需要用到的按钮,按钮代码可以去网上找呵呵 }; CKEDITOR.on('dialogDefinition',function (ev) { var dialogName = https://www.doczj.com/doc/1918697644.html,; var dialogDefinition = ev.data.definition; //alert(dialogName); if (dialogName == 'image') {

CKEditor插件开发

CKEditor插件开发 星期二7/27/2010 发布在Tutorial | 评论 From: https://www.doczj.com/doc/1918697644.html,/content/2/ckeditor-plugin-development/根据comment有修改 CKeditor API: https://www.doczj.com/doc/1918697644.html,/ckeditor_api/index.html CKEditor 是目前市场上比较灵活的在线WYSIWYG编辑器之一. 它灵活的设计, 开放的API和详细的文档使得用户扩展功能非常容易. 本文尝试勾勒出CKEditor插件开发的基础,包含了增加按钮,对话框和执行命令. 源代码的结构 在开始之前,感性的认知一下CKEditor源码的组织形式是很有用的. CKEditor固有的一些文件被组织到ckeditor\_source目录里. 核心的功能,诸如DOM元素操作,事件处理,初始化脚本和一些环境设置被包含在ckeditor\_source\core文件夹内. 而其它的一些功能, 比如格式化,拷贝和粘贴, 图片和链接, 都被实现为插件形式放在ckeditor\_source\plugins文件夹内. 每个文件夹表示一个插件. 并且在每个文件夹内, 有一个plugin.js的文件包含了该插件需要用到的代码. 你可以看到源代码被组织成不同的文件. 为了减少HTTP请求, CKEditor把不同的文件压缩并打包到ckeditor.js和ckeditor_basic.js里, 这种方式是运行编辑器的默认方式. 在开发的过程中, 你会希望通过ckedtior_source.js来代替ckeditor.js的执行. 现在, 创建ckeditor\_source\plugins\footnote目录,并在目录里创建plugin.js文件. 配置插件 为了开始开发你的插件, 你需要首先注册你的插件,这样CKEditor才能载入它. 在ckeditor/config.js 里,增加: config.extraPlugins='f ootnote'; 此配置将会告诉编辑器在footnote目录下载入plugin.js. 基本的plugin.js结构如下: CKEDITOR.plugins.add('f ootnote', { init:f unc tion(editor) { //plugin co de goe s here } }); 按钮

CKEDITOR富文本编辑器+AJAX+JQUERY+ListView综合应用

CKEDITOR富文本编辑器+AJAX+JQUERY+ListView综合应用 一、下载安装Ckeditor,并将其整合到项目中 1、什么是CKeditor?为什么要使用它? 我们在做门户网站或者公文系统时,客户经常要求在录入时能够更改字体样式、大小、颜色并具备插入图片的功能。而一般的TextBox无法满足我们的需求,此时就需要使用一种叫做富文本编辑器的东西,这类编辑器有很多,ckeditor就是其中一种,下面介绍其使用方法 2、如何下载 √ 进入官方网站https://www.doczj.com/doc/1918697644.html,/,点击Download进入下载页面 √ CKEDITOR支持多种编程语言及框架(如:java、https://www.doczj.com/doc/1918697644.html,、sharepoint等),我们选择https://www.doczj.com/doc/1918697644.html, √ 下载后解压,简单解释里面内容 3、下面讲如何将CKEditor整合到我们的应用中 √ 新建一个网站

√ 为了代码清晰,新建一个目录,起名JS,方便将ckeditor放到该目录下 √ 将解压后_Samples文件夹中的ckeditor目录拷贝到JS下

√ 新建网页,起名test_ckeditor √ 增加对ckeditor的引用 √ 调用,主要是通过对TextBox的格式化实现富文本的显示效果 √ 为了简便,我们引入JQUERY类库(一种使javascript更容易理解与编写的代码集合),从https://www.doczj.com/doc/1918697644.html,/下载

√ 将下载后的文件放到JS文件夹下 √ 引用jquery(通过将jquery类库拖放到title标签下) √ 页面上添加TextBox文本框(ID:TextBox1) √ 用ckeditor插件格式化TextBox1。在中添加如下代码 (注:以上代码表示当页面的所有元素加载完毕后用CKEDITOR.replace命令对TextBo x1这个文本框进行改造,让其看起来更炫) √ 按F5键预览,即可看到TextBox1被ckeditor格式化后的效果

最新ckeditor_ckfinder整合超完整版

Ckeditor ckfinder2.0.1超强整合完整版实践版 PHP 目录 php开发--使用CKEditor 和CKFinder 实现上传功能 (1) 1. 下载安装CKEditor: (1) 2. 下载安装CKFinder: (2) 3. 在网页中使用CKEditor 和CKFinder: (2) 4. 配置CKFinder进行上传图片,Flash等。 (3) 5.Ckfinder实现普通文件上传 (5) ckfinder中实现文件上传后按当前时间改名 (6) CKEditor 优化配置 (6) 精简Ckeditor (6) 提速:禁用拼写检查 (6) CKFinder 单独使用 (9) ckfinder去掉注册的提示信息 (10) php开发--使用CKEditor 和CKFinder 实现上传功能 1. 下载安装CKEditor: https://www.doczj.com/doc/1918697644.html,/ 解压下载到的CKEditor放到网站的路径中即可 简单配置ckeditor,打开config.js,添加如下内容

2. 下载安装CKFinder: https://www.doczj.com/doc/1918697644.html,/download 解压下载到的CKEditor放到与CKEditor同一目录中即可 3. 在网页中使用CKEditor 和CKFinder: CKEditor 实际是替换一个textarea 标签,所以把textarea放到一个form中,当提交到php 服务器端,使用$_GET['xxx'] 或者$_POST['xxx'] 取得编辑好的数据。注意,因为CKEditor 要替换textarea,所以相应的javascript 代码"CKEDITOR.replace(xxxxxx)" 要放在textarea 的后面。 最简单的方法,直接使用下面的例子修改一下即可。可以在网页中看到CKEditor 了,兴奋吧。

ckeditor与ckfinder整合forJAVA(解决乱码问题)

ckeditor + ckfinder整合for JA V A ---支持文件上传、解决乱码问题 2012-07-18 备注:本人使用的开发工具为eclipse 3.7.0,服务器为:apache-tomcat-7.0.20,jdk版本为:jdk1.6.0_29。本人已使用了字符过滤器,所有的字符都设置为UTF-8。仅供参考。 一.简谈: 前期(2012-06-20)本人根据网上一些资料,以及个人的实现,发布了“ckeditor + ckfinder整合for JA V A(支持文件上传)”文档,收到了很多网友的私信,并进行了交流。在此感谢那些交流过的网友。 网上大多数的资料都是相对比较老的版本,所以本人花了一些时间写下了ckeditor 和ckfinder整合。但由于本人只是简单的应用,所以没有整合的很充分,部分功能没有全部去实现,如文件夹重命名、文件夹新建、上传文件时文件带有汉字等乱码问题没有解决,先作补充如下(请先阅读前期材料)。 二.“错误”的出现 当前期准备完成后,我们开始操作图片、文档、flash的上传了,但是这时你会发现,当上传文件名为汉字,后者新建文件夹,或者重命名文件夹的时候,如果使用中文会出现乱码,导致文件、文件夹无法访问。操作如下: 打开上传页面,选择Files--创建子文件夹,如下图所示:

输入“我们”,如下图所示: 选择“确定”,出现如下情况:

同理,当文件夹重命名带汉字,上传图片时文件名带汉字也会出现类似的情况。 三.问题的解决 先解决方法如下: 找到程序运行的服务器(tomcat),下的server.xml文件 用记事本打开找到如下段落,如下图所示:

CKEditor + CKFinder 配置

CKEditor + CKFinder 配置 2010年04月21日星期三 23:14 CKEditor: 1.解压CKEditor到webRoot目录,在应用页面加载其ckeditor.js ; 2.页面textarea: CKFinder: 3.解压CKFinder到webRoot目录(最好与CKEditor同级),在应用页面加载其ckfinder.js ; 4.页面script:(最好textarea之后) if (typeof CKEDITOR == ‘undefined’) { document.write(’加载CKEditor失败’); } else { var editor = CKEDITOR.replace(’editor1′); CKFinder.SetupCKEditor(editor, ‘../ckeditor/ckfinder/’); //ckfinder 总目录的相对路径. } 整合: (把俩js加载到同一文件其实就已经基本整合好了,还需要修改的配置如下)5.打开\ckfinder\config.php,修改$baseUrl = ‘(上传附件的存放路径)’; //以webRoot为起始的绝对路径,其目录下会自动生成images、flash等子目录;默认是在webRoot的根目录下,注意修改。 至此配置完毕,如果需要自定义界面,可进行以下的高级修改: 6.在ckeditor\config.js中的CKEDITOR.editorConfig里加入以下需要自定义的配置代码: //字体. config.font_names = '宋体;楷体_GB2312;新宋体;黑体;隶书;幼圆;微软雅黑;Arial; Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana;'; //工具按钮. config.toolbar= [ ['Source','-','Save','NewPage','Preview','-','Templates'], ['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print'

富文本编辑器(Ckeditor+Ckfinder)实现富文本编辑和图片文件的上传的配置方法

Ckeditor+Ckfinder在https://www.doczj.com/doc/1918697644.html,实现富文本编辑和图片文件的上传的配置方法 一、下载Ckeditor和Ckfinder。 (一)百度搜索Ckeditor和Ckfinder,点击排名第一的网站。 (二)在其官方网站的download和free trial栏目下载免费的文件包。注意要选择https://www.doczj.com/doc/1918697644.html,

二、解压缩文件并选择加入https://www.doczj.com/doc/1918697644.html,网站所需的文件夹。 1.复制ckeditor的_Samples文件夹下的bin和ckeditor两个文件

2.复制cfinder整个文件夹,并将bin/release文件夹下的dll文件复制到富文本编辑器的bin文件里。 注意这里就有两个dll文件了。 整理的结果如下: 最后将文件夹拷贝到网站根目录下:

二、https://www.doczj.com/doc/1918697644.html,配置ckeditor和ckfinder 1.添加对两个bin文件夹下dll文件的引用 2.在工具箱加入ckeditor控件,选择选择项。在选择工具箱.netFramework组件中浏览选择bin文件夹中的https://www.doczj.com/doc/1918697644.html,.dll文件,工具箱将会多出一个CKEditorControl控件。

控件。

在属性窗口输入都要ckfinder文件浏览和上传功能的管理 页面,包括浏览服务器和上传两个功能。 注意目录一定要正确 FilebrowserBrowseUrl="../fwh_new_bjq/ckfinder/ckfinder.html?Type=Files" FilebrowserFlashBrowseUrl="../fwh_new_bjq/ckfinder/ckfinder.html?Type=Flash" FilebrowserImageBrowseUrl="../fwh_new_bjq/ckfinder/ckfinder.html?Type=Images" FilebrowserFlashUploadUrl="../fwh_new_bjq/ckfinder/core/connector/aspx/connector.aspx?comman d=QuickUpload&type=Flash" FilebrowserImageUploadUrl="../fwh_new_bjq/ckfinder/core/connector/aspx/connector.aspx?comman d=QuickUpload&type=Images" FilebrowserUploadUrl="../fwh_new_bjq/ckfinder/core/connector/aspx/connector.aspx?command=Qui ckUpload&type=Files" 选择/ckfinder/config.ascx文件,修改授权规则和上传目录。

最强悍的FckEditor下载安装配置使用全攻略中文教程

最强悍的FckEditor下载安装配置使用全攻略中文教程 FckEditor配置手册中文教程详细说明 性能 首先,FCKEDITOR的性能是非常好的,用户只需很少的时间就可以载入FCKEDITOR 所需文件.对于其他在线编辑器来说,这几乎是个很难解决的难题,因为在开启编辑器时需要装载太多的文件.比如CUTEEDITOR,虽然功能比FCKEDITOR还要强大,可是,它本身也够庞大了,至于FREETEXTBOX等,其易用性与FCKEDITOR相比,尚有差距,可以说,FCKEDITOR 是一个别具匠心的在线编辑器,它里面融入了作者高深的面向对象的JA V ASCRIPT功力,集易用性与强大的功能与一体. .与编辑器相关的所有图像,脚本以及调用页 .语言文件 .编辑器的皮肤文件 .工具样的贴图等 这些将导致在服务器和客户端间产生相当的流量.如果有许多文件被调用,那么即便每个文件很小.也会让用户等得不耐烦. 装载顺序 从2.0版开始,编辑器按以下步骤装载资源: .基本页(就是编辑器所在页)以及装入编辑器的JS脚本 .用来建立编辑器的脚本 .编辑器的语言和皮肤. .建立编辑器. .载入预置的编辑文档内容. .从现在开始,用户可以阅读和编辑文档了,不过,拖拽支持以及工具栏都是不可用的 .载入编辑器引擎脚本 .建立工具栏,并且可用 .从现在开始,编辑器的所有功能都已经完整 .载入工具栏图标 脚本压缩 在打包任何新版本时,编辑器的JS脚本将会进行预处理.预处理步骤如下: .移除所有代码注释 .移除所有无用的空白字符. .将脚本合并成几个文件 使用上面的方法,我们可以将脚本文件的大小压缩到原来的50%. 压缩后,原始的代码仍然存在于一个名为_Source的文件夹中 如何打包? 编辑器已经自带了打包程序,它位于FCKEDITOR的根文件夹中_PACKAGER文件夹中,名为Fckeditor.Packager.exe,将其复制到FCKEDITOR根文件夹中并运行,即可自动将JS脚本打包并压缩 需要注意的是该程序是一个.NET程序,必须安装.NET FRAMEWORK才能使用

FCKeditor (jsp在线编辑器)配置总结

FCKeditor (jsp在线编辑器)配置总结 折腾了两天,从eWebEditor到CKeditor再到FCKeditor真是费足了劲了! 本人比较喜欢开源的,在网上狂搜一通最后被CKeditor强大的功能和华丽的界面吸引的五体投地~~,高高兴兴的下载了CKeditor,花费了半天的时间终于把CKeditor配置好了,结果一点图片发现连个上传图片的按钮都没有(~~~~(>_<)~~~~ ),原来还需要一个CKfinder插件。于是又兴冲冲的跑到官网上找CKfinder,找到最后却发现就是没有java版的!!!而且这个插件好像是要收费的,哎~真是郁闷死了。 不能用CKeditor那就用FCKeditor吧,呵呵,下面牢骚归正传: 一、首先到官网下载最新版本的 FCKeditor 2.6.5下载地址: https://www.doczj.com/doc/1918697644.html,/project/downloading.php?group_id=75348&filename=FCKeditor_2.6.5.zip FCKeditor.Java 2.6 要下的有fckeditor-java-demo-2.6.war (示例,我觉得下载这一个就够了) fckeditor-java-2.6-src.zip (源文件,如果你想看就下吧) fckeditor-java-2.6-bin.zip (我下了,但没有上) 二、(1)、把FCKeditor 2.6.5解压到WebRoot下 (2)、解压fckeditor-java-2.6-bin.zip,把文件夹中的fckeditor-java-core-2.6.jar以及lib中的所有jar 包拷贝到你的web程序的lib中,fckeditor-java-demo-2.6.war中的slf4j-simple-1.5.8.jar也要拷进去(注意:slf4j-api和slf4j-simple的版本一定要一致)。如果你觉得麻烦,那么就从fckeditor-java-demo-2.5.war 中直接将lib文件夹下的所有jar包复制到项目的lib中,我就是这么做的。 (3)、把fckeditor-java-demo-2.6.war 中的web.xml中的servlet的配置复制到你的web程序中web.xml 中。 ConnectorServlet net.fckeditor.connector.ConnectorServlet 1 ConnectorServlet /fckeditor/editor/filemanager/connectors/* (4)、把fckeditor-java-demo-2.6.war 中的fckeditor.properties复制到你项目的src中 (5)、通过它提供的标签库添加应用:

CKEditor和CKfinder的使用方法

CKEditor和CKfinder的使用方法 一.需要的资源 将上述的包都解压分别的到 一.解压ckfinder中的 二.从解压后的文件中找到WEB-INF/lib中如下的包: 添加到项目的lib包中。 三.将ckeditor-java-core中的添加到开发项目的lib文件夹下。 四.ckfinder\_source\CKFinder for Java\CKFinder\src\main\java下的拷贝到项目的src下。 五.将\ckfinder下的(都是js没有java)放到webroot下。 六.将直接考到webroot下。 七.\ckfinder\WEB-INF下的文件拷贝到开发项目的WEB-INF下。八.修改config.xml

注意:要加项目名的地方有三处,另外两处如下: 九.在web.Xml中添加 ConnectorServlet com.ckfinder.connector.ConnectorServlet XMLConfig /WEB-INF/config.xml debug false 1 ConnectorServlet /ckfinder/core/connector/java/connector.java FileUploadFilter com.ckfinder.connector.FileUploadFilter sessionCookieName JSESSIONID sessionParameterName jsessionid

jeesite 说明文档-3.内置组件的应用

第3章内置组件的应用 作者:ThinkGem 更新日期:2014-01-05 1.常用组件 1.1.布局组件 布局文件配置: / jeesite/src/main/webapp/WEB-INF/decorators.xml 默认布局文件: / jeesite/src/main/webapp/WEB-INF/views/layouts/default.jsp 非公共,自己建立的布局文件: / jeesite/src/main/webapp/WEB-INF/views/模块路径/layouts/布局文件.jsp 使用布局文件: JSP的head里添加:

1.2.用户工具UserUtils.java fns.tld 应用场景:在java文件或jsp页面上,获取当前用户相关信息 1.获取当前用户: 1)UserUtils.getUser(); 2)entity.currentUser() 3)${fns:getUser()} 2.获取当前用户部门: 1)UserUtils.getOfficeList() 2)${fns:getOfficeList()} 3.获取当前用户区域: 1)UserUtils.getAreaList() 2)${fns:getAreaList()} 4.获取当前用户菜单: 1)UserUtils.getMenuList() 2)${fns:getMenuList()} 5.获取当前用户缓存: 1)UserUtils.getCache(key); 2)${fns:getCache(cacheName, defaultValue)} 6.设置当前用户缓存: 1)UserUtils.putCache(key); 1.3.全局缓存CacheUtils.java 应用场景:系统字典 1.设置应用程序缓存:CacheUtils.put(key); 2.获取应用程序缓存:CacheUtils.get(key); 1.4.字典工具DictUtils.java 应用场景:系统全局固定的字典数据,java或jsp中获取字典相关数据。

FCKeditor使用方法详解

FCKeditor使用方法技术详解 作者:深蓝色 QQ:76863715 本文PHPChina论坛首发 本文特为《PHP5和MySQL5 Web开发技术详解》一书编写 1、概述 FCKeditor是目前最优秀的可见即可得网页编辑器之一,它采用JavaScript编写。具备功能强大、配置容易、跨浏览器、支持多种编程语言、开源等特点。它非常流行,互联网上很容易找到相关技术文档,国内许多WEB项目和大型网站均采用了FCKeditor(如百度,阿里巴巴)。本文将通过与PHP相结合,从基本安装到高级的配置循序渐进介绍给广大PHPer。 FCKeditor官方网站:https://www.doczj.com/doc/1918697644.html,/ FCKeditor Wiki:https://www.doczj.com/doc/1918697644.html,/ 2、下载FCKeditor 登录FCKeditor官方站(https://www.doczj.com/doc/1918697644.html,),点击网站右上角“Download”链接。笔者编写本文时,FCKeditor当前最新的稳定版本是2.4.3,因此我们下载此版本的zip压缩格式文档。如图1所示: 图1:下载FCKeditor 2.4.3(最新稳定版)

注意:当点击“FCKeditor_2.4.3.zip”链接后,将跳转到https://www.doczj.com/doc/1918697644.html,网站上自动下载。如果您当前使用Linux或Unix系统,可以点击“FCKeditor_2.4.3.tar.gz”链接下载.tar.gz格式的压缩包。 3、安装FCKeditor 解压“FCKeditor_2.4.3.zip”文档到您的网站目录下,我们先假定您存放FCKeditor和调用脚本存于同一个目录下。目录结构如下图所示: 图2:网站目录结构图 fckeditor目录包含FCKeditor2.4.3程序文件。check.php用于处理表单数据。add_article.php 和add_article_js.html分别是PHP调用FCKeditor和JavaScript调用FCKeditor实例脚本文件。 3.1、用PHP调用FCKeditor 调用FCKeditor必须先载入FCKeditor类文件。具体代码如下。 接下来,我们需要创建FCKeditor实例、指定FCKeditor存放路径和创建(显示)编辑器等。具体代码如下所示(代码一般放在表单内)。 BasePath = './fckeditor/'; // 设置FCKeditor目录地址 $FCKeditor->Width='100%'; //设置显示宽度 $FCKeditor->Height='300px'; //设置显示高度的高度 $oFCKeditor->Create() ; // 创建编辑器 ?> 下面是笔者创建好的实例代码,您可将代码保存为add_article.php。

Drupal7 安装 CKEditor 和 IMCE 模块 及配置方法

习惯了使用所见即所得(Wysiwyg)编辑器, Drupal7安装CKEditor编辑器的方法及配置: 1.首先要下载模块和编辑器 CKEditor Moudle: https://www.doczj.com/doc/1918697644.html,/project/ckeditor IMCE Module: https://www.doczj.com/doc/1918697644.html,/project/imce CKEditor 编辑器: https://www.doczj.com/doc/1918697644.html,/download 2.安装 CKEditor Moudle和IMCE Moudle 将解压的 CKEditor Moudle 和 IMCE Moudle 模块分别放到 sites/all/moudles/ckeditor/ sites/all/moudles/imce/ 然后将CKEditor 编辑器压缩包里面的放到 /sites/all/moudles/ckeditor/ckeditor/中, 如下图 放好后的路径如: /sites/all/moudles/ckeditor/ckeditor/ckeditor.config.js /sites/all/moudles/ckeditor/ckeditor/ckeditor_php5.php /sites/all/moudles/ckeditor/ckeditor/ckeditor_php4.php /sites/all/moudles/ckeditor/ckeditor/ckeditor/plugins/* /sites/all/moudles/ckeditor/ckeditor/ckeditor/_samples/* /sites/all/moudles/ckeditor/ckeditor/ckeditor/_source/*

CKEditor在https://www.doczj.com/doc/1918697644.html,下使用的方法

CKEditor在https://www.doczj.com/doc/1918697644.html,下使用的方法 CKEditor在https://www.doczj.com/doc/1918697644.html,下使用的方法 2010-10-29 10:53:00分类:系统运维 转载自: https://www.doczj.com/doc/1918697644.html,/gagahjt/blog/item/28f474835485fcd5bc 3e1e8f.htmlCKEditor在https://www.doczj.com/doc/1918697644.html,下使用的方法2010-06-21 11:381、下载ckeditor_3.0.1.zip 并解压到ckeditor(在根目录下)。官方网站:CKEditor(Fully functional, open source editor, with source code included)下载地址:CKEditor2、在aspx 页面或者master 模板页<head> 标签中载入ckeditor.js:<!-- 载入CKEditor JS 文件--> <script src="../ckeditor/ckeditor.js" type="text/javascript"></script> 在<body>标签中使用ckeditor:<!-- 使用ckeditor 必须定义class="ckeditor" --> <asp:TextBox id="txtContent" class="ckeditor" TextMode="MultiLine" Text='<%# Bind("info") %>' runat="server"></asp:TextBox> 与其他 .net 控件使用方法相同,设置Text='<%# Bind("info") %>' 可以方便与数据源进行交互。3、config.js

Thinkphp整合ckedirot、ckfinder完成在线编辑功能

网上介绍thinkphp整合ckeditor和ckfinder的文档确实很多,不过那些介绍确实是比较零散的,大部分都是全部操作的一部分(我就被那些文档毒害了,花了很多时间仍然没有成功整合起来),于是我花了一个下午的时间通过原生的方式先摸通它们是怎么整合到一起的,然后在推导一下,成功的整合到了thinkphp中。 言归正传,下面是操作方式,图文并茂的哦,亲~~~~!!! 我使用的是以下这几个版本的工具包,都是刚从官网下载的,应该比较新版(创建时间显示得很清楚) 我那demo的路径是比较深的,童鞋们可以根据自己情况来实际修改 把thinkphp的源码包解压进去,然后搭建一个简单的tp程序 把ckeditor和ckfinder解压进thinkphp中的vendor中

我们先整合editor: 打开ckeditor文件夹中的ckeditor_php5.php [如果你用php4,那就打开ckeditor_php4.php] 找到大概38行public $basePath; 把ckeditor存在的地址(从Apache htdoc开始的真实路径[网站根目录,如果你改了webroot,则从你改了的webroot那里开始])赋值给basepath (有一个找路径的小技巧,直接用浏览器访问到ckeditor的目录,端口号后面的路径就是你的basepath路径啦!!!) 找到同一路径(ckeditor)下的config.js,设置好编辑器的大小、工具栏、字体等配置信息,具体设置可以参考我共享出来的那个demo,里面有。(一坨的东西) 然后在thinphp中调用(贴个图出来算了,代码demo中有)

CKEditor (Toolbar Definition)工具栏自定义配置

CKEditor (Toolbar Definition)工具栏自定义配置 CKEditor中的工具栏默认显示所有功能按钮。出于安全的原因、或者是简化的原因,需要对这个工具栏进行自定义设置。CKEditor工具栏自定义配置非常简单。 编辑ckeditor目录下的的config.js文件,默认的是下面的工具栏代码, 注意工具按钮是分组的,一个name内的大括号就是一个工具按钮分组,items后边是具体的按钮,“/”表示工具栏换行,“-”表示工具图标之间的中隔线“|” (特别说明:config.js中没有下面的代码,默认就是显示全部按钮,但如果对工具栏进行自定义,最好的办法还是把下面的代码全部复制到config.js,然后再删除一个个不需要的按钮) config.toolbar = 'Full'; config.toolbar_Full = [ { name: 'document', items : [ 'Source','-','Save','NewPage','DocProps','Preview','Print','-','Templates' ] }, { name: 'clipboard', items : [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ] }, { name: 'editing', items : [ 'Find','Replace','-','SelectAll','-','SpellChecker', 'Scayt'] }, { name: 'forms', items : [ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField' ] }, '/', { name: 'basicstyles', items : [ 'Bold','Italic','Underline','Strike','Subscript','Superscript','-','RemoveFormat' ] }, { name: 'paragraph', items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote','CreateDiv', '-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','BidiLtr','BidiRtl' ] }, { name: 'links', items : [ 'Link','Unlink','Anchor' ] }, { name: 'insert', items : [ 'Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak','Iframe' ] }, '/', { name: 'styles', items : [ 'Styles','Format','Font','FontSize' ] }, { name: 'colors', items : [ 'TextColor','BGColor' ] }, { name: 'tools', items : [ 'Maximize', 'ShowBlocks','-','About' ] } ]; config.toolbar_Basic = [ ['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink','-','About'] ];

相关主题
文本预览

相关文档 最新文档