Question: How can I remove inline styles on paste?

[jessegavin]

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]

My understanding is that they'll be stripped out when the content is converted into markdown, but that's not triggered on paste. I think it could be a good idea to add some kind of filter to pasted content, or as you've shown, it tends to persist in the editor in WYSIWYG mode until something triggers the entire post body to be parsed.

…

On Wed, Jan 4, 2017 at 11:19 PM, Jesse Gavin ***@***.***> wrote: I want to be able to use woofmark as a wysiwyg editor for markdown only. I would like to automatically strip out any inline styles when a user pastes rich text into the editor while in wysiwyg mode. How can this be accomplished? 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. — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#49>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AABfJ9ZzmtFY1_Q9BtmPXE7ZjvuCink6ks5rPG9OgaJpZM4LbVWk> .

[jessegavin]

@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.

[jywarren]

I've tried implementing a triggering of parsing back and forth on a paste event, but it's not ideal -- for one, it sort of hiccups, and I forget, perhaps the insertion point was moved or lost? In any case you can give it a try -- woofmark uses the crossvent event library, also by @bevacqua. It's pretty easy to use!

…

On Thu, Jan 5, 2017 at 4:15 PM, Jesse Gavin ***@***.***> wrote: @jywarren <https://github.com/jywarren> that is correct. I can get the desired result if, when 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. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#49 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AABfJ0elguq3IsLdbEw7UFMKHEINwEg-ks5rPV2IgaJpZM4LbVWk> .

[jessegavin]

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);

[jywarren]

Hmm, do you think it'd be possible to intercept the pasted content and preventDefault() to stop it getting to the textarea at all? Then insert it via the "chunks" object, as shown in the code example here: publiclab/PublicLab.Editor#85 (comment) Just an idea!

…

On Sat, Jan 7, 2017 at 10:31 AM, Jesse Gavin ***@***.***> wrote: 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; console.log(els); for (i = 0; i < els.length; ++i) { els[i].removeAttribute('style'); } },0); }, false); — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#49 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AABfJ8LEzufKfQ23PPGFZi3UMAhlK1Tgks5rP6_XgaJpZM4LbVWk> .