bevacqua / woofmark

:dog2: Barking up the DOM tree. A modular, progressive, and beautiful Markdown and HTML editor

Home Page:https://bevacqua.github.io/woofmark

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Question: How can I remove inline styles on paste?

jessegavin opened this issue · comments

I want to be able to use woofmark as a wysiwyg editor for markdown only.

  1. I never want my users to be able to switch to html mode (I know how to do this).
  2. I would like to automatically strip out any inline styles when a user pastes rich text into the editor while in wysiwyg mode. ( don't know how to do this).

How can I accomplish the second item?

I created a code pen to illustrate the non-desirable behavior. http://codepen.io/jessegavin/pen/mRyOJb?editors=0010

Thanks so much. This is one of the coolest implementations I have seen for a wysiwyg editor.

@jywarren that is correct. I can get the desired result if I paste inline-styled content into the wysiwyg mode, then switch to markdown, then switch back.

I want some way to skip the step of having to manually switch to markdown mode and back.

Ok, I have come up with a "solution" which works for my particular needs, but it doesn't feel clean at all.

And, because it uses setTimeout() there's a visual "blip" when the pasted content is displayed with inline styles, then immediately they are removed.

var editor = woofmark(...);

editor.editable.addEventListener('paste', function(e) {
  setTimeout(function() {
    var els = editor.editable.querySelectorAll('*'), i;
    for (i = 0; i < els.length; i++) {
      els[i].removeAttribute('style');
    }
  },0);
}, false);