使用 jQuery 从 tinyMCE 编辑器保存数据答案

【问题标题】：Saving data from tinyMCE editor using jQuery使用 jQuery 从 tinyMCE 编辑器保存数据
【发布时间】：2016-06-13 09:16:35
【问题描述】：

我正在使用 jQuery 进行简单的聊天。问题出在表格上？其中包含类型为“文本”的输入和一个按钮。在我的 JS 代码中，如果文本字段为空，我将禁用该按钮，并在其中输入一些文本时启用它。它工作正常，因为我有以下代码：

home.html:

{% load staticfiles %}
<html>
<head>
    <title>Public chat</title>

    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

    <!-- JavaScript -->
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>

<body>
    <!-- Here are the previous messeeges showed, it doesn't matter now-->

    <form id="chat-form" method="post" action="/post/">
        <div id="chat-bottom" class="input-group">
            <input type="text" id="chat-msg" name="chat-msg" class="form-control"/>
            <span class="input-group-btn">
                <input class="btn btn-default" id="send" type="submit" value="Send"/>
            </span>
        </div>
    </form>
</body>

<script src="{% static 'chat.js' %}"></script>
</html>

聊天.js：

$('#chat-form').on('submit', function(event){
    event.preventDefault();

    $.ajax({
        url : '/post/',
        type : 'POST',
        data : { msgbox : $('#chat-msg').val() },

        success : function(json){
            $('#chat-msg').val('');
            $('#msg-list').append('<li class="text-right list-group-item">' + json.msg + '</li>');
            var chatlist = document.getElementById('msg-list-div');
            chatlist.scrollTop = chatlist.scrollHeight;
        }
    });
});

function getMessages(){
    if (!scrolling) {
        $.get('/messages/', function(messages){
            $('#msg-list').html(messages);
            var chatlist = document.getElementById('msg-list-div');
            chatlist.scrollTop = chatlist.scrollHeight;
        });
    }
    scrolling = false;
}

var scrolling = false;
$(function(){
    $('#msg-list-div').on('scroll', function(){
        scrolling = true;
    });
    refreshTimer = setInterval(getMessages, 500);
});

$(document).ready(function() {//here checking if the text field is empty
     $('#send').attr('disabled','disabled');
     $('#chat-msg').keyup(function() {
        if($(this).val() != '') {
           $('#send').removeAttr('disabled');
        }
        else {
        $('#send').attr('disabled','disabled');
        }
     });
 });

当我尝试将 TinyMCE 添加到文本字段时

<script type="text/javascript" src="{% static 'tiny_mce/tiny_mce.js' %}"></script>

<script type="text/javascript">
tinyMCE.init({
    theme : "advanced",
    selector : "#chat-msg"
});
</script>

“发送”按钮始终处于禁用状态。我试着在这里Get value of tinymce textarea with jquery selector 这样做，所以函数看起来像这样：

$('#chat-form').on('submit', function(event){
    event.preventDefault();
    tinyMCE.triggerSave();

    $.ajax({
        //here the same code as above in the same function
    });
});

还有这个：

$(document).ready(function() {
     $('#send').attr('disabled','disabled');
     $('#chat-msg').keyup(function() {
        tinyMCE.triggerSave();
        if($(this).val() != '') {
           $('#send').removeAttr('disabled');
        }
        else {
        $('#send').attr('disabled','disabled');
        }
     });
 });

vut 仍然是一样的。起初我不想使用 getContent() （正如在许多类似问题中所说的那样），因为在文档 (http://archive.tinymce.com/wiki.php/API3:method.tinymce.Editor.getContent) 中据说可以清理内容。最后我试过了，没有效果。

我对 jQuery 和 TinyMCE 都是新手，所以我相信我遗漏了一些明显的东西。此处应如何更改 chat.js 以检索文本字段的内容？

【问题讨论】：

标签： javascript jquery validation tinymce

【解决方案1】：

我要改变的第一件事是你的keyup 函数。当将 TinyMCE 注入页面时，原始表单元素（在您的情况下为 <input>）不再可见。如果您使用浏览器工具，您会看到 TinyMCE 注入了一系列<div>s 和一个<iframe>，有效地隐藏了您的<input>。执行此操作后，document.ready 中的代码将永远不会触发：

//This won't trigger anything with TinyMCE on the page
$('#chat-msg').keyup(function() {  
    tinyMCE.triggerSave();
    if($(this).val() != '') {
       $('#send').removeAttr('disabled');
    }
    else {
    $('#send').attr('disabled','disabled');
    }
 });

相反，您可以在 TinyMCE 的 init 函数中添加 keyup 或 change 函数：

tinymce.init({
  selector: 'textarea',
  ...
  setup: function (editor) {
       editor.on('change', function () {
           //Perform your updating of the button here
       });
       editor.on('keyup', function () {
           //Perform your updating of the button here
       });

  }
});

【讨论】：

【解决方案2】：

在我的例子中 tinyMCE.triggerSave();没有工作，所以我在 onChange Event 手动设置了内容。你可以这样做。

<script type="text/javascript">
tinyMCE.init({
    theme : "advanced",
    selector : "#chat-msg"
    setup: function (editor) {
       editor.on('change', function () {
           var content = tinyMCE.activeEditor.getContent().trim();
           var tinyMceElement = tinyMCE.get(editor.editorId).getElement();
            $(tinyMceElement).html(content);
       });
});
</script>

注意：var content = tinyMCE.activeEditor.getContent().trim(); var tinyMceElement = tinyMCE.get(editor.editorId).getElement();

这是在旧 tinyMce 中获取文本内容和 dom 元素的方式，在新版本中可能会有所不同。

【讨论】：