8wDlpd.png
8wDFp9.png
8wDEOx.png
8wDMfH.png
8wDKte.png

jQuery 和 TinyMCE:textarea 值未提交

Ansh Arora 1月前

39 0

我正在使用 jQuery 和 TinyMCE 提交表单,但是在序列化过程中出现问题,即 Textarea 值无法发布。代码如下:

我正在使用 jQuery TinyMCE 提交表单,但是在序列化过程中出现问题,即 Textarea 值无法发布。

以下是代码:

<form id="myForm" method="post" action="post.php">
    <textarea name="question_text" id="question_text" style="width:543px;height:250px;"></textarea>
</form>

语言:lang-js

$('#myForm').submit(function() {
    $.ajax({
        type: 'POST',
        url: $(this).attr('action'),
        data: $(this).serialize(),
        success: function(data) {
            $('#result').fadeIn('slow');
            $('#result').html(data);
            $('.loading').hide();
        }
    })
    return false;
});

tinyMCE.init({
    // General options
    mode : "textareas",
    theme : "advanced",

    // Theme options
    theme_advanced_buttons1 : "bold,italic,underline,separator,image,separator,justifyleft,justifycenter,justifyright,jformatselect,fontselect,fontsizeselect,justifyfull,bullist,numlist,undo,redo,styleprops,cite,link,unlink,media,advhr,code,preview",
    theme_advanced_buttons2 : "",
    theme_advanced_toolbar_location : "top",
    theme_advanced_toolbar_align : "left",
    theme_advanced_statusbar_location : "bottom",
    theme_advanced_resize_horizontal : false,
    theme_advanced_resizing : true,
    extended_valid_elements :"a[name|href|target|title|onclick],img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name],hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style]",
});

您能向我解释一下我应该改变什么以及为什么改变才能获取文本区域中的值吗?

帖子版权声明 1、本帖标题:jQuery 和 TinyMCE:textarea 值未提交
    本站网址:http://xjnalaquan.com/
