Copying then pasting into title

Just to follow up on this, a potential solution (if one is needed) would be to use div[contenteditable="true"] as the selector in tinyMCE.init. Then you could use paste_as_text: true – which would now apply to both the title and the content.

That’s because the back-end uses a normal input field… It does strip the tags when saving, but yeah, it shouldn’t accept any tags at all.

but yeah, it shouldn’t accept any tags at all.

The solution I mentioned above (using div[contenteditable="true"] as the selector) doesn’t actually work. If you use div[contenteditable="true"] as the selector, the save button stops working.

Adding paste_as_text: true to tinyMCE.init strips tags when pasting into the content. But then there is the title to think about.

How can you strip tags when pasting into the title? Would you need another tinyMCE.init() for the title? I’m not sure of the solution to this one…?

If you want to solve it like that, you’ll need to initialise TinyMCE twice, as they would have different configurations.

I thought about that. How do you think is best?

I’m not sure if we should use TinyMCE for the title field. I’ll try out some things.

I’m not sure if we should use TinyMCE for the title field. I’ll try out some things.

That’s exactly what I was thinking. The back-end editor doesn’t use tinyMCE for the title so no need for it on the front end.

So I’m thinking initialising tinyMCE twice isn’t the best way to deal with stripping tags on paste because we need only one instance of it for the content.

It’s now stripping tags when you remove the focus from the title field (when you put your cursor somewhere else).

I’ve not had the chance to update yet but will do this evening. Could the stripping of tags be bound to the actual paste event instead of when focus is lost?

Yes. I just wasn’t sure how to implement it. The paste event fires before anything actually changes in the DOM, so you have to set a timeout of a few milliseconds. And the input event doesn’t work in IE. Beside that, it also fires every time the title changes (every time you type a letter).

so you have to set a timeout of a few milliseconds

Yeah agreed, that doesn’t seem a clean approach. But, using the input event will avoid having to set a timeout.

the input event doesn’t work in IE

I have to admit I had to Google this – it seems older versions of IE that lack support have their own proprietary event onpropertychange which can be used to achieve the same outcome. E.g

$(':input').on('input propertychange');

it also fires every time the title changes (every time you type a letter)

This is a pain! Maybe the input event could be fired only after a paste event? Would need your input on this… ( sorry for that bad attempt at a pun ?? )

Don’t worry, I Google most things too. That sounds even more complicated than a timeout though. I’ll leave it like this for now, but feel free to experiment with it.

…but feel free to experiment with it

I think it might be worth it because although onblur ultimately does the job, the user can see the formatted text until the input loses focus.

I’ll take a look to see if I can come up with something.

I think I can offer a slight improvement on how tags are stripped in Chrome and Firefox.

.on( 'input blur', function() {
    var titleOnBlur;
    $( this ).find( '*' ).each( function() {
        titleOnBlur = $( this ).contents();
        $(this).replaceWith( titleOnBlur );
    });
} );

1. This strips tags on paste in both of those browsers. IE still strips tags, but only when focus is lost.
2. As you say, the downside is input fires every time the title changes (every time the user types a new character).
3. I’ve yet to find a working way to strip tags on paste in IE. I’ve read lots on using propertychange but can’t see how to get that working.

This would be a good issue to resolve as text looks ugly if pasted in with formatting (even if this ugliness is seen only momentarily until focus is lost). What are your thoughts?

Yeah so I suggested to use input as well, but that has the downside that it fires every time you type something.