storypioneers / kirby-wysiwyg

WYSIWYG panel field for Kirby CMS
Other
125 stars 17 forks source link

Pasting problems with <div> tags #30

Open good-idea opened 8 years ago

good-idea commented 8 years ago

It seems that whenever clipboard content that includes

tags (and other HTML elements) is pasted into the text area, it's not pasted in as plain text. After a save, HTML has not been stripped out, and a bunch of other formatting errors (such as markdown characters being /escaped) come up.

I see this in wysiwyg.js:

            paste: {
                cleanPastedHTML: true,
                forcePlainText: true,
            },

But neither seem to be happening.

JonasDoebertin commented 8 years ago

This seems to be an issue with the underlying MediumEditor component (we're using version 5.9 here).

This could probably be fixed by upgrading to a newer version of MediumEditor. Unfortunately, we're too busy to do it right now.

I will keep this issue open though, and I'll come back to it at a later date.

good-idea commented 8 years ago

EDIT: The below does well for stripping out HTML tags, but, for some reason removes links identified as URLs, even though they aren't wrapped in any kind of <a> tag in the .txt file. See temp fix #2 below

for others having this problem, i'm patching this in kirby's config with:

kirby()->hook('panel.page.sort', function($page) {
    fix_problem_fields($page)
});

kirby()->hook('panel.page.update', function($page) {
    fix_problem_fields($page)
});

function fix_problem_fields($page) {
  $problem_fields = array('text', 'bio', 'description');
  foreach ($problem_fields as $field) {
    if ($page->$field()->exists()) {
      $text = strip_tags($page->$field());
      $page->update(array($field => $text));
    }
  }
}

where 'problem fields' is a (annoyingly, manually) defined list of all of the fields that I have across blueprints that use WYSIWYG

using both panel.page.sort because, currently, the update hook doesn't fire if the page is visible, and sort fires instead

@JonasDoebertin Thanks for all of the updates!

good-idea commented 8 years ago

I replaced medium-editor-5.9.0.min.js with the latest medium-editor.js from https://github.com/yabwe/medium-editor

Everything seems to be working as normal, but the problem persists. I haven't dug into it's forcePlainText option, but it either isn't doing anything or is not doing what we'd expect.

Adding this regex replace after line 4985:

pastedHTML = event.clipboardData.getData(dataFormatHTML);
pastedHTML = pastedHTML.replace(/<div[^>]*>|<\/div>$/gim, "");
pastedPlain = event.clipboardData.getData(dataFormatPlain);

knocks out all <div> tags.