Dedecms去除img标签中的style、width、height属性

在进行响应式设计的dedecms CMS模板开发时，图片无法自适应的问题常常困扰开发者。这一问题的根本原因在于dedecms CMS自带的编辑器，在上传图片时会自动为图片添加style属性，从而导致图片无法根据屏幕大小自动调整。为了确保图片能够正确地自适应各种设备，我们需要在保存文章时清除这些不必要的属性。
### 问题分析与解决方法当我们在dedecms中编辑内容时，系统会默认为图片添加诸如`style="width:xxx;height:xxx;"`这样的内联样式。这些样式虽然可以固定图片的尺寸，但在响应式布局中却显得多余，甚至可能破坏页面的整体效果。因此，我们需要对这些属性进行清理。
### 修改步骤 1. **定位代码位置** 打开dede目录下的`article_add.php`文件（位于后台的文章发布功能模块），找到以下代码：


$body = AnalyseHtmlBody($body, $description, $litpic, $keywords, 'htmltext');

2. **插入清理代码** 在上述代码的下方，插入以下代码以实现对`img`标签中`style`、`width`和`height`属性的清理：


// 去除img中的style属性
$body = preg_replace("/style=\\\\\\\\\\\\.+?['|\\\\"]/i", '', $body);

// 去除img中的width和height属性
$exp = Array("/height=.{0,5}\\\\s/i", "/width=.{0,5}\\\\s/i");
$exp_o = Array('', '');
$body = preg_replace($exp, $exp_o, $body);

通过以上修改，系统在保存文章时会自动移除所有`img`标签中的`style`、`width`和`height`属性，从而让图片能够根据CSS样式表或父容器的设置自动调整大小。
### 注意事项 - **备份文件**：在修改任何核心文件之前，请务必做好备份，以防出现意外情况。 - **测试环境**：建议先在本地或测试环境中验证修改效果，确保无误后再部署到生产环境。 - **兼容性检查**：部分特殊场景下，可能需要额外调整CSS样式来适配图片显示效果。
### 总结通过上述方法，我们可以有效解决dedecms CMS模板中图片无法自适应的问题。这种优化不仅提升了用户体验，还增强了网站在不同设备上的兼容性。如果您正在开发一个响应式网站，不妨尝试这一技巧，让您的网站更加灵活且美观。希望本文的内容能帮助您更好地理解和解决问题！

推荐阅读