I am currently coding on front-end editing in wordpress. The outcome should be evernote-like editing using wordpress posts.
One major problem is incorporating the neccessary dynamic of the editor (shift in DOM (solved) and Get (solved) and Set content).
The Wordpress database stores markup without paragraphs and adds them on delivering. When you do initially set the tinymce content in php
wp_editor( $content, $editor_id,$settings );
The content is written (without paragraphs) in the textarea, tinymce removes this on init and does some PROCESSING on init and writes it in the visual editor.
To set the content I fetched from the wordpress database dynamically I use
tinyMCE.get(editor_id).setContent(content);
but unfortunately this seems to bypass the PROCESSING done on tinymce init which results in lost of line breaks and paragraphs.
My current workaround is to set the content to wordpress to the worpress text-editor and then switch back to visual editor, since this seems to trigger the PROCESSING of breaks and paragraphs:
jQuery( "#myeditor-html" ).trigger( "click" );
jQuery('#textarea_id').val(content);
jQuery( "#myeditor-tmce" ).trigger( "click" );
I really don't like this solution because
- Wordpress doesn't recommend switching if you love your visual content
- I would like to disable the 'quicktags' text-editor later on
My coding skills are not good enough to read the init code of tinymce, neither can I find what wordpress does on jQuery( "#myeditor-tmce" ).trigger( "click" ).
There was somebody with the same question:
tinymce setContent removes new lines
but this solution is so basic that it crashes with any extended markup (e.g. lists).
Can you help me to find an elegant code for filling the tinymce with wp database content, which means to figure out the mentioned PROCESSING?
