PHP+CKEditor 3配置详细说明(包括图片上传)

最新推荐文章于 2019-10-28 16:47:41 发布

weixin_30622107

最新推荐文章于 2019-10-28 16:47:41 发布

阅读量133

点赞数

文章标签： php javascript ViewUI

原文链接：http://www.cnblogs.com/zhexiao/archive/2012/03/30/2425861.html

版权

首先，我们要在页面中加入CKEditor的js文件：

其次，在你要插入编辑器的地方插入如下代码：

<textarea name="editor">文本的默认HTML代码</textarea>

其中，"editor"是以后你要传给后台脚本语言的post名，也是js要用到的名称。然后，在该页的最底下插入：

上面这段js代码要在你的页面载入完成后插入，你也可以把它放在windows.onload中。

这样，测试一下，一个简单的编辑器就完成了。

接下来，我们要对我们的编辑器做一配置，配置的方式有很多，为了方便起见，我选择了目录下的config.js文件来进行配置。很多的配置我们都可以使用默认值，在这里，常用的配置如下，如果你想了解全部的配置信息，可以到这里来查看，也可以到CKEditor的官方网站看文档。

//界面的语言配置设置为'zh-cn'即可
config.defaultLanguage = 'en';

//默认的字体名 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.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'

//编辑器的高度
config.height = 200

//界面的现实语言可选择"zh-cn"
config.language = true

//可选界面包
config.skin = 'default';

    //使用的工具栏 plugins/toolbar/plugin.js 当然你也可以使用自己的工具栏
    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.toolbar = 'Buaa'; //选择界面功能
//定义界面工具
config.toolbar_Buaa =
[
    ['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']
];

//编辑器的宽度 plugins/undo/plugin.js
config.width = ""

图片上传

CKEditor的原包中没有包含图片的上传服务器端处理文件，其公司的另一款开源产品：CKFinder做了很好的补充。但是要下载这个源代码再进行配置，虽然方便了很多，但是仅仅为了上传图片，却要使用这么大的整个系统来使用，确实有点大材小用，我花了一个下午的时间，自己用PHP脚本写了一个处理上传文件的脚本代码，没有做更多的安全处理，希望对大家有用。

首先，在你的config.js文件里添加如下代码：

CKEDITOR.editorConfig = function( config )
{
config.filebrowserImageUploadUrl = './upload.php?type=img';
config.filebrowserFlashUploadUrl = './upload.php?type=flash';
};

以上的配置是上传要处理到的文件的地址，你可以根据自己情况进行修改。upload.php文件如下：

<?php
/*
CKEditor_upload.php
monkee
2009-11-15 16:47
*/
$config=array();

$config['type']=array("flash","img"); //上传允许type值

$config['img']=array("jpg","bmp","gif"); //img允许后缀
$config['flash']=array("flv","swf"); //flash允许后缀

$config['flash_size']=200; //上传flash大小上限单位：KB
$config['img_size']=500; //上传img大小上限单位：KB

$config['message']="上传成功"; //上传成功后显示的消息，若为空则不显示

$config['name']=mktime(); //上传后的文件命名规则这里以unix时间戳来命名

$config['flash_dir']="/ckeditor/upload/flash"; //上传flash文件地址采用绝对地址方便upload.php文件放在站内的任何位置后面不加"/"
$config['img_dir']="/ckeditor/upload/img"; //上传img文件地址采用绝对地址采用绝对地址方便upload.php文件放在站内的任何位置后面不加"/"

$config['site_url']=""; //网站的网址这与图片上传后的地址有关最后不加"/" 可留空

//文件上传
uploadfile();