本篇文章向大家介绍了php下ckeditor在线编辑器的使用，感兴趣的小伙伴们可以参考一下本篇文章。
ckeditor是一款在线编辑器，可用于博客、新闻发布等的文本编辑框，利用它可以很方便地实现对文章的排版。它是一款开源工具，可以在我们的网站中使用它增强编辑功能，显得专业和装b。原来它叫fckeditor，后来改名叫ckeiditor，感谢开源软件的开发者，他们是最帅的！
一、下载
官网下载：http://ckeditor.com/download/
解压之后直接放在网站根目录里就可以使用了。
在_samples目录下，可以找到很多做好的样例，这些可以用来学习编辑器的用法。
二、用js的方式调用
官方演示样例：
100db36a723c770d327fc0aef2ce13b193f0f5c25f18dab9d176bd4f6de5d30e
b2386ffb911b14667cb8f0f91ea547a7sample ckeditor site6e916e0f7d1e588d4f442bf645aedb2f
2d18425269525fae6bd15347142b04472cacc6d41bbb37262a98f745aa00fbf09c3bca370b5104690d9ef395f2c5f8d16c04bd5ca3fcae76e30b72ad730ca86d
362a264b75f4879ee0248ff8aec7f9a8
e388a4556c0f65e1904146cc1a846bee
my editor:ff9d32c555bb1d9133a29eb4371c1213
83ee1af48d65e781adc0507eafc447ef<p>initial value.</p>40587128eee8df8f03d0b607fe983014
8019067d09615e43c7904885b5246f0a
ckeditor.replace( 'editor1' ); 2cacc6d41bbb37262a98f745aa00fbf0
94b3e26ee717c64999d7867364b1b4a3
e388a4556c0f65e1904146cc1a846bee
d459aba0527baf7434d808ac6f02b14f
94b3e26ee717c64999d7867364b1b4a3
f5a47148e367a6035fd7a2faa965022e36cc49f0c466276486e50c850b7e495673a6ac4ed44ffec12cee46588e518a5e
我是把ckeditor目录和test.html放在同个目录下，注意第四行原来是src=/ckeditor/ckeditor.js，要把前面的斜杠去掉，改为src=ckeditor/ckeditor.js才能正确指向文件ckeditor.js。这时候不启用wamp服务器也能正确显示ckeditor。
三、用php的方法引入
e388a4556c0f65e1904146cc1a846beetitle:94b3e26ee717c64999d7867364b1b4a3116230e109e9ee8a1a364fb2b7c613b1
6832ecefeb2613418b75c091f6348b61editor('content');?>
9ea2a188514dd40767484158c8dc8794
这样也能引入ckeditor，这时候editor的位置就在中间那段php代码的地方，两种方法都可以，不过我还不明白两种方法有什么区别。
还可以在textarea标签中嵌入ckeditor：
b0f07ee338ed63be67700654b706bfec;
echo $_post[content];
}?>100db36a723c770d327fc0aef2ce13b193f0f5c25f18dab9d176bd4f6de5d30e
b2386ffb911b14667cb8f0f91ea547a7sample ckeditor site6e916e0f7d1e588d4f442bf645aedb2f9c3bca370b5104690d9ef395f2c5f8d16c04bd5ca3fcae76e30b72ad730ca86d
362a264b75f4879ee0248ff8aec7f9a8
e388a4556c0f65e1904146cc1a846bee
my editor:ff9d32c555bb1d9133a29eb4371c1213
9d4b1097ff533c07e208dfc2f023aaa5
4b93b57b97adf0490fddc2e51bf7be28
9da03fed5a48145d55d453a4ea4948c8editor('content');
?>
40587128eee8df8f03d0b607fe983014
94b3e26ee717c64999d7867364b1b4a3
e388a4556c0f65e1904146cc1a846bee
c5c27b99ca0be180105976c2792b7f3e
94b3e26ee717c64999d7867364b1b4a3
f5a47148e367a6035fd7a2faa965022e36cc49f0c466276486e50c850b7e495673a6ac4ed44ffec12cee46588e518a5e
不过这样做有点小问题，
刚刷新页面的时候编辑器里面会出现个小框框，略不爽，开始输入之后它会自动消失，改成这样子就不会了：
<?php
if(!empty($_post["sub"]))
{
echo $_post["title"];
echo "<br>";
echo $_post["content"];
}?><html><head>
<title>sample ckeditor site</title>
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
<script type="text/javascript">
window.onload = function()
{
ckeditor.replace( 'content' ); //content是textarea的名称
};</script></head><body>
<form method="post">
<p>
my editor:<br />
<input type="text" name="title">
<textarea name="content"></textarea>
</p>
<p>
<input type="submit" name="sub"/>
</p>
</form></body></html>
四、配置编辑器
本段摘自网上一片文章，已忘记了原来出处。
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
//工具栏默认是否展开
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,daa520,
006400,40e0d0,0000cd,800080,808080,f00,ff8c00,ffd700,008000,0ff,00f,ee82ee,
a9a9a9,ffa07a,ffa500,ffff00,00ff00,afeeee,add8e6,dda0dd,d3d3d3,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 = '#fffefd'; //可设置参考
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 = '[s|s]*?ec2066b0cbd02d6b752a2aecffbc2dd7]+>)|(]+/>)/gi ); // asp.net code
//当输入：shift+enter时插入的标签
config.shiftentermode = ckeditor.enter_p; //可选：ckeditor.enter_br或ckeditor.enter_p
//可选的表情替代字符 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/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:http://www.example.com/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/')
相关推荐：
thinkphp编辑器扩展类kindeditor使用方法_php教程
php编辑器
以上就是ckeditor 在线编辑器的使用的详细内容。