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 notifications@github.com 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 https://github.com/bevacqua/woofmark/issues/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 notifications@github.com 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 https://github.com/bevacqua/woofmark/issues/49#issuecomment-270759720, 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:

https://github.com/publiclab/PublicLab.Editor/issues/85#issuecomment-271722433

Just an idea!

On Sat, Jan 7, 2017 at 10:31 AM, Jesse Gavin notifications@github.com 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 https://github.com/bevacqua/woofmark/issues/49#issuecomment-271090130, or mute the thread https://github.com/notifications/unsubscribe-auth/AABfJ8LEzufKfQ23PPGFZi3UMAhlK1Tgks5rP6_XgaJpZM4LbVWk .