将数据属性从引导模式中的按钮传递到文本区域在启用 tinymce 时不起作用

Question

我必须将数据从按钮数据属性传递到引导中的文本区域，文本区域已启用 TextNymce。 问题是所有其他数据都显示在模态中，只是文本区域数据没有显示，当我禁用 Tinymce 时，我可以看到它在普通文本区域中工作。

我已经创建了一个小提琴，尝试删除 Tinymce 部分，它将在那里工作，当我们再次添加 Tinymce 时，它不起作用。

这是我的JavaScript部分

tinymce.init({
selector: "textarea",
height: 300
}); 

$(document).on("click", ".open-AddBookDialog", function() {
var id = $(this).data('id');
var tourid = $(this).data('tourid');
var city = $(this).data('city');
var day = $(this).data('day');
var daydetails = $(this).data('dd');
var remarks = $(this).data('remarks');
$(".modal-body #dayidn").val(id);
$(".modal-body #touridn").val(tourid);
$(".modal-body #daynon").val(day);
$(".modal-body #citydetn").val(city);
$('.modal-body').find('#detailsofday').html(daydetails);
$(".modal-body #remarksn").val(remarks);

$('#myModalupdate').modal('show');
//tinyMCE.get("editor").focus();
});

.text-blue{
float: left!important;
padding: 10px 90px;
font-size: 20px;
margin: 0 auto;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/5.0.14/tinymce.min.js"></script>
<a href="javascript:void(0);" data-id="650" data-tourid="80" data-day="Day 1" data-city=" Ho Chi Minh City" data-dd="<p>Welcome to Saigon! You will be met at the airport and transferred to your hotel. Saigon is a bustling, dynamic and industrious urban center. It is the largest city in Vietnam, the economic capital and the cultural trendsetter whilst within the teeming metropolis are the timeless traditions and beauty of an ancient culture.&nbsp;</p>" data-remarks="Overnight: Ho Chi Minh City" class="open-AddBookDialog text-blue pull-right tips" title="Edit Day"><i class="fa fa-edit fa-lg"></i>Click me</a>

<!-- Modal -->
<div class="modal fade" id="myModalupdate" role="dialog">
<div class="modal-dialog modal-lg">

<div class="modal-content">
<div class="modal-header" style="padding:10px 50px;">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4><span class="glyphicon glyphicon-lock"></span> Add/Edit Day</h4>
</div>
<div class="modal-body" style="padding:10px 25px;">
<form role="form" id="itineraryupdate" name="itineraryupdate">
<input type="hidden" name="tourid" id="touridn" value="">
<input type="hidden" name="id" id="dayidn" value="">
<div class="form-group">
<label for="usrname"><span class="glyphicon glyphicon-user"></span> Day No#</label>
<input type="text" class="form-control" name="day" id="daynon" value="" placeholder="Enter day No">
</div>
<div class="form-group">
<label for="usrname"><span class="glyphicon glyphicon-user"></span> Heading/City</label>
<input type="text" class="form-control" name="cityhead" id="citydetn" value="" placeholder="Enter city/title">
</div>
<div class="form-group">
<label for="psw"><span class="glyphicon glyphicon-eye-open"></span> Day Details</label>
<textarea name="daydetails" id="detailsofday"></textarea>
</div>
<div class="form-group">
<label for="psw"><span class="glyphicon glyphicon-eye-open"></span> Remarks/Overnight</label>
<input type="text" name="remarks" class="form-control" id="remarksn" value="" placeholder="Enter remarks">
</div>
<button type="submit" id="submit" class="btn btn-success btn-block"><span class="glyphicon glyphicon-off"></span> Submit</button>
</form>
</div>
</div>
</div>
</div>

Answer 1

您的 jQuery 函数可能在 TinyMCE 初始化后尝试设置文本区域的 HTML 内容。

要在TinyMCE中设置HTML内容，您可以使用.setContent()方法： https://www.tiny.cloud/docs/api/tinymce/tinymce.editor/#setcontent

我根据您的代码创建了一个 Tiny Fiddle 示例，展示了.setContent()的实际操作： http://fiddle.tinymce.com/PPgaab

最相关的部分是：

$(document).on("click", ".open-AddBookDialog", function() {
var daydetails = $(this).data('dd');
tinymce.activeEditor.setContent(daydetails)
$('#myModalupdate').modal('show');
});