CODEWITHSUNDEEP
javascriptwysiwygcontenteditable
Sneaksta
Sneaksta

Reputation: 1061

Problems with custom divs within WYSIWYG, cross-browser

I am working on a WYSIWYG editor (customising someone else's code) and have encountered a few problems that I just can't seem to overcome.

So far I have been able to get most custom divs working, but I am having some trouble with a few things:

Problem 1: If the cursor is before a div element, I am able to press delete and begin to remove the contents of the div without removing the actual div itself. This is how the element should look within the WYSIWYG for example:

enter image description here

But after pressing delete when the cursor is before the element, I get the following:

enter image description here

How can I check if the next element is this custom div and cancel a delete key press?

Problem 2: I am also able to press backspace after an element, which causes any text after the element to appear inside it, like so:

enter image description here

How can I check if the previous element is my custom div and cancel a backspace key press?

Problem 3: When inside a section (where the 'put content here' text is), I am using a div with the attribute contenteditable="true". Every time I press 'enter' within this div, a new <div> tag is created, rather than a line break tag (<br>). How can I force a line break tag to be created instead of a div element? I have looked far and wide on stackoverflow and have yet to find a proper solution to the problem that is cross-browser.

Upvotes: 1

Views: 181

Answers (1)

Reinmar
Reinmar

Reputation: 22023

Disclaimer: I am a CKEditor core developer.

If you want to customise this there are three ways:

  1. You can spend few months (or more) on learning about contenteditable, ranges, selection and all that stuff and trying to implement your custom handlers. You could of course spend only one week or month on that, but the result won't be great, believe me.
  2. You can choose good, existing WYSIWYG editor.
  3. You can lower your expectations regarding the expected behaviour ;).

Now, if you would decide to use CKEditor there's one new feature called Widgets which was introduced in recently released CKEditor 4.3 beta (4.3 stable is going to be released in max. 2-3 weeks). As far as I can see it may be very helpful in your case. Check out the Introduction to Widgets guide. In very short - it is possible to configure how enter key behaves in so called "nested editables" as well as to secure integrity of your custom markup.

Upvotes: 1

Related Questions