Ueditor百度编辑器的Html模式自动替换样式的解决方法

Ueditor是一款功能强大的富文本编辑器，在前端项目的开发中广泛使用。然而，使用Ueditor时我们可能会遇到一个问题，那就是在Html模式下输入内容时会自动替换样式，这会导致一些不必要的麻烦。下面我将为您提供解决这个问题的完整攻略。

问题描述

在使用Ueditor编辑器的Html模式下，输入内容时，会自动替换掉一些已经存在的样式，而这些样式很有可能是我们需要保留的。

解决方法

解决这个问题的方法是利用Ueditor的自定义配置项，在配置项中加入需要保留的样式，这样Ueditor就不会自动替换掉它们了。操作步骤如下：

1. 找到Ueditor的配置文件

找到UEditor目录下的ueditor.config.js文件。

2. 添加需要保留的样式

在ueditor.config.js文件中找到UEDITOR_CONFIG对象，添加一个新的配置项：

UEDITOR_CONFIG.autoClearEmptyNode = false; // 不删空节点
UEDITOR_CONFIG.removeEmptyNode = false; // 不删空节点
UEDITOR_CONFIG.filterTxtRules = function() {
    function transP(node) {
        node.tagName = 'p';
        node.setStyle();
    }
    return {
        '-': 'script'
    };
}();

以上代码中，我们将autoClearEmptyNode和removeEmptyNode这两个配置项都设置为false，表示不去掉空节点。另外，filterTxtRules配置项用于过滤标签，我们可以在这个配置项中添加需要保留的样式，比如下面的代码：

UEDITOR_CONFIG.filterTxtRules = function() {
    function transP(node) {
        node.tagName = 'p';
        node.setStyle();
    }
    return {
        '-': 'script;div;span;a;p;img;table;tbody;thead;tr;th;td;ul;ol;li;hr'
    };
}();

以上配置项中，我们保留了div,span,p,img,table,tbody,thead,tr,th,td,ul,ol,li,hr这些标签的样式。

3. 重新打包生成新的编辑器

完成以上两个步骤之后，需要重新打包生成新的编辑器，然后再引入新的编辑器即可。

示例说明

以下是一个具体的示例说明，假设现在我们需要保留<hr>标签的样式，可以按照如下操作：

1. 找到ueditor.config.js文件。
2. 在UEDITOR_CONFIG对象中将autoClearEmptyNode和removeEmptyNode这两个配置项都设置为false，并添加以下代码：

javascript
UEDITOR_CONFIG.filterTxtRules = function() {
function transP(node) {
node.tagName = 'p';
node.setStyle();
}
return {
'-': 'script;div;span;a;p;img;table;tbody;thead;tr;th;td;ul;ol;li;hr'
};
}();

1. 重新打包生成新的编辑器，然后引入新的编辑器。

经过以上操作，现在我们可以在Html模式下输入<hr>标签了，而且其样式不会被替换。