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

<head>
        ...
        <script type="text/javascript" src="/ckeditor/ckeditor.js"></script>
    </head>

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

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

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

<script type="text/javascript">
         CKEDITOR.replace( 'editor');
    </script>

上面这段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();

function uploadfile()
{
global $config;
//判断是否是非法调用
if(empty($_GET['CKEditorFuncNum']))
   mkhtml(1,"","错误的功能调用请求");
$fn=$_GET['CKEditorFuncNum'];
if(!in_array($_GET['type'],$config['type']))
   mkhtml(1,"","错误的文件调用请求");
$type=$_GET['type'];
if(is_uploaded_file($_FILES['upload']['tmp_name']))
{
   //判断上传文件是否允许
   $filearr=pathinfo($_FILES['upload']['name']);
   $filetype=$filearr["extension"];
   if(!in_array($filetype,$config[$type]))
    mkhtml($fn,"","错误的文件类型！");
   //判断文件大小是否符合要求
   if($_FILES['upload']['size']>$config[$type."_size"]*1024)
    mkhtml($fn,"","上传的文件不能超过".$config[$type."_size"]."KB！");
   //$filearr=explode(".",$_FILES['upload']['name']);
   //$filetype=$filearr[count($filearr)-1];
   $file_abso=$config[$type."_dir"]."/".$config['name'].".".$filetype;
   $file_host=$_SERVER['DOCUMENT_ROOT'].$file_abso;
  
   if(move_uploaded_file($_FILES['upload']['tmp_name'],$file_host))
   {
    mkhtml($fn,$config['site_url'].$file_abso,$config['message']);
   }
   else
   {
    mkhtml($fn,"","文件上传失败，请检查上传目录设置和目录读写权限");
   }
}
}
//输出js调用
function mkhtml($fn,$fileurl,$message)
{
$str='<script type="text/javascript">window.parent.CKEDITOR.tools.callFunction('.$fn.', \''.$fileurl.'\', \''.$message.'\');</script>';
exit($str);
}
?>

附上这个upload.php文件的下载地址：http://download.csdn.net/source/1795185

转载于:https://www.cnblogs.com/zhexiao/archive/2012/03/30/2425861.html

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

  1. 关于 Nuxt 集成ueditor的一些坑（包括图片上传）前端部分

    最近公司接了一个项目,里面用到富文本编辑器,刚开始用的是vue-quill-editor,这个编辑器轻量.好用.最重要的是它有专门正对nuxt的版本,很容易配置,可以放心使用,不用担心bug之类的,遇 ...

  2. gin 怎么通过 post 发送结构体_Go Web 框架 Gin 实践12—优化配置结构及实现图片上传...

    Go语言中文网,致力于每日分享编码.开源等知识,欢迎关注我,会有意想不到的收获! 项目地址:https://github.com/EDDYCJY/go-gin-example 如果对你有所帮助,欢迎点 ...

  3. CKEditor的使用，并实现图片上传

    ckeditor是一款富文本编辑器,类似于论坛帖子下边的回复输入框. 1.先要下载相应js文件,点我下载.根据自己的需求选择插件的丰富程度,下载后解压得到一个文件夹,放到webRoot目录下. 2.在 ...

  4. ckeditor ——在图片上传中上传其他文件（word等）

    最近项目中遇到需要用富文本编辑文档,最终以公告的形式在内网中展示,其中一个简单的要求就是要有附件.因为知道ckeditor是有图片的上传了,于是想是不是也可以上传如word,pdf等附件呢.这样内网展 ...

  5. php上传图片限制类型,php,_使用php的图片上传类进行图片上传，总是提示：上传文件时出错 : 未允许类型 。都是默认的配置，php - phpStudy...

    使用php的图片上传类进行图片上传,总是提示:上传文件时出错 : 未允许类型 .都是默认的配置 使用php的图片上传类进行图片上传,总是提示:上传文件时出错 : 未允许类型 .都是默认的配置 $upl ...

  6. ueditor编辑器php上传配置,Ueditor编辑器图片上传自定义配置

    U需朋者说上事是础一发一开程和开数的目前间editor图片上传自新直能分支调二浏页器朋代说,事刚定义配置 不使用自带后遇新是直朋能到分览台配置 1开进架触我法端位画近发行思发们识和移的近.加载Uedi ...

  7. uniapp 图片上传插件使用说明

    插件地址:https://ext.dcloud.net.cn/plugin?id=4589 使用说明 本插件是一个云端上传插件,能够将本地的文件包括图片上传到云存储,ImageX是火山引擎推出的专业图 ...

  8. 测试上传图片晰度+测试多数量图片上传

    你可能会发现,复制进来的图片默认的大小不是你想要的,那么就设置一下它的默认大小吧:在图像的"高级"选项里,点击圈中的那个按钮,就会出现"默认图像大小"的选框.设 ...

  9. CKEditor4.7之使用实现图片上传功能

    步骤 1.下载CKEditor4.7 官网下载CKEditor,基础包,标准包,全包选择其一.地址:https://ckeditor.com/ckeditor-4/download/ 2.将文件CKE ...

最新文章

  1. 简述html 布局的原理,css布局原理与实现-2019年9月4日20时
  2. PC微信逆向：分析微信发送文件call
  3. 【洛谷P3106】[USACO14OPEN]GPS的决斗Dueling GPS's
  4. 洛谷 - P1308 统计单词数(字符串+模拟)
  5. tp连接mysql mysql_thinkphp学习简易教程（二） thinkphp连接读取MySQL数据库
  6. 在win10 或者win7系统下装双系统ubuntu16.04教程
  7. 人生历练必备的十个心态(图)
  8. C++文件读写函数之——fopen、fread和fwrite、fgetc和fputc、fgets和fputs、ftellf和fseek、rewind...
  9. abp.net mysql_ABP .Net Core Entity Framework迁移使用MySql数据库
  10. 做机器学习的是些什么样的人？Kaggle做了一份居委会式的调查
  11. Shiro总结和常见面试题
  12. C语言编程题：平方数
  13. java kvm_KVM环境搭建
  14. BAT布局SDN！Barefoot获阿里巴巴和腾讯2400万美元投资
  15. HTML5 开发工具
  16. java判断所有域名后缀_使用Java的IO操作，提取全世界所有的三位域名后缀
  17. 电脑每次重启总是会进行磁盘检查
  18. 4412运行java_Tiny4412 Android 启动流程
  19. 最老程序员开发实训10--Android---应用介绍页面实现2
  20. 如何用c语言实现ax+by+cz=G所有的正整数的解的输出丫？

热门文章

  1. java多线程阶乘_【java学习记录】11.用多线程实现阶乘的计算过程和结果的读取（thread类ReadThread ）...
  2. 新疆师范大学计算机研究生值得读吗,研究生还值得读吗
  3. hibernate一级缓存_Hibernate缓存–一级缓存
  4. Python字符串replace（）
  5. C语言基础教程之头文件
  6. C++高级教程之多线程
  7. AGC002E(AtCoder1999) Candy Piles（博弈论）
  8. vue $emit子组件传出多个参数，如何在父组件中在接收所有参数的同时添加自定义参数...
  9. Maven系列（一）：Maven简介
  10. java基础----集合操作---实例----List集合的初始化