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

Question

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

我创建了一个小提琴，尝试删除 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>

标签： jquerytinymcebootstrap-modaltextarea

Answer 1

在TinyMCE 初始化之后，您的 jQuery 函数可能正在尝试设置 textarea 的 HTML 内容。

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

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

最相关的部分是：

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