织梦ueditor整合

下载编辑器 -> 上传到织梦目录 -> 修改织梦配置文件 -> 创建编辑器配置文件 -> 在后台应用。

下面是详细的图文步骤说明。

第一步：下载UEditor编辑器

1. 访问官网：打开百度UEditor的官方GitHub仓库：https://github.com/fex-team/ueditor
2. 选择版本：
   • 开发版：包含源码，适合二次开发，文件较大。
   • 发布版/最小版：已经编译和压缩，文件较小，推荐直接使用。
   • 对于织梦整合,我们通常使用 发布版 即可，下载 ueditor-1.4.3.3-release-utf8-php.zip (这是一个较新的稳定版本，请根据需要选择最新稳定版)。
3. 下载并解压：将下载的压缩包解压，你会得到一个名为 ueditor 的文件夹。

第二步：上传编辑器文件到织梦服务器

1. 定位目录：登录你的网站FTP或使用主机文件管理器，找到织梦的根目录，通常是 。

2. 创建目录：在根目录下创建一个名为 ueditor 的文件夹。

3. 上传文件：将第一步解压得到的 ueditor 文件夹内的所有文件和文件夹，全部上传到你刚刚在织梦根目录下创建的 /ueditor/ 文件夹中。

   目录结构应该是这样的：

   /你的网站根目录/
   ├── /dede/               // 织梦后台目录
   ├── /include/            // 织梦核心文件
   ├── /templets/           // 织梦模板目录
   ├── /ueditor/            // <-- UEditor编辑器文件
   │   ├── config.json      // <-- UEditor的配置文件（重要）
   │   ├── dialogs/         // 弹出窗口目录
   │   ├── lang/            // 语言包目录
   │   ├── php/             // 服务端处理程序目录
   │   ├── themes/          // 编辑器主题目录
   │   ├── ueditor.config.js // 编辑器初始化配置
   │   ├── ueditor.all.js   // 编辑器核心代码
   │   └── ... (其他文件)
   ├── index.php
   └── ...

第三步：修改织梦核心配置文件

这是最关键的一步,目的是让织梦在调用编辑器时，能找到并加载我们上传的UEditor。

1. 找到文件：在织梦根目录的 /include/ 文件夹中，找到名为 inc_archives_functions.php 的文件。

2. 编辑文件：用代码编辑器（如 VS Code, Sublime Text, Notepad++）打开这个文件。

3. 定位代码：在文件中搜索 GetEditor 函数，这个函数就是织梦用来生成编辑器的。

4. 修改代码：找到类似下面的代码段（不同版本织梦代码可能略有差异，但核心逻辑一致）：

   // 在 inc_archives_functions.php 文件中
   function GetEditor($fname,$nheight="350",$etype="Basic",$gtype=""){
       global $cuserLogin,$cfg_uploader;
       if($gtype==""){
           $gtype = $GLOBALS['cfg_html_editor'];
       }
       if($gtype=='ueditor')
       {
           $str = "<script type=\"text/javascript\" charset=\"utf-8\" src=\"/ueditor/ueditor.config.js\"></script>\r\n";
           $str .= "<script type=\"text/javascript\" charset=\"utf-8\" src=\"/ueditor/ueditor.all.js\"></script>\r\n";
           // 注意：这里引入了织梦自己的PHP配置文件
           $str .= "<script type=\"text/javascript\" src=\"/ueditor/php/config.php\"></script>\r\n";
           $str .= "<textarea name=\"{$fname}\" id=\"{$fname}\" style=\"width:100%;height:{$nheight}px;\"></textarea>\r\n";
           $str .= "<script type=\"text/javascript\">\r\n";
           $str .= "    var ue = UE.getEditor('{$fname}');\r\n";
           $str .= "</script>\r\n";
       }
       else // 默认使用ckeditor
       {
           // ... 原来的ckeditor代码 ...
       }
       return $str;
   }

5. 代码解释与修改：

   • 这段代码默认已经包含了UEditor的整合逻辑,但可能路径不正确，你需要确保 /ueditor/ 的路径是正确的，与你的上传目录一致。
   • 最重要的一行是：$str .= "<script type=\"text/javascript\" src=\"/ueditor/php/config.php\"></script>\r\n";，这行代码会加载一个由织梦生成的PHP配置文件，用来传递一些织梦相关的变量（如网站路径、上传目录等）给UEditor。

第四步：创建织梦的UEditor配置文件

这个PHP文件的作用是动态生成JavaScript代码,告诉UEditor在织梦环境中如何工作（比如上传文件保存到哪里）。

1. 找到文件：在 /ueditor/php/ 目录下，找到 config.php 文件。

2. 编辑文件：用代码编辑器打开它。

