Content Not Editable after Editor got initialized

[datafireball]

I am trying to make the whole page editable by specifying the body tag as the editable region using the following code.

target = document.getElementsByTagName('body')[0].innerHTML;
new_target = "<div data-editable data-name='main-content'>" + target + "</div>";
document.getElementsByTagName('body')[0].innerHTML = new_target;

editor = ContentTools.EditorApp.get();
editor.init('*[data-editable]', 'data-name');  

The initializer finished successfully but the content within the body is not editable and all the options within the content editor got greyed out somehow. (see screenshot).

I tried this for some very simple website like this and this, the error above won't occur. However, when I tried it on some slightly more modern site, this problem is consistent. Any idea why?

[anthonyjb]

That wont work in most cases - only a limited number of tags can be understood by the ContentTools/ContentEdit parser - you can see the list here: http://getcontenttools.com/api/content-edit

Select a node type such as text and you'll be able to see the types of HTML element the Text element will attempt to make editable, in that case <address>, <blockquote>, <h1-6> and <p>.

If the editor comes across a <div> element for example, because that element isn't mapped to a ContentEdit Node/Element type it will revert to parsing it as a static (non-editable) preventing it's content from being modified.

[biwa7636]

Hi Anthony, will that be on the radar of the roadmap of contenttools to account for the various types of tags or the strategy here is to focus on simple tags then its usage might only be limited. I am considering building a chrome extension so user can use a WYSIWYG solution to edit any sites on the fly more like a notes taking, so will you suggest any workaround or alternatives?

[anthonyjb]

@biwa7636 sorry for the late reply - I'm gradually attempt to get back on top of the outstanding issues and questions a few hours each weekend.

So the ContentEdit library which is responsible for parsing the DOM and building an editable tree of elements caters for known basic types of content, Text, Images, Videos, Tables, Lists, etc. The problem with an element like a division is that it doesn't denote structure or content type and so it's difficult to write something that allows it to be editable, that is you don't know what it will contain. In fact in most cases editable regions are defined as div elements (or a like) because they are a good wrapper for multiple types of content. It's true of course you can put any type of content in a paragraph tag or list item, but that's not true for ContentEdit, For example a table in a list element isn't supported by ContentEdit (unless the list item is the region and is non-editable).

For the extensions your looking to develop ContentTools/ContentEdit probably isn't a great match because it works best when content follows a structure it understands - in the wild this often isn't the case and ContentEdit will struggle to provide editable content in the majority of cases I'm afraid.