Enable CKEditor4 inline on span and other inline tags

Question

I'd like to know if it's possible and how to enable the CKEditor4 inline/contenteditable editing feature on <span> and other inline elements. This is something which I cannot find in the official docs.

With this markup:

<span id="editable" contenteditable="true"></span>

And either the standard configuration (AutoInline enabled) or this configuration:

<script>
    CKEDITOR.disableAutoInline = true;
    CKEDITOR.inline('editable'); // ID of the element to edit
</script>

An error is reported: The specified element mode is not supported on element: "span". The same error is reported for <a> tags.

Reparation

Answer 1

Hack way to allow support for un supported tags:

CKEDITOR.dtd.$editable.span = 1
CKEDITOR.dtd.$editable.a = 1

Win.

Dimetric

Nice, it works although it splits the span into two if you try to paste :\ – Always

It is a sort of a workaround, however you'll get far with it as a lot of CKE4 internals will start to fall down. The general take-away is that we're not going to support creating editor on an inline element, as there is a problem that we're unable to get around for IE11 (developer.microsoft.com/en-us/microsoft-edge/platform/issues/…). – Jos

Answer 2

Nope. It is not possible to create editor on inline elements. Here you can find list of accepted names.

However, I checked that after modifying that list I was able to initialize editor on strong element and it even works... Unless you paste or do other unsupported action :).

Teahan

No. Only strong, but the result will be the same or worse (e.g. for link). – Teahan