3. 修改配置：找到 config.json 的路径定义，并确保它指向正确的位置。

   // 在 /ueditor/php/config.php 文件中
   <?php
   /**
    * 配置文件
    * 所有系统级别的配置项放在这里
    */
   $config = json_decode(preg_replace("/\/\*[\s\S]+?\*\//", "", file_get_contents("config.json")), true);
   // 服务器端保存路径
   $config['imageUrlPrefix'] = "http://你的域名.com"; // !!! 修改这里，改成你的网站域名
   $config['imagePathFormat'] = "/uploads/{yyyy}{mm}{dd}/{time}{rand:6}"; // !!! 修改这里，改成你想要的上传路径
   // ... 其他配置 ...
   // 输出配置
   header('Content-Type: application/javascript');
   echo 'window.UEDITOR_CONFIG = ' . json_encode($config) . ';';
   ?>

4. 关键配置项修改：

   • $config['imageUrlPrefix']: 必须修改，将 http://你的域名.com 替换成你自己的网站域名，这是图片、附件等在网页中显示时的URL前缀。
   • $config['imagePathFormat']: 建议修改，这是图片在服务器上保存的路径格式。{yyyy}{mm}{dd} 会按日期创建文件夹，{time}{rand:6} 是文件名，保证唯一性。/uploads/ 是织梦默认的上传目录，如果你没改过，就用这个。
   • 你还可以在这里修改其他UEditor的功能,比如是否允许上传视频、文件大小限制等，具体可以参考 config.json 文件里的注释。

第五步：在织梦后台应用编辑器

所有基础工作都做好了,我们需要让织梦在内容编辑页面使用UEditor。

1. 登录织梦后台：进入 dede 目录，登录你的管理后台。

2. 进入系统设置：在左侧菜单中找到 「系统」 -> 「系统基本参数」。

3. 修改默认编辑器：

   • 点击 「系统基本参数」 进入设置页面。
   • 在页面中找到 「核心设置」 这个选项卡。
   • 找到 「Html编辑器」 这一项。
   • 在下拉菜单中,选择 ueditor。
   • 点击页面底部的 「保存」 按钮。

4. 验证效果：

   • 进入任何需要添加内容的页面,「核心」 -> 「新增文档」。
   • 编辑区域,你应该能看到已经切换成了UEditor的界面，而不是原来的CKEditor。
   • 尝试上传一张图片,检查图片是否能成功上传，并且在前台能正常显示。

常见问题与解决方案

1. 问题：图片/附件上传失败，提示 请求上传接口出错。

   • 原因：通常是 /ueditor/php/ 目录下的文件没有执行权限，或者 config.php 中的路径配置错误。
   • 解决：
     • 通过FTP将 /ueditor/php/ 目录下的所有文件（特别是 config.php, Uploader.class.php 等）的权限设置为 755 或 644。
     • 仔细检查第四步中 config.php 的 $config['imageUrlPrefix'] 是否为正确的域名，$config['imagePathFormat'] 的路径是否存在且有写入权限。

2. 问题：编辑器样式错乱，或者部分功能（如表格、代码高亮）不显示。

   • 原因：CSS或JS文件路径加载错误。
   • 解决：检查第三步中 inc_archives_functions.php 文件里的JS引入路径是否正确，确保 /ueditor/ 路径与服务器上的实际路径一致。

3. 问题：想自定义UEditor的工具栏。

   • 解决：编辑 /ueditor/ueditor.config.js 文件，找到 toolbars 配置项，按照官方文档的格式修改你需要的工具按钮。

     // /ueditor/ueditor.config.js
     window.UEDITOR_CONFIG = {
         // ... 其他配置 ...
         toolbars: [
             ['fullscreen', 'source', 'undo', 'redo', 'bold', 'italic', 'underline', 'fontborder', 'backcolor', 'fontsize', 'forecolor', 'removeformat', 'formatmatch', 'autotypeset', 'pasteplain', '|', 'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'link', 'unlink', 'anchor', '|', 'simpleupload', 'insertimage', 'emotion', 'scrawl', 'insertvideo', 'attachment', 'map', 'gmap', 'insertframe', 'insertcode', 'webapp', 'pagebreak', 'template', 'background', '|', 'horizontal', 'date', 'time', 'spechars', 'snapscreen', 'wordimage', '|', 'inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', 'mergecells', 'mergeright', 'mergedown', 'splittocells', 'splittorows', 'splittocols', 'charts', '|', 'print', 'preview', 'searchreplace', 'help', 'drafts']
         ]
         // ... 其他配置 ...
     };

通过以上步骤,你应该就能成功地将UEditor整合到织梦CMS中了，整个过程的核心在于路径的正确配置和文件权限的设置。