Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

TinyMCE return content without HTML

I am using an inline editor ipweditor tool which internally use tinyMCE editor. On their demo page it is using old version of tinyMCE which is not working in my IE. So I updated tinyMCE with latest version.

In old version of TinyMCE it was returning me defined content with all the HTML tags, while in new version it is returning me only text without HTML tags. Here is the link of jsFiddle demo. Anyone know how do I configure tinyMCE so it return me HTML tags also.

HTML

<div style="display:none">
    <form method="post" action="somepage">
        <textarea name="content" style="width:100%"></textarea>
    </form>
</div>
<div style="border: solid thin gray; padding:5px;">
    <div class="my_text"><b> <span>Click me! I am editable and WYSIWYG!!!</span></b> 
</div>

Javascript

    $(document).ready(function () {
    var ed = new tinymce.Editor('content', {
        mode: "exact",
        theme: "advanced",
        plugins: "emotions,table",
        theme_advanced_toolbar_location: "top",
        theme_advanced_statusbar_location: "bottom",
        theme_advanced_resizing: true,
        theme_advanced_buttons1: "bold,italic,underline,fontselect,fontsizeselect,forecolor,backcolor,|,code,",
        theme_advanced_buttons2: "",
        theme_advanced_buttons3: "",
        table_default_cellspacing: 0,
        table_default_border: 1,
        remove_linebreaks: false
    });

    $('.my_text').editable({
        type: 'wysiwyg',
        editor: ed,
        onSubmit: function submitData(content) {
            alert(content.current);
        },
        submit: 'save',
        cancel: 'cancel'
    });
});
like image 299
Nehal Avatar asked Dec 16 '22 14:12

Nehal


2 Answers

It's always not preferable to make any modification in plugin library, but this really need some modification. The problem was with 'ipweditor.js' tool. It's creating new tinyMCE editor object internally and getting response in "text" format from tinyMCE.

var r =options.editor.getContent({format : 'text'});

We need to replace 'text' with 'html'

var r =options.editor.getContent({format : 'html'});

It's more preferable to make this format setting also dynamic so append a setting variable in inital settings and fetch value from there.

var defaults = {
    onEdit: null,
    onSubmit: null,
    onCancel: null,
    editClass: null,
    submit: null,
    cancel: null,
    type: 'text', //text, textarea or select
    submitBy: 'blur', //blur,change,dblclick,click
    editBy: 'click',
    editor: 'non',
    options: null,
    format:'text'
}
var options = $.extend(defaults, options);

and now retrieve using the format defined in setting.

var r =options.editor.getContent({format : options.format});
like image 140
Nehal Avatar answered Dec 18 '22 03:12

Nehal


You can use content.previous. Here is a modified fiddle.

like image 30
Thariama Avatar answered Dec 18 '22 03:12

Thariama