What is a good javascript HTML editor for adding custom HTML elements?

Question

I want to create a web-based WYSIWYG HTML editor that allows the user to insert pre-defined HTML elements with certain class or id attributes.

For example, any HTML edit

Answer 1

CKEditor provides a flexible styles system, with rules defined as follows (in styles.js or directly in the config):

{
    name: 'My style',
    element: 'h2',
    attributes: {
        'class': 'customClass',
        id: 'someId'
    },
    styles: {
        'font-style': 'italic'
    }
},

Producing:

<h2 class="customClass" id="someId" style="font-style:italic;">Custom element</h2>

Once defined, styles are available directly from the Styles Combo Box, possible to apply either to the current selection or to new elements.

Styles can be created dynamically, applied to ranges and elements with the API. The Stylesheet Parser plugin can extract styles directly from CSS files.

Note: Defining custom styles may need a proper configuration of Advanced Content Filter (since CKEditor 4.1).