This project has moved. For the latest updates, please go here.

Force <p> at least

Feb 26, 2010 at 9:21 AM

Hi,

is there any way how to force the editor to use some (default) containing element for text I write (<p>)?
When I delete all content and start writing again, resulting html code is without any tags which is undesirable (for me).

Thanks

Aug 19, 2010 at 4:53 PM
Edited Aug 19, 2010 at 5:19 PM

EDIT: I had a look at doing this directly in the plug-in. I was able to modify the default output by doing the following...

Change the following (line 305 onwards):

        initEditor: function(options) {
            var edit = this.editor = this.iframe[0].contentWindow.document;
            // console.log(this.iframe[0].contentWindow.document.toString.length);
            edit.designMode = 'on';
            edit.open();
            edit.write(this.textarea.val());
            edit.close();
            if (options.css) {
                var e = edit.createElement('link'); e.rel = 'stylesheet'; e.type = 'text/css'; e.href = options.css; edit.getElementsByTagName('head')[0].appendChild(e);
            }
        },

To:

        initEditor: function(options) {
            var edit = this.editor = this.iframe[0].contentWindow.document;
            // console.log(this.iframe[0].contentWindow.document.toString.length);
            edit.designMode = 'on';
            edit.open();
            if (this.textarea.val().length==0) {
                edit.write('<p>&nbsp;</p>');
            } else {
                edit.write(this.textarea.val());
            }
            edit.close();
            if (options.css) {
                var e = edit.createElement('link'); e.rel = 'stylesheet'; e.type = 'text/css'; e.href = options.css; edit.getElementsByTagName('head')[0].appendChild(e);
            }
        },

What I think I've managed to achieve is, evaluating the length of content in the textarea. If it's zero, inserting an non-breaking space wrapped in a paragraph tag. This means that when users start typing within the jHtmlArea is should already be a paragraph.

The alternative solution, which I'm using in my bespoke CMS, is to place the paragraph tag directly in the text area itself. For example, I have a form generator that builds my form controls. The code for that, just for readers to get an idea on the implementation, is as follows:

if (strlen(trim($value))==0) {
    $value = "<p>Edit...</p>";
}
$form.= '    <div class="label"><label for="'.$id.'">' . to_human($name) . '</label></div>' . "\n";
$form.= '    <div class="input"><textarea name="'.$name.'" id="'.$id.'" class="wysiwyg" rows="20" cols="60" style="width:700px;">'.$value.'</textarea></div>' . "\n";

Where the value variable is the value from the database, or the $_POST array, or whatever.

Hope this helps someone!