ueditor织梦如何实现图文混排？

织梦默认的编辑器功能比较基础,很多开发者会选择更换为功能更强大的UEditor，这个过程主要分为三个部分：

1. 下载并准备UEditor文件
2. 修改织梦文件，让UEditor“接入”系统
3. 配置和美化UEditor

第一步：下载并准备UEditor文件

1. 下载UEditor：

   • 访问百度UEditor的官方GitHub仓库：https://github.com/fex-team/ueditor
   • 进入 releases 页面，下载一个稳定版本（4.3.3 版本非常经典且稳定）。
   • 下载 ueditor-1.4.3.3-utf8-php.zip 这个压缩包（utf8表示UTF-8编码，php表示包含PHP后端集成文件）。

2. 上传文件到服务器：

   • 解压下载的压缩包,你会得到一个名为 ueditor-1.4.3.3-utf8-php 的文件夹。
   • 将这个文件夹重命名为更具辨识度的名字,ueditor。
   • 通过FTP工具,将这个 ueditor 文件夹上传到你的织梦网站的 根目录 下。

   你的网站目录结构现在应该类似这样：

   /wwwroot/ (你的网站根目录)
   ├── /dede/          (织梦后台目录)
   ├── /include/       (织梦核心文件)
   ├── /templets/      (织梦模板目录)
   ├── /ueditor/       <-- UEditor文件
   │   ├── /dialogs/   (弹窗目录)
   │   ├── /lang/      (语言目录)
   │   ├── /themes/    (主题目录)
   │   ├── /third-party/ (第三方组件)
   │   ├── ueditor.all.js (核心JS文件)
   │   ├── ueditor.config.js (配置文件)
   │   └── ... (其他文件)
   ├── index.php
   └── ...

第二步：修改织梦文件，集成UEditor

这是最关键的一步,我们需要修改织梦的JS和PHP文件，让它在后台内容编辑区域加载UEditor，而不是默认编辑器。

修改JS文件 (include/js/dedeajax2.js)

这个文件是织梦处理AJAX请求的核心,我们需要在其中加入UEditor的初始化代码。

• 文件路径：/include/js/dedeajax2.js

• 修改方法：

  • 用代码编辑器（如VS Code, Sublime Text, Notepad++）打开这个文件。
  • 在文件的最后,添加以下代码：

  // UEditor初始化函数
  function UEditorStart() {
      // 遍历所有class为 "ueditor" 的textarea
      var editors = document.getElementsByTagName('textarea');
      for (var i = 0; i < editors.length; i++) {
          // 如果当前textarea的class包含 "ueditor"，则初始化UEditor
          if (editors[i].className.indexOf("ueditor") > -1) {
              // 实例化编辑器
              // UE.getEditor(editors[i].id); // 如果你的textarea有id，可以用这种方式
              var editor = new UE.ui.Editor({
                  initialFrameHeight: 300, // 设置编辑器高度
                  initialFrameWidth: '100%' // 设置编辑器宽度
              });
              editor.render(editors[i].id); // 将编辑器渲染到指定的textarea上
          }
      }
  }
  // 页面加载完成后，初始化UEditor
  // 如果你的页面是jQuery环境，用 $(document).ready(function(){ UEditorStart(); });
  // 如果是原生JS，用 window.onload = UEditorStart;
  // 织梦通常有自己的加载机制，可以直接调用
  UEditorStart();

修改PHP文件 (include/dede/archives_edit.php 和 include/dede/article_add.php)

这两个文件分别是“文章编辑”和“文章添加”的页面PHP文件，我们需要找到它们调用编辑器的地方，并修改。

• 文件路径：

  • /include/dede/archives_edit.php (修改文章)
  • /include/dede/article_add.php (添加文章)

• 修改方法：

  1. 打开 archives_edit.php 文件。

  2. 搜索 ShowEditor 这个函数，你会找到类似这样的代码：

     $bodyEditor = "<textarea name='body' id='body' style='width:100%;height:400px;visibility:hidden;'>".$body."</textarea>\r\n";
     $bodyEditor .= "<script type=\"text/javascript\" charset=\"utf-8\" src=\"../include/editphp/ckeditor/ckeditor.js\"></script>\r\n";
     $bodyEditor .= "<script type=\"text/javascript\" charset=\"utf-8\">CKEDITOR.replace('body');</script>\r\n";

     (注意：你的文件里可能是 ckeditor，也可能是 kindeditor，或者其他编辑器。)

  3. 将上述代码替换为：

     // UEditor替换默认编辑器
     $bodyEditor = "<textarea name='body' id='body' class=\"ueditor\">".$body."</textarea>\r\n";
     $bodyEditor .= "<script type=\"text/javascript\" charset=\"utf-8\" src=\"/ueditor/ueditor.config.js\"></script>\r\n";
     $bodyEditor .= "<script type=\"text/javascript\" charset=\"utf-8\" src=\"/ueditor/ueditor.all.min.js\"></script>\r\n";
     // 引入语言文件，根据你的后台语言选择
     $bodyEditor .= "<script type=\"text/javascript\" charset=\"utf-8\" src=\"/ueditor/lang/zh-cn/zh-cn.js\"></script>\r\n";

     关键点：

     • <textarea> 标签增加了 class="ueditor"，这是我们在第一步JS中用来识别的标志。
     • 引入了 ueditor.config.js（配置文件）、ueditor.all.min.js（核心文件）和 zh-cn.js（中文语言包）。
     • 路径：这里的路径 /ueditor/ 是相对于网站根目录的，请确保你的上传路径正确。

  4. 对 article_add.php 文件执行完全相同的修改操作。

