TinyMCE 返回没有 HTML 的内容 [英] TinyMCE return content without HTML

问题描述

我正在使用内联编辑器 ipweditor 工具，该工具在内部使用 tinyMCE 编辑器.在他们的演示页面上，它使用的是旧版本的 tinyMCE，它在我的 IE 中不起作用.所以我用最新版本更新了tinyMCE.

在旧版本的 TinyMCE 中，它返回我定义的所有 HTML 标签的内容，而在新版本中，它只返回没有 HTML 标签的文本.这是 jsFiddle 演示的链接.任何人都知道如何配置 tinyMCE，以便它也返回 HTML 标签.

HTML

<form method="post" action="somepage"><textarea name="content" style="width:100%"></textarea></表单>
<div style="border: 实心细灰色；padding:5px;"><div class="my_text"><b><span>点击我！我是可编辑和所见即所得！！！</span></b>

Javascript

 $(document).ready(function () {var ed = new tinymce.Editor('content', {模式:精确"，主题:高级"，插件:情绪，表"，theme_advanced_toolbar_location: "顶部",theme_advanced_statusbar_location: "底部",theme_advanced_resizing: 真，theme_advanced_buttons1: "粗体、斜体、下划线、字体选择、字体大小选择、前景色、背景色、|、代码、",theme_advanced_buttons2: "",theme_advanced_buttons3: "",table_default_cellspacing: 0,table_default_border: 1,remove_linebreaks: 假});$('.my_text').editable({类型:'所见即所得'，ed,onSubmit: 函数 submitData(content) {警报(内容.当前)；},提交:'保存'，取消:'取消'});});

解决方案

在插件库中进行任何修改总是不可取的，但这确实需要一些修改.问题出在ipweditor.js"工具上.它正在内部创建新的 tinyMCE 编辑器对象，并从 tinyMCE 以文本"格式获取响应.

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

我们需要用 'html' 替换 'text'

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

最好使这种格式设置也是动态的，因此在初始设置中附加一个设置变量并从那里获取值.

var 默认值 = {onEdit:空，提交:空，取消:空，编辑类:空，提交:空，取消:空，type: 'text',//文本、文本区域或选择submitBy: 'blur',//blur,change,dblclick,clickeditBy: '点击','非'，选项:空，格式:'文本'}var options = $.extend(defaults, options);

现在使用设置中定义的格式进行检索.

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

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'
    });
});

解决方案

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});

这篇关于TinyMCE 返回没有 HTML 的内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！