Joomla3x-CKEditor4x整合教程

发布时间：2026-6-12 16:13:56

产品功能：粘贴Word文档内容，批量传图，自动上传网络图片，导入Word，导入Excel，导入PowerPoint，导入PDF，

在线演示：UEditor 1x，UEditor Plus，TinyMCE 5，Tinymce 3，TinyMCE 4，FCKEditor 2，CKEditor 3x，CKEditor 4，KindEditor 3，KindEditor 4，wangEditor 3，wangEditor 4，xheditor，

源码编译：ActiveX(x86)，ActiveX(x64)，NativeMessage，macOS，Linux(海光,兆芯)，arm(鲲鹏,飞腾)，mips(龙芯)，LoongArch(龙芯)，

配置教程：增加自定义参数,自定义文件字段名称,配置上传地址,授权码配置,文件名称生成规则,提取图片地址,图片地址增加域名,设置缩略图,图片格式和质量,控件监听端口,自定义头(Headers)，图片数量限制，间距优化，

集成：UEditor 1.5x，CKEditor4.x，CKEditor3.x，FCKEditor 2.x,KindEditor4.x，KindEditor3.x，UMEditor1.x，UEditor 1.x，UEditor 1.4x，wangEditor3，tinymce4x，eWebEditor 9x，eWebEditor 12.x，neditor，tinymce 3x，xhEditor，HDwik 5.0，Drupal 7.34-ckeditor4.x,Joomla-3.4.7-tinymce 4.x,Joomla3x-ckeditor4.x,WordPress,FoonSunCMS,KesionCMS V8,KesionCMS V9,帝国CMS 7.2,帝国CMS 7.5-UEditor,emlog，PHPCMS V9，Z-Blog，Z-Blog-php-ueditor，动易SiteFactory 4.7，动易SiteFactory5.6，动易SiteFactory6.2,dedecms 5.7,dedecms 5.7-ckeditor3x，dedecms 5.7-ueditor,vue-cli-ckeditor5x,vue-cli-ueditor,vue-cli-wangEditor,vue-cli-tinymce5,vue-cli-quill,YouDianCMS 9.4.0,DokuWiki,PHPMyWind-5.6,PbootCMS,question2answer，

视频教程：解决方案，动易SiteFactory 6.2整合,动易SiteFactory 4.7整合,动易SiteFactory 5.6整合,PbootCMS整合,PHPCMS v9整合,dedecms 5.7-ueditor整合,dedecms 5.7-ckeditor3x整合,帝国CMS-ueditor整合,帝国CMS-ckeditor4x整合,dokuwiki整合,Windows控件安装,macOS控件安装,deb控件安装,rpm控件安装，

ASP示例：FCKEditor 2x,CKEditor 3x,CKEditor 4x,CuteEditor 6x,KindEditor 3x,KindEditor 4x,TinyMCE 3x,TinyMCE 4x,TinyMCE 5x,UEditor1.4x,UEditor 1.5x,UMEditor 1x,xhEditor 1x,eWebEditor 9x,wangEditor,NEditor,Summernote，

ASP.NET示例：FCKEditor2x,FCKEditor2x-ext,CKEditor3x,CKEditor3x-ext,CKEditor4x,CuteEditor 6x,KindEditor 3x,KindEditor 4x,TinyMCE 3x,TinyMCE 4x,TinyMCE 5x,UEditor1.4x,UEditor1.5x,UMEditor1x,xhEditor1x,eWebEditor9x,wangEditor,NEditor,Summernote,SiteFactory 5.2,SiteFactory 5.6，

JSP示例：FCKEditor2x,CKEditor3x,CKEditor4x,CuteEditor6x,KindEditor3x,KindEditor4x,TinyMCE3x,TinyMCE4x,TinyMCE5x,UEditor1.4x,UEditor1.5x,UMEditor1x,xhEditor1x,eWebEditor9x,wangEditor,NEditor,Summernote，

PHP示例：FCKEditor2x,CKEditor3x,CKEditor4x,CuteEditor6x,KindEditor3x,KindEditor4x,TinyMCE3x,TinyMCE4x,TinyMCE5x,UEditor1.4x,UEditor1.5x,UMEditor1x,xhEditor1x,wangEditor,NEditor,Summernote,HKwik5.0,WordPress,3.7.1,WordPress插件包,Joomla,3.4.7,Drupal,7.34,帝国CMS,7.x插件包,PHPCMS v9插件包,dedecms,v5.7插件包，dedecms,v5.7-ueditor插件包,DokuWiki插件包,PHPMyWind,5.6插件包,Z-Blog,1.7x插件包,PbootCMS,3.x插件包，

vue-cli示例：vue2-cli-CKEditor5,vue2-cli-UEditor1.4x,vue2-cli-UEditor1.5x,vue3-cli-UEditor1.4x,vue3-cli-UEditor1.5x,vue2-cli-TinyMCE5,vue3-cli-TinyMCE5,vue3-cli-wangEditor,vue2-cli-wangEditor,vue2-cli-KindEditor,vue2-cli-Quill，

互联网应用：Word内容一键发布,如何转载到新浪博客,如何转载到网易LOFTER，如何转载到CSDN博客，如何发布到媒介盒子，如何发布到365编辑器，转载微信公众号图文，如何发布到博客园，

联系我们：QQ：1269085759(技术)，QQ：3040217208(售后)，QQ：1085617561(商务)，微信：13235643658，邮箱：1269085759@qq.com，1085617561@qq.com，qwl@ncmem.com，

资源下载：Joomla 3x,

1.1.1. 添加wordpaster文件夹

路径：/media/wordpaster/

1.1.2. 添加插件文件夹

路径：/plugins/editors/ckeditor/ckeditor/plugins/

1.1.3. 添加到编辑器页面

路径：/plugins/editors/ckeditor/ckeditor.php

初始化插件

代码如下：

//wordpaster begin

$load .= '<link type="text/css" rel="Stylesheet" href="' . JUri::root() . 'media/wordpaster/js/skygqbox.1.3.css" />';

$load .= '<script type="text/javascript" src="' . JUri::root() . 'media/wordpaster/js/json2.min.js" charset="utf-8"></script>';

$load .= '<script type="text/javascript" src="' . JUri::root() . 'media/wordpaster/js/WordPaster-ck4.js" charset="utf-8"></script>';

$load .= '<script type="text/javascript" src="' . JUri::root() . 'media/wordpaster/js/skygqbox.1.3.js" charset="utf-8"></script>';

$load .= "

var pasterMgr = new WordPasterManager();

jQuery(function(){

pasterMgr.Load();//加载控件

});

CKEDITOR.on( 'instanceReady', function( ev ) {pasterMgr.SetEditor(ev.editor);});

//自定义快捷键

CKEDITOR.config.keystrokes = [[CKEDITOR.CTRL + 86/*V*/,'imagepaster']];

</script>";

//wordpaster end

1.1.4. 添加插件

路径：/plugins/

1.1.5. 添加到工具栏

1.1.6. 添加upload.php文件

此文件负责接收控件上传的文件，并保存到/images/upload/目录中

位置：/media/wordpaster/upload.php

代码：

<?php

ob_start();

//201201/10

$timeDir = date("Ym")."/".date("d");

$uploadDir = dirname(__FILE__).'/../../images/upload/'.$timeDir;

//curDomain地址为域名地址

示例：

//http://www.ncmem.com/images/

//http://localhost:81/Joomla_3.4.7/

$curDomain = "http://".$_SERVER["HTTP_HOST"]."/";

//相对路径 [url]http://www.ncmem.com/upload/2012-1-10/[/url]

$relatPath = $curDomain ."images/upload/" . $timeDir . "/";

//自动创建目录。upload/2012-1-10

if(!is_dir($uploadDir))

{

mkdir($uploadDir,0777,true);

}

//如果PHP页面为UTF-8编码，请使用urldecode解码文件名称

//$fileName = urldecode($_FILES['postedFile']['name']);

//如果PHP页面为GB2312编码，则可直接读取文件名称

$fileName = $_FILES['file']['name'];

$tmpName = $_FILES['file']['tmp_name'];

//取文件扩展名jpg,gif,bmp,png

$path_parts = pathinfo($fileName);

$ext = $path_parts["extension"];

$ext = strtolower($ext);//jpg,png,gif,bmp

//只允许上传图片类型的文件

if($ext == "jpg"

|| $ext == "jpeg"

|| $ext == "png"

|| $ext == "gif"

|| $ext == "bmp")

{

//年_月_日_时分秒毫秒.jpg

$saveFileName = $fileName;

//xxx/2011_05_05_091250000.jpg

$savePath = $uploadDir . "/" . $saveFileName;

//另存为新文件名称

if (!move_uploaded_file($tmpName,$savePath))

{

exit('upload error!' . "文件名称：" .$fileName . "保存路径：" . $savePath);

}

//输出图片路径

//$_SERVER['HTTP_HOST'] localhost:81

//$_SERVER['REQUEST_URI'] /FCKEditor2.4.6.1/php/test.php

$reqPath = str_replace("upload.php","",$_SERVER['REQUEST_URI']);

echo $relatPath . $saveFileName;

header('Content-type: text/html; charset=utf-8');

header('Content-Length: ' . ob_get_length());

1.1.7. 修改WordPaster.js中的上传地址

1.1.8. 整合效果如下

常见问题：

1.为什么整合到项目中图片无法上传？

可能原因：可能上传页面有登陆验证，上传时没有添加SESSION信息，导致上传失败。可在上传页面增加SESSION参数。

Joomla3x-CKEditor4x整合教程

1.1.1. 添加wordpaster文件夹

1.1.2. 添加插件文件夹

1.1.3. 添加到编辑器页面

1.1.4. 添加插件

1.1.5. 添加到工具栏

1.1.6. 添加upload.php文件

1.1.7. 修改WordPaster.js中的上传地址

1.1.8. 整合效果如下

文件传输

Word一键粘贴

Web截屏

社交媒体

在线文档

关于