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

Question

我必须将数据从按钮数据属性传递到 bootstrap 中的文本区域，文本区域启用了 tinymce。问题是所有其他数据都在模式中显示，只是 textarea 数据没有显示，当我禁用 tinymce 时，我可以看到它在正常 textarea 中工作。

我已经创建了一个 fiddle，尝试删除 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 函数可能正在尝试设置文本区域的 HTML 内容在 TinyMCE 已经初始化之后。

在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');
});

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

Pass data attribute from button to textarea in bootstrap modal not working when tinymce enabled

jquery

textarea

tinymce

bootstrap-modal