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

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 editor allows the user to select some text and click the 'bold' button, and this will wrap the selected text in <b></b> tags.
I would like the user to be able to select some text, click a button called 'somebutton' and wrap the selected text in <div class="someclass"></div>, or click a different button and wrap the text in <h1 id="someid"></h1>, or any other HTML element with a specific attribute as defined by me.
I know that there are a lot of javascript based HTML editors out there, but I am specifically looking for any that are easy to extend in the way described above. I have looked at TinyMCE and Aloha, and in both cases found the documentation very difficult to use or non-existent.
I am looking for:
Recommendations of any editors that are easy to extend in this way
Tutorials or instructions for how to add custom elements as described above
Thank you!

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).