TinyMCE Javascript Validation

我正在网站上构建一个发布系统，但每当我在文本区域中包含TinyMCE插件时，就会遇到一个奇怪的问题。我在JavaScript中验证输入，看看它是否为空（请参阅代码blow）。如果没有TinyMCE，它可以正常工作，但当我包含TinyMCE插件时，值不会返回任何值。

('#form_createblog').bind('submit',function(){
    var titel = $('input[name=titel]').val();
    var categorie = $('select[name=categorie]').val();
    var synopsis = $('textarea[name=synopsis]').val(); // this remains blank when tinymce is included
    var inhoud = $('textarea[name=inhoud]').val(); // this remains blank when tinymce is included
    console.log(titel);
    console.log(categorie);
    console.log(synopsis);  
    console.log(inhoud);
    var proceed = true;
    if (titel==""){
        $('input[name=titel]').css({'border':'2px solid red'});
        proceed = false;
        }
    if (categorie==""){
        $('select[name=categorie]').css({'border':'2px solid red'});
        proceed = false;
        }
    if (synopsis==""){
        $('textarea[name=synopsis]').css({'border':'2px solid red'});
        proceed = false;
        }
    if (inhoud==""){
        $('textarea[name=inhoud]').css({'border':'2px solid red'});
        proceed = false;
        }
more code leading up to ajax call ...

TinyMCE文件如下所示。

tinyMCE.init({
        mode : "textareas",
        theme : "advanced",
        plugins : "paste,advimage",
        width : "100%",
        height : "200",
        relative_urls : false,
        element_format : "html",
        doctype : '<html>',
        theme_advanced_blockformats : "p,h1,h2",
        theme_advanced_buttons1 : "formatselect,bold,italic,|,justifyleft,justifycenter,justifyright,|,bullist,numlist,|,link,unlink,cleanup,|,cut,copy,paste,pastetext,|,image,hr,removeformat",
        theme_advanced_buttons2 : "",
        theme_advanced_buttons3 : "",
        theme_advanced_toolbar_location : "top",
        theme_advanced_toolbar_align : "left",
        theme_advanced_statusbar_location : "bottom",
        theme_advanced_resizing : false,
        theme_advanced_resize_horizontal : false,
        theme_advanced_resizing_use_cookie : false,
        inline_styles : true
});

我的html看起来像这个

<form name="maakblogpost" id="form_createblog" method="post" onsubmit="return false;">
...................................
    <div class="row">
        <div class="col-md-4">
            <span class="titel">Samenvatting van de blogpost</span> 
        </div>   
        <div class="col-md-7">
            <textarea name="synopsis" value=""></textarea>
        </div>
    </div>     
    <div class="row">
    <div class="col-md-4">
            <span class="titel">De daadwerkelijke inhoud van de blogpost</span> 
        </div>   
        <div class="col-md-7">
            <textarea name="inhoud" value=""></textarea>
        </div>
    </div>
    <button class="submit button" name="maakblogpost" type="submit" id="left_btn">Sla uw blog op</button>    
</form>

我怀疑这是我自己代码中的一个错误，但为了安全起见，我把它发布在这里，因为当我不包括TinyMCE时，验证效果很好。

这是tinymce版本3.5.7 btw，这与它有关吗？有人知道在新版本上是否也会发生这种情况吗（我认为他们现在在4岁左右）

TinyMCE在提交表单之前不会设置文本区域值，因此在获取值之前需要手动调用tinyMCE.triggerSave();。

相关内容

最新更新

热门标签：