使用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); 
      }); 
      });