使用JavaScript将文本字段和TinyMCE字段组合到第三个字段。将TinyMCE约束为编号列表
问题描述:
- 我希望今日日期文本字段和最后更新所见即所得字段追加(不替换现有文本)“归档到历史记录”按钮上的完整项目历史记录所见即所得字段。
- 日期应该位于最后一次更新的顶部,如附加示例所示,并且应该是粗体。
- 将lastUpdate值复制到历史记录字段后,清除lastUpdate字段。
- 设置每个WYSIWYG字段,只允许在可能的情况下输入编号列表?
我尽力做到尽我所能,详细说明了我在找什么,并在下面的小提琴中提供了一个例子。使用JavaScript将文本字段和TinyMCE字段组合到第三个字段。将TinyMCE约束为编号列表
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);
});
});
答
$(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);
});
});
越来越近。我如何大胆的日期? http://fiddle.jshell.net/4n3Cr/32/ –