tinymce textareas 值错误 - 无法解决

Question

$('.button-save').click(function(b){
                b.preventDefault();
                var title = $('#title').val(),
                    category = $('#category').val(),
                    file = $('#file').val(),
                    short_content = tinyMCE.get('#short_content').getContent(),
                    content = tinyMCE.get('#content').getContent(),
                    date = $('#date').val(),
                    language = $('#language').val();
                alert(short_content);
                $.ajax({
                    type: 'POST',
                    url: '/admin/save',
                    data: {
                        title:title,
                        category:category,
                        file:file,
                        short_content:short_content,
                        content:content,
                        date:date,
                        language:language
                    },
                    success: function(data){
                        $('.adm-notification').html(data);
                    }
                });
            });

如您所见，有两个文本区域 (short_content,content)；我试图通过 tinyMCE.get('#content').getContent() 来获取它们。但我得到了错误

未捕获的类型错误：无法调用未定义的方法“getContent”

HTML 代码

 <form action=\"\" method=\"post\">
            <div class=\"element\">
                <label for=\"name\">Page title <span class=\"red\">(required)</span></label>
                <input id=\"title\" name=\"name\" value=".$edit['title']." class=\"text\" />
            </div>
            <div class=\"element\">
                <label for=\"category\">Category <span class=\"red\">(required)</span></label>
                <input id=\"category\" name=\"category\" value=".$edit['category']." class=\"text\" />
            </div>
            <div class=\"element\">
                <label for=\"attach\">Attachments</label>
                <input type=\"file\" id=\"file\" name=\"attach\" />
            </div>
            <div class=\"element\">
                <label for=\"short-content\">Short content <span class=\"red\">(required)</span></label>
                <textarea name=\"short_content\" id=\"short_content\" class=\"textarea\" rows=\"10\">".$edit['short_content']."</textarea>
            </div>
            <div class=\"element\">
                <label for=\"content\">Long content <span class=\"red\">(required)</span></label>
                <textarea name=\"content\" id=\"long_content\" class=\"textarea\" rows=\"10\">".$edit['content']."</textarea>
            </div>
            <div class=\"element\">
                <label for=\"date\">Date <span class=\"red\">(required)</span></label>
                <input id=\"date\" name=\"date\" class=\"text\" value=".$edit['date']." />
            </div>
            <div class=\"element\">
                <label for=\"language\">Language <span class=\"red\">(required)</span></label>
                <input id=\"language\" name=\"language\" value=".$edit['lang']." class=\"text\" />
            </div>
            <div class=\"entry\">
                <button type=\"submit\" id=\"button-save\" class=\"add button-save\">Save page</button>
            </div>
        </form>

如何解决？

Answer 1

您需要提供文本区域的id，而不提供#。

tinyMCE.get('long_content').getContent()
tinyMCE.get('short_content').getContent()

顺便说一句，您需要决定是要提交表单还是使用 JavaScript 读取值，然后将其发送到服务器。这里有一个用 JS 读出来的解决方案：

<script type="text/javascript">
    tinyMCE.init({
            mode : "textareas"
    });


    $(function(){
        $('#button-save').click(function(){
            console.log("ok");
            var short_content = tinyMCE.get('short_content').getContent();
            var content = tinyMCE.get('long_content').getContent();
            alert(short_content);
            alert(content);
        });
    });
</script>


<textarea name="short_content" id="short_content" >'short_content'</textarea>
<textarea name="long_content" id="long_content" >'content'</textarea>

<button id="button-save" class="add button-save">Save page</button>

Same as a working fiddle。