如何删除dede编辑器自动添加的div?

99ANYc3cd6
预计阅读时长 14 分钟
位置: 首页 DEDE建站 正文

最直接的方法 - 手动删除(治标不治本)

这是最简单粗暴的方法,每次发布或编辑文章时,手动检查并删除多余的<div>

  • 操作步骤

    dede编辑器自动加div的删出方法
    (图片来源网络,侵删)
    1. 在DedeCMS后台打开文章编辑页面。
    2. 切换到“源码”或“HTML”模式(通常是编辑器工具栏上的</>图标)。
    3. 找到文章内容中自动生成的<div>标签,手动将其删除。
    4. 保存文章。
  • 优点

    立竿见影,无需任何技术操作。

  • 缺点

    • 每次编辑文章都要重复操作,非常繁琐。
    • 没有从根本上解决问题,下次发布新文章或编辑旧文章时,问题依然存在。

修改编辑器配置文件(治本推荐)

这是最常用且最有效的解决方法,通过修改编辑器的初始化配置文件,告诉编辑器不要自动添加这些<div>

DedeCMS默认使用的是KindEditor编辑器,配置文件通常位于:

dede编辑器自动加div的删出方法
(图片来源网络,侵删)

/include/kindeditor/php/config.php

  • 操作步骤

    1. 通过FTP或服务器文件管理器,进入您的DedeCMS根目录。
    2. 找到并打开文件:/include/kindeditor/php/config.php
    3. 在文件中找到 $GLOBALS['cfg_html_editor'] 相关的配置部分,您需要关注的是编辑器的初始化参数数组。
    4. 在这个数组中,添加或修改以下配置项:
    // 找到类似下面这样的数组
    $GLOBALS['kindeditor_editor'] = array(
        // ... 其他配置 ...
        'allowFileManager' => true,
        'resizeType' => 1,
        'pasteType' => 2,
        'urlType' => 'absolute', // 如果你的网站是https,可以设置为'fullpath'
        // ====== 在这里添加下面的配置 ======
        'allowDivMode' => false, // 关键:禁止在编辑器中使用div标签,这是最根本的解决方法
        'filterMode' => true,   // 开启过滤模式,会自动过滤无用的标签
        'htmlTags' => array(    // 明确允许使用的HTML标签
            'a', 'img', 'br', 'p', 'span', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'strong', 'em', 'u', 'ol', 'ul', 'li', 'table', 'thead', 'tbody', 'tr', 'th', 'td', 'blockquote', 'pre'
        ),
        // ====== 结束 ======
    );

    关键配置项解释

    • 'allowDivMode' => false;:这是最核心的设置,它禁止了编辑器在“所见即所得”模式下使用<div>标签,从而从根本上杜绝了自动添加<div>的问题。
    • 'filterMode' => true;:开启过滤模式,编辑器会自动清理粘贴过来的内容中不符合规范的标签和样式。
    • 'htmlTags' => array(...);:明确告诉编辑器哪些HTML标签是允许使用的,这是一个白名单机制,不在列表中的标签(比如无用的<div>)会被过滤掉。
    1. 保存config.php文件。
    2. 清理一下浏览器缓存,然后重新登录DedeCMS后台,再次编辑文章,问题应该就解决了。
  • 优点

    dede编辑器自动加div的删出方法
    (图片来源网络,侵删)
    • 从根本上解决问题,一劳永逸。
    • 适用于所有文章,包括新发布的和已有的(编辑时会应用新规则)。
  • 缺点

    • 需要修改核心配置文件,有一定技术门槛。
    • 修改前务必备份原文件,以防出错。

修改编辑器初始化JS文件(治本推荐)

如果方法二无效,或者您的配置文件结构不同,可以尝试直接修改编辑器在前端初始化的JS文件,这个文件负责加载和配置编辑器。

文件路径通常为:/include/kindeditor/kindeditor.js/include/kindeditor/kindeditor-min.js

  • 操作步骤

    1. 打开上述JS文件。
    2. 搜索 allowDivModefilterMode 等关键词,找到编辑器初始化的配置对象。
    3. 在配置对象中,添加与config.php中相同的设置,
    // 在 KindEditor 的初始化代码中找到类似 K.create 的部分
    K.create('textarea[name="body"]', {
        allowFileManager : true,
        resizeType : 1,
        // ====== 在这里添加下面的配置 ======
        allowDivMode : false, // 禁止使用div
        filterMode : true,    // 开启过滤
        htmlTags : {          // 定义允许的标签
            a : ['href', 'title', 'target', 'rel'],
            img : ['src', 'width', 'height', 'alt', 'title', 'data-src'],
            br : [],
            p : [],
            span : ['class', 'style'],
            // ... 其他你需要的标签 ...
        },
        // ====== 结束 ======
    });

    保存文件,然后清空浏览器缓存,重新进入后台测试。

  • 优点

    同样是治本的方法。

  • 缺点

    • 修改JS文件,如果压缩过(如kindeditor-min.js)会比较难读。
    • 同样需要备份。

终极方法 - 替换编辑器

如果您对DedeCMS自带的KindEditor非常不满意,或者问题依然存在,可以考虑更换一个更现代、更稳定的编辑器,比如百度UEditor

DedeCMS本身就支持切换编辑器。

  • 操作步骤

    1. 登录DedeCMS后台。
    2. 进入“系统” -> “系统基本参数” -> “核心设置”。
    3. 找到“Html编辑器”这一项。
    4. 在下拉菜单中,将默认的“kindeditor”更改为“ueditor”。
    5. 点击“保存”。
    6. DedeCMS会自动检测并下载安装UEditor编辑器,如果下载失败,您可能需要手动从DedeCMS官网或Gitee上下载UEditor的压缩包,并解压到/include/ueditor/目录下。
    7. 清空浏览器缓存,再次编辑文章,您就会看到新的UEditor界面了。
  • 优点

    • UEditor功能强大,稳定性好,对<div>标签的控制非常精确。
    • 彻底告别旧编辑器的各种奇怪问题。
  • 缺点

    • 需要适应一个新的编辑器。
    • 可能需要重新调整一些样式或功能。

总结与建议

方法 优点 缺点 推荐度
手动删除 简单直接 繁琐,治标不治本 ⭐☆☆☆☆ (不推荐)
修改config.php 治本,一劳永逸 需要修改核心文件,需备份 ⭐⭐⭐⭐⭐ (强烈推荐)
修改JS文件 治本 修改JS,可能不易读 ⭐⭐⭐☆☆ (备选方案)
替换编辑器 彻底解决问题,功能更强 需要适应新编辑器 ⭐⭐⭐⭐☆ (终极方案)

建议您首先尝试【方法二】,这是解决此问题的标准流程,也是对系统改动最小、最稳妥的治本方法,如果方法二无效,再考虑【方法三】或【方法四】。

-- 展开阅读全文 --
头像
dede cms网上商城二次开发视频怎么学?
« 上一篇 12-07
dede搬家后内容消失,原因何在?
下一篇 » 12-07

相关文章

取消
微信二维码
支付宝二维码