Remove Background Color And Font Color In Html With Javascript

I am improving TinyMCE editor and want to add buttons Default color in forecolor and backcolor. This is how I get selected text with random style of background colors: outer = tiny

Solution 1:

Use like this

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

Demo

Edit

 var a='<pstyle="font-size: 18px;">sadasdasdsasdasda<spanstyle="background-color: rgb(0, 255, 0);"data-mce-style="background-color: #00ff00;">sdasdasda</span><spanstyle="background-color: rgb(255, 0, 0);"data-mce-style="background-color: #ff0000;"><spanstyle="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

Solution 2:

All to need is edit function in plugin (plugins/textcolor/plugin.js). Then result will be:

functiononPanelClick(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);
      }
   }
}

After that, edit tinymce.js is required too. All to need is editor removeformat, for example:

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

(FOR OTHER USERS) to add new color to panel, insert this code in function renderColorPicker(), recommended before loop:

function renderColorPicker() {
   ...

   html += '<tr>';
   html += (
      '<tdcolspan="' + cols + '">' +
         '<divid="' + 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++){
   ...