2、本网站的资源部分来源于网络,如有侵权,请联系站长进行删除处理。
3、会员发帖仅代表会员个人观点,并不代表本站赞同其观点和对其真实性负责。
4、本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
5、站长邮箱:yeweds@126.com 除非注明,本帖由Ansh Arora在本站《jquery》版块原创发布, 转载请注明出处!
最新回复 (0)
  • 使用ajax提交表单内容的正确方法如下:

    $('#myForm').on('submit', function (e) {
        e.preventDefault();
        $.ajax({
            type: 'POST',
            url: $(this).attr('action'),
            data: new FormData(this),
            dataType: 'JSON',
            contentType: false,
            cache: false,
            processData: false,
            success: function(data) {
                $('#result').fadeIn('slow');
                $('#result').html(data);
                $('.loading').hide();
            }
        })
        return false;
    });
    

    这样你就可以正确提交所有表单数据,包括 TinyMCE 数据

  • 首先:

    1. p1

    2. p2

      tinyMCE.get('editor_id').setContent(tinyMCE.get('editor_id').getContent()+_newdata);tinyMCE.triggerSave();
  • tinyMCE.triggerSave(); 似乎是正确的答案,因为它会将更改从 iFrame 同步到您的文本区域。

    不过,除了其他答案之外,还有一点——你为什么需要这个?我使用 tinyMCE 已经有一段时间了,没有遇到过表单字段无法通过的问题。经过一番研究,原来是他们对表单元素提交的“自动修补”功能,默认情况下是启用的 - http://www.tinymce.com/wiki.php/Configuration3x:submit_patch

    基本上,他们重新定义 submit 调用 triggerSave ,但 前提是 submit 尚未被其他东西重新定义:

    if (!n.submit.nodeType && !n.submit.length) {
        t.formElement = n;
        n._mceOldSubmit = n.submit;
        n.submit = function() {
            // Save all instances
            tinymce.triggerSave();
            t.isNotDirty = 1;
    
            return t.formElement._mceOldSubmit(t.formElement);
        };
    }
    

    因此,如果您的代码(或其他第三方库)中的其他内容干扰了 submit ,则它们的“自动修补”将不起作用,并且需要调用 triggerSave .

    编辑:实际上,在 OP 的案例中, submit 根本没有被调用。由于它是 ajax 的,因此这会绕过上面描述的“自动修补”。

  • 我只是隐藏了 tinymce并提交了表单,textarea的更改值丢失了。所以我添加了这个:

    $("textarea[id='id_answer']").change(function(){
        var editor_id = $(this).attr('id');
        var editor = tinymce.get(editor_id);
        editor.setContent($(this).val()).save();
    });
    

    它对我有用。

  • 有趣的发现。我相信您指的是版本 3.5.7?我刚刚对 3.5.7 和 3.5.8 进行了一些测试,tinyMCE.triggerSave() 在正常模式下对我来说确实运行良好。但您说得对,jquery 模式下已经存在某种自动保存功能,这与 tinymce.com/wiki.php/Plugin:autosave: \'此插件将来很可能会扩展以提供 AJAX 自动保存支持。\'相矛盾

  • @eldar:我在 3.6.7 以“正常模式”运行时遇到了同样的问题;并且 triggerSave 和 save() 都不起作用。

    我改用了 jQuery TinyMCE 插件,现在无需做任何其他事情,它就可以正常工作了。我猜他们在某个地方实现了某种自动触发器,以保存 jQuery 版本的 TinyMCE。

  • 您也可以简单地使用 TinyMCE 的 jQuery 插件和包来解决这些问题。

  • 我遇到这个问题有一段时间了,但 triggerSave() 没有效果,其他方法也一样。

    所以我找到了一种适合我的方法(我在这里添加它是因为其他人可能已经尝试过 triggerSave 等......):

    tinyMCE.init({
       selector: '.tinymce', // This is my <textarea> class
       setup : function(ed) {
                      ed.on('change', function(e) {
                         // This will print out all your content in the tinyMce box
                         console.log('the content '+ed.getContent());
                         // Your text from the tinyMce box will now be passed to your  text area ... 
                         $(".tinymce").text(ed.getContent()); 
                      });
                }
       ... Your other tinyMce settings ...
    });
    

    当你提交表单或其他任何内容时,你所要做的就是从选择器中获取数据(在我的情况下 .tinymce :)使用 $('.tinymce').text() .

  • 我唯一能用到的办法就是使用 tinyMCE.activeEditor.getContent()。谢谢!

  • var text = tinyMCE.activeEditor.getContent();
    $('#textareaid').remove();
    $('<textarea id="textareaid" name="textareaid">'+text+'</textarea>').insertAfter($('[name=someinput]'));
    
  • ezer 1月前 0 只看Ta
    引用 12

    这将确保当你失去文本区域的焦点时内容得到保存

     setup: function (editor) {
                    editor.on('change', function () {
                        tinymce.triggerSave();
                    });
    
  • 引用 13

    我用过:

    var save_and_add = function(){
        tinyMCE.triggerSave();
        $('.new_multi_text_block_item').submit();
    };
    

    这就是您需要做的全部事情。

  • 引用 14

    当你在表单上运行 ajax 时,你需要先告诉 TinyMCE 更新你的文本区域:

    // TinyMCE will now save the data into textarea
    tinyMCE.triggerSave(); 
    // now grap the data
    var form_data = form.serialize(); 
    
  • 引用 15

    @Brenden:如果插件也使用 onsubmit 事件来拦截表单,那么您必须确保您的事件处理程序首先运行,否则插件将在您有机会将数据从编辑器移动到表单字段之前从表单收集数据。

  • 我正在使用 jquery ajaxForm 插件执行此操作,并且 textarea 值直到我第二次提交才传递,所以我认为您无法在 onsubmit 处理程序中更改已提交的数据。

  • 这是因为它不再是一个文本区域。它被 iframe(和诸如此类的东西)取代了,并且序列化函数只从表单字段获取数据。

    向表单添加隐藏字段:

    <input type="hidden" id="question_html" name="question_html" />
    

    在发布表单之前,从编辑器中获取数据并放入隐藏字段中:

    $('#question_html').val(tinyMCE.get('question_text').getContent());
    

    (如果您正常发布表单,编辑器当然会自行处理这个问题,但由于您是在抓取表单并自己发送数据而不使用表单,因此表单上的 onsubmit 事件永远不会被触发。)

  • 来自 TinyMCE、jQuery 和 Ajax 表单 :

    TinyMCE 表单提交

    • p1

    • p2

    • p3

      tinyMCE.triggerSave();

    $('form').bind('form-pre-serialize', function(e) {
        tinyMCE.triggerSave();
    });
    
  • 引用 19

    4.1.0 以上版本的 tinymce 存在一个错误,其粗体和斜体按钮没有直接添加“mce-active”类(但只有在文本区域字段中输入几个字符后才会添加) - 因此按钮看起来没有被激活...有线...(jsfiddle.net/9euk9/304)

  • @DooManiac - 很好,谢谢。答案和 jsfiddle 已更新。我在回调中保留了匿名函数,以确保 save 被调用为编辑器对象的方法。

返回
作者最近主题: