Javascript 使用jQuery从tinyMCE编辑器保存数据_Javascript_Jquery_Validation_Tinymce

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

javascript jquery validation tinymce

Javascript 使用jQuery从tinyMCE编辑器保存数据,javascript,jquery,validation,tinymce,Javascript,Jquery,Validation,Tinymce,我正在使用jQuery进行简单的聊天。问题在于形式？其中包含一个“文本”类型的输入和一个按钮。在我的JS代码中，如果文本字段为空，我将禁用按钮，并在其中输入一些文本时启用按钮。它工作正常，因为我有以下代码： home.html： {% load staticfiles %} <html> <head> <title>Public chat</title>  <

我正在使用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>

这是：

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

结果仍然是一样的。起初，我不想使用getContent（）（正如在许多类似问题中所说的那样），因为在文档（）中，据说它可以清除内容。最后，我尝试了，甚至没有效果

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

我要更改的第一件事是您的

键控功能。将TinyMCE注入页面时，原始表单元素（在您的示例中为
）将不再可见。如果您使用浏览器工具，您将看到TinyMCE注入了一系列
和一个
有效地隐藏了您的
。执行此操作后，文档中的代码将永远不会触发：
//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');
    }
 });

相反，您可以将keyup
或change
函数添加到TinyMCE的init函数：
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
       });

  }
});

我要更改的第一件事是您的keyup
函数。将TinyMCE注入页面时，原始表单元素（在您的示例中为
）将不再可见。如果您使用浏览器工具，您将看到TinyMCE注入了一系列
和一个
有效地隐藏了您的
。执行此操作后，文档中的代码将永远不会触发：
//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');
    }
 });

相反，您可以将keyup
或change
函数添加到TinyMCE的init函数：
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
       });

  }
});

在我的例子中，tinyMCE.triggerSave（）；无法工作，因此我在onChange事件中手动设置了内容。你可以这样做
<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>


tinyMCE.init({
主题：“高级”，
选择器：“#聊天信息”
设置：函数（编辑器）{
on（'change'，function（）{
var content=tinyMCE.activeEditor.getContent（）.trim（）；
var tinyMceElement=tinyMCE.get（editor.editorId.getElement（）；
$（tinyMceElement）.html（内容）；
});
});

注意：var content=tinyMCE.activeEditor.getContent（）.trim（）；
var tinyMceElement=tinyMCE.get（editor.editorId.getElement（）
这是在旧tinyMce中获取文本内容和dom元素的方法，在新版本中可能有所不同。
在我的例子中，tinyMce.triggerSave（）；不起作用，因此我在onChange事件中手动设置内容。您可以这样做
<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>


tinyMCE.init({
主题：“高级”，
选择器：“#聊天信息”
设置：函数（编辑器）{
on（'change'，function（）{
var content=tinyMCE.activeEditor.getContent（）.trim（）；
var tinyMceElement=tinyMCE.get（editor.editorId.getElement（）；
$（tinyMceElement）.html（内容）；
});
});

注意：var content=tinyMCE.activeEditor.getContent（）.trim（）；
var tinyMceElement=tinyMCE.get（editor.editorId.getElement（）
这是在旧tinyMce中获取文本内容和dom元素的方法，在新版本中可能有所不同