使用JavaScript将文本字段和TinyMCE字段组合到第三个字段。将TinyMCE约束为编号列表

Question

1. 我希望今日日期文本字段和最后更新所见即所得字段追加（不替换现有文本）“归档到历史记录”按钮上的完整项目历史记录所见即所得字段。
2. 日期应该位于最后一次更新的顶部，如附加示例所示，并且应该是粗体。
3. 将lastUpdate值复制到历史记录字段后，清除lastUpdate字段。
4. 设置每个WYSIWYG字段，只允许在可能的情况下输入编号列表？

我尽力做到尽我所能，详细说明了我在找什么，并在下面的小提琴中提供了一个例子。

http://fiddle.jshell.net/4n3Cr/22/

谢谢

<p><strong>Today's Date</strong></p> 
<input type="text" name="todaysDate" id="todaysDate" class="todaysDate" /> 

<p><strong>Last Update</strong></p> 

<textarea name="lastUpdate" id="lastUpdate"> 
    <ol> 
    <li>The lastest update on my project. If possible, can we constrain the WYSIWYG editors to only allow numbered lists?</li> 
    </ol> 
</textarea> 

<br> 

<button id="move" value="test" type="button">Copy date and move Last Update text to the History WYSIWYG below</button> 

<p><strong>Complete Project History Below</strong></p> 
<textarea id="history"> 
    <strong>10/16/17</strong> 
    <ol> 
    <li>Some existing content I want to remain.</ol> 
    </li> 
    </ol> 
</textarea> 

<div class="dummy"><strong>DATE</strong></div> 



$(document).ready(function(){ 
    //Initialize Last Update TinyMCE WYSIWYG 
    tinymce.init({ 
    menubar: false, 
    branding: false, 
    selector: "#lastUpdate", 
    plugins: "lists" 
    }); 

    //Initialize history textarea TinyMCE WYSIWYG 
    tinymce.init({ 
    menubar: false, 
    branding: false, 
    selector: "#history", 
    plugins: "lists" 
    }); 

    //Format Today's Date in dd/mm/yyyy format 
    var d = new Date(); 
    var month = d.getMonth()+1; 
    var day = d.getDate(); 
    var output = ((''+month).length<2 ? '0' : '') + month + '/' + 
     ((''+day).length<2 ? '0' : '') + day + '/' + d.getFullYear(); 
    $("#todaysDate").val(output); 

    //I can clear lastUpdate, but need help appending the values to the history WYSIWYG 
    $("#move").click(function() { 
     var lastUpdateEditor = 'lastUpdate'; 
     tinymce.get(lastUpdateEditor).setContent(''); 
    }); 

//Append date and last update to the history field. Right now it is set to on change, but I want button click etc. 
    $(document).on('change', $('input.lastUpdate'), function(){ 
    dummy_html = $('div.dummy').html(); 
    last_update = $('#lastUpdate').html(); 

    editor_content = dummy_html.replace("DATE", $('input.lastUpdate').val()); 
    editor_content = last_update.replace($('input.lastUpdate').val()); 

    tinymce.activeEditor.setContent(editor_content); 
    }); 
}); 

Answer 1

  $(document).ready(function(){ 
      alert('hackhand was of 0$ due to session : your instructor :-) lax'); 
      //Initialize Last Update TinyMCE WYSIWYG 
      tinymce.init({ 
      menubar: false, 
      branding: false, 
      selector: "#lastUpdate", 
      plugins: "lists" 
      }); 

      //Initialize history textarea TinyMCE WYSIWYG 
      tinymce.init({ 
      menubar: false, 
      branding: false, 
      selector: "#history", 
      plugins: "lists" 
      }); 

      //Format Today's Date in dd/mm/yyyy format 
      var d = new Date(); 
      var month = d.getMonth()+1; 
      var day = d.getDate(); 
      var output = ((''+month).length<2 ? '0' : '') + month + '/' + 
      ((''+day).length<2 ? '0' : '') + day + '/' + d.getFullYear(); 
      $("#todaysDate").val(output); 

      //I can clear lastUpdate, but need help appending the values to the history WYSIWYG 
      $("#move").click(function() { 
      var lastUpdateEditor = 'lastUpdate'; 
      //alert(tinymce.get(lastUpdateEditor).getContent()); 
      //tinymce.get(lastUpdateEditor).setContent(''); 
      var historyEditor = 'history'; 
      tinymce.get(historyEditor).setContent(jQuery('#todaysDate').val()+'<br/>'+tinymce.get(lastUpdateEditor).getContent()+'<br />'+tinymce.get(historyEditor).getContent()); 
      tinymce.get(lastUpdateEditor).setContent(''); 
      }); 

      //Append date and last update to the history field. Right now it is set to on change, but I want button click etc. 
      $(document).on('change', $('input.lastUpdate'), function(){ 
      dummy_html = $('div.dummy').html(); 
      last_update = $('#lastUpdate').html(); 

      editor_content = dummy_html.replace("DATE", $('input.lastUpdate').val()); 
      editor_content = last_update.replace($('input.lastUpdate').val()); 

      tinymce.activeEditor.setContent(editor_content); 
      }); 
      });