使用Javascript删除HTML中的背景颜色和字体颜色

时间:2014-05-09 09:56:42

标签: javascript jquery tinymce

我正在改进TinyMCE编辑器,并希望在forecolor和backcolor中添加按钮Default color。这就是我如何使用随机风格的背景颜色选择文本:

outer = tinyMCE.activeEditor.selection.getNode().outerHTML;

例如,可能会出现这样的情况:

<p style="font-size: 18px;"> 
    sadasdasdsasdasda
    <span style="background-color: rgb(0, 255, 0);" data-mce-style="background-color: #00ff00;">sdasdasda</span>
    <span style="background-color: rgb(255, 0, 0);" data-mce-style="background-color: #ff0000;">
        <span style="background-color: rgb(0, 255, 0);">sdasd</span>
        asdasdasdas
    </span>
    dasdasd
</p> 

我已经在jQuery中尝试了.each,但没有用。这是实际代码:

$(outer).each(function() {
    $(this).css({'background-color': 'transparent'});
});

我不是Javascript中的高手,也不是jQuery中的高手。如何从background-color删除所有outer

2 个答案:

答案 0 :(得分:0)

像这样使用

$("*").each(function () {
    $(this).css('background-color', 'transparent');
});

Demo

修改

 var a='<p style="font-size: 18px;">sadasdasdsasdasda<span style="background-color: rgb(0, 255, 0);" data-mce-style="background-color: #00ff00;">sdasdasda</span><span style="background-color: rgb(255, 0, 0);" data-mce-style="background-color: #ff0000;"><span style="background-color: rgb(0, 255, 0);">sdasd</span>asdasdasdas</span>dasdasd</p>';
var outer=$(a);
outer.find("*").css('background-color','transparent');
$("div").append(outer);

Updated Fiddle

答案 1 :(得分:0)

所有需要的是插件中的编辑功能(plugins/textcolor/plugin.js)。然后结果将是:

function onPanelClick(e) {
   var buttonCtrl = this.parent(), value;

   if ((value = e.target.getAttribute('data-mce-color'))) {
      buttonCtrl.hidePanel();
      buttonCtrl.color(value););
      if (value == 'transparent') {
         tinyMCE.execCommand("RemoveFormat");
      } else {
         editor.execCommand(buttonCtrl.settings.selectcmd, false, value);
      }
   }
}

之后,还需要修改tinymce.js。所有需要的都是编辑器removeformat,例如:

removeformat: [
   {selector: 'span', styles: ['background-color'], remove: 'empty', split: true, expand: false, deep: true}
]

FOR OTHER USERS )向面板添加新颜色,在函数renderColorPicker()中插入此代码,推荐在循环之前:

function renderColorPicker() {
   ...

   html += '<tr>';
   html += (
      '<td colspan="' + cols + '">' +
         '<div id="' + ctrl._id + '-00" class="color-box"' +
         ' data-mce-color="transparent"' +
         ' role="option"' +
         ' tabIndex="-1"' +
         ' style="background-color: transparent"' +
         ' title="Default color">' +
         '<span>Default color</span></div>' +
      '</td>'
   );
   html += '</tr>';

   for (y = 0; y < rows; y++){
   ...