dede如何集成ueditor？配置步骤有哪些？-DEDE建站-盈思创科技

核心思路

集成UEditor的核心思路是：“替换”，我们不是在DedeCMS里“调用”UEditor，而是找到DedeCMS原来调用编辑器的代码，把它换成调用UEditor的代码，这主要涉及到两个部分：

（图片来源网络，侵删）

前台模板：修改发布文章、编辑文章等页面的模板文件。
后台程序：修改后台处理表单数据的PHP文件，让它能正确识别和处理UEditor传来的富文本内容。

第一步：下载并准备UEditor

下载UEditor：
- 访问百度UEditor官方下载页面：https://ueditor.baidu.com/website/download.html
- 选择你需要的版本,对于DedeCMS，我们通常选择 PHP版本。
- 下载后你会得到一个压缩包,ueditor1_4_3_3-utf8-php.zip。
解压并放置文件：
- 将下载的压缩包解压。
- 在你的DedeCMS网站根目录下（www 或 public_html），创建一个名为 static 或 assets 的文件夹（如果还没有的话），用于存放静态资源。
- 将解压后的 ueditor 文件夹（或重命名一个更简洁的，如 ueditor）整个复制到 static 文件夹中。
- 最终路径应该是：/static/ueditor/。
修改UEditor配置（可选但推荐）：
- 打开 /static/ueditor/ 目录，找到 ueditor.config.js 文件。
- 修改 UEDITOR_HOME_URL 变量，确保它指向你的UEditor目录。
```
window.UEDITOR_HOME_URL = "/static/ueditor/";
```
- 在 ueditor.config.js 中，你可以根据需要修改默认的编辑器工具栏、内容路径等，如果你想修改上传文件的保存路径，可以找到 imagePath 和 scrawlPath 等配置项进行修改。

第二步：修改前台模板文件

前台模板主要涉及到文章的发布和编辑页面,DedeCMS使用的是 article_add.htm 和 article_edit.htm 模板。

（图片来源网络，侵删）

定位模板文件：
- 登录DedeCMS后台 -> 模板 -> 默认模板管理。
- 找到 article_add.htm (发布文章) 和 article_edit.htm (编辑文章) 文件，点击后面的 修改。
找到并替换编辑器代码：
- 在模板文件中,搜索类似 fck 或 dede 编辑器的代码，通常是一个 textarea 标签，并带有 id 和 name 属性，
```
<textarea name='body' id='body' style='width:100%; height:400px;'></textarea>
```
- 将整个 textarea 标签替换为UEditor的初始化代码。

粘贴UEditor初始化代码：

将以下代码复制并粘贴到你刚才找到的位置,注意保留 name 属性，因为后台程序需要靠它来获取数据。

<!-- 实例化编辑器 -->
<script type="text/javascript">
    UE.getEditor('body', {
        initialFrameHeight: 400,  // 初始高度
        autoHeightEnabled: true,  // 自动高度
        toolbars: [
            ['fullscreen', 'source', '|', 'undo', 'redo', '|',
             'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', '|',
             'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|',
             'link', 'unlink', 'anchor', '|',
             'imagenone', 'imageleft', 'imageright', 'imagecenter', '|',
             'simpleupload', 'insertimage', 'emotion', 'scrawl', 'insertvideo', 'music', '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']
        ]
    });
</script>
<!-- UEditor的textarea输入框，name属性必须和原来的一致 -->
<textarea name="body" id="body" style="width:100%;"></textarea>

关键点：
- id='body'：这个ID必须和 textarea 的 id 一致，用于JS初始化。
- name='body'：这个 name 属性至关重要，后台PHP通过 $_POST['body'] 来获取内容，千万不要改。
- toolbars：这里我提供了一个比较全的工具栏配置，你可以根据需要增减。

添加UEditor的JS和CSS文件：

（图片来源网络，侵删）

在模板文件的 <head> 标签内，添加UEditor的依赖文件。
注意：ueditor.config.js 必须在 ueditor.all.min.js 之前加载。

<!-- 在<head>标签内添加 -->
<script type="text/javascript" src="/static/ueditor/ueditor.config.js"></script>
<script type="text/javascript" src="/static/ueditor/ueditor.all.min.js"></script>
<!-- 如果需要语言包，可以加上 -->
<!-- <script type="text/javascript" src="/static/ueditor/lang/zh-cn/zh-cn.js"></script> -->

保存并清空缓存：
- 保存修改后的模板文件。
- 回到DedeCMS后台首页,点击右上角的 清空系统缓存。

你去前台发布或编辑文章,应该就能看到功能强大的UEditor了。

第三步：修改后台处理文件（关键步骤）

UEditor编辑的内容是HTML格式的,并且会包含一些UEditor特有的标签（如 <p>, <img> 等），DedeCMS默认的处理方式可能会出现问题，比如内容无法正确保存，或者图片路径错误。

定位处理文件：
- 发布文章的处理文件在 /dede/article_add.php。
- 编辑文章的处理文件在 /dede/article_edit.php。
获取逻辑：
- 打开 article_add.php 文件。
- 找到获取文章内容的代码,通常是这样：
```
$body = cn_substr_utf8($body, $cfg_max_body);
$body = HtmlReplace($body, -1); // 这是DedeCMS自带的过滤函数
```
- 我们需要修改它，使其能直接获取UEditor传来的HTML内容，并正确处理图片。
替换为新的处理逻辑：
- 将原来的内容处理代码替换为以下代码,这段代码会先获取HTML内容，然后调用DedeCMS的图片自动本地化函数。
```
// 在 $body = cn_substr_utf8($body, $cfg_max_body); 这一行附近，进行替换
// 获取UEditor传来的HTML内容
$body = isset($_POST['body']) ? $_POST['body'] : '';
// 如果开启了远程图片本地化，则调用处理函数
if($cfg_remote_site=='Y' && $cfg_isremoteimg=='Y'){
    $body = GetRemoteImage($body, $cfg_arcdir);
}
// 保留原有的HTML过滤逻辑，但可以根据需要调整
// $body = HtmlReplace($body, -1);
// 如果UEditor的内容已经足够纯净，可以注释掉或简化HtmlReplace的调用
```
- 代码解释：
  - isset($_POST['body']) ? $_POST['body'] : ''：安全地从POST请求中获取 body 字段的内容。
  - GetRemoteImage($body, $cfg_arcdir)：这是DedeCMS的核心函数，它会抓取文章内容里的所有外部图片（比如UEditor上传到临时目录的图片），并将它们下载到你的网站服务器上，同时替换文章中的图片路径为本地路径。这步非常重要，能保证你的文章图片不会丢失。
  - HtmlReplace：这个函数会过滤一些危险的HTML标签，如果你对安全性要求很高，可以保留它，但有时它也会过滤掉一些你想要的标签，可以测试后决定是否使用。
对编辑页面做同样操作：
- 用完全相同的方法修改 /dede/article_edit.php 文件中的内容处理逻辑。

第四步：配置UEditor上传路径（可选）

UEditor默认会将上传的文件（图片、附件等）保存在其目录下的 upload 文件夹，为了统一管理，你可以修改它，让它上传到DedeCMS默认的媒体库目录。

修改配置文件：
- 打开 /static/ueditor/php/config.json 文件。
- 找到 "imageUrlPrefix": ""，将其修改为你的网站域名，这样前台显示图片时路径就是完整的。
```
"imageUrlPrefix": "http://www.yourdomain.com", // 替换成你的域名
```
- 找到 "imagePathFormat"，修改上传路径，DedeCMS的媒体库通常在 /uploads/ 目录下。
```
// 修改前
"imagePathFormat": "/ueditor/php/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}"
// 修改后，上传到DedeCMS的uploads目录
"imagePathFormat": "/uploads/allimg/{yyyy}{mm}{dd}/{time}{rand:6}"
```
- 注意：确保 /uploads/allimg/... 这个目录存在并且有写入权限。

常见问题与解决

问题1：编辑器加载不出来，显示空白或JS错误。
- 检查：ueditor.config.js 和 ueditor.all.min.js 的路径是否正确？用浏览器开发者工具（F12）查看Console（控制台）是否有红色错误信息。
- 解决：确保JS文件路径正确，并且文件能被正常访问。
问题2：内容发布后，文章内容为空或乱码。
- 检查：后台 article_add.php 是否修改了获取 body 的逻辑？name="body" 是否和前台模板的一致？
- 解决：核对前后台的代码，确保 name 属性匹配，并且后台正确使用了 $_POST['body'] 获取数据。
问题3：图片上传了，但文章里显示不出来，或者显示的是一张裂图。
- 检查：图片是否真的上传到了服务器？/uploads/allimg/ 目录下是否有图片？图片路径是否正确？
- 解决：
  1. 检查 /uploads/allimg/ 目录的权限，确保Web服务器（如Apache、Nginx）有写入权限。
  2. 检查 config.json 中的 imageUrlPrefix 是否配置正确。
  3. 检查后台 article_add.php 是否调用了 GetRemoteImage 函数。
问题4：UEditor的样式和网站后台的样式冲突。
- 检查：UEditor的弹出窗口（如插入图片）可能被网站其他CSS样式影响。
- 解决：可以在 ueditor.config.js 中添加一个CSS前缀，来避免样式冲突。
```
// 在 ueditor.config.js 中添加
window.UEDITOR_CONFIG = {
    // ... 其他配置
    ,iframeCssUrl: '/static/ueditor/themes/iframe.css' // 可以自定义一个CSS文件来重置样式
}
```

集成UEditor到DedeCMS,本质上是一场“代码替换”工作：

前台：用UEditor的JS和HTML替换掉DedeCMS自带的编辑器。
后台：修改接收数据的PHP文件，让它能处理UEditor生成的HTML内容，并正确调用DedeCMS的图片本地化函数。

按照以上步骤一步步操作,你就可以成功在DedeCMS中享受到UEditor带来的便利了，如果在操作中遇到问题，善用浏览器的开发者工具是排查错误最有效的方法。

dede如何集成ueditor？配置步骤有哪些？

核心思路

第一步：下载并准备UEditor

第二步：修改前台模板文件

第三步：修改后台处理文件（关键步骤）

第四步：配置UEditor上传路径（可选）

常见问题与解决

相关文章

目录[+]