第三步：配置和美化UEditor

当你进入织梦后台添加或编辑文章时,应该已经能看到UEditor了，接下来进行一些个性化配置。

修改UEditor配置 (ueditor.config.js)

• 文件路径：/ueditor/ueditor.config.js
• 常用配置项：
  • 初始宽高：

    // 初始容器宽度, 默认为1000
    ,initialFrameWidth:1000  // 可以改成 '100%' 以适应容器
    // 初始容器高度, 默认为320
    ,initialFrameHeight:320  // 你可以根据需要调整

  • 显示工具栏：你可以通过配置 toolbars 来决定显示哪些按钮。

    // toolbars: [['source', '|', 'undo', 'redo', '|', 'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|', 'rowspacingtop', 'rowspacingbottom', 'lineheight', '|', 'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|', 'directionalityltr', 'directionalityrtl', 'indent', '|', 'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'touppercase', 'tolowercase', '|', 'link', 'unlink', 'anchor', '|', 'imagenone', 'imageleft', 'imageright', 'imagecenter', '|', 'insertimage', 'emotion', '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']]
    // 简化版工具栏
    ,toolbars: [
        ['source', '|', 'undo', 'redo', '|', 'bold', 'italic', 'underline', 'fontfamily', 'fontsize', '|', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist', 'insertunorderedlist', '|', 'link', 'unlink', 'insertimage', 'insertvideo', '|', 'fullscreen']
    ]

解决图片上传问题（非常重要！）

UEditor默认的上传路径和织梦的附件系统不匹配,需要修改其上传配置，让图片上传到织梦指定的 uploads 目录。

• 文件路径：/uedir/php/config.json
• 修改方法：
  1. 打开 config.json 文件。
  2. 找到 "imageActionName": "uploadimage" 这部分配置。
  3. 修改 "imagePathFormat" 的值，这个值定义了图片上传后的保存路径。

     "imagePathFormat": "/uploads/{yyyy}{mm}{dd}/{time}{rand:6}", 

     • 解释：
       • /uploads/：织梦默认的附件上传目录。请确保你的网站有这个目录且可写。
       • {yyyy}{mm}{dd}：按年月日创建子目录，方便管理。
       • {time}{rand:6}：使用时间戳和6位随机数作为文件名，避免重名。
  4. 同样地,你还需要修改 "scrawlPathFormat" (涂鸦), "snapscreenPathFormat" (截图), "catcherPathFormat" (远程抓取) 等路径，保持一致。

常见问题与排错

1. 编辑器不显示，或显示为空白：

   • 检查JS路径：确保 ueditor.config.js 和 ueditor.all.min.js 的路径正确无误。
   • 检查控制台：按F12打开浏览器开发者工具，查看Console（控制台）是否有红色错误信息，这通常是最直接的错误提示。
   • 检查PHP错误：如果服务器开启了PHP错误显示，可能会在页面上看到错误信息。

2. 图片/视频上传失败：

   • 检查目录权限：确保 uploads 目录及其子目录有写入权限（通常是 755 或 777，但 777 有安全风险，不推荐）。
   • 检查 config.json：确认 "imagePathFormat" 等路径配置是否正确。
   • 检查服务器安全设置：部分服务器会阻止上传 .php 文件，UEditor上传时可能会生成一个 .php 的临时文件，导致被拦截，你可能需要配置服务器的安全策略（如 .htaccess）来允许特定文件上传，或者寻找UEditor的“纯静态”上传方案。

3. 样式错乱：

   • 检查 ueditor.config.js 中的 theme 配置，确保与你的网站风格兼容。
   • 检查织梦模板的CSS是否与UEditor的样式产生冲突。

通过以上步骤,你应该就能成功地在织梦CMS中集成并使用功能强大的百度UEditor了，祝你使用愉快！