如何解决替换HTML后,TinyMCE文本区域被禁用无法重新初始化或设置内容
我正在动态设置HTML之后尝试设置tinyMCE文本区域的内容。
链接到CodePen示例:https://codepen.io/xanabobana/pen/oNxwgzX
重新创建步骤:
- 点击+添加新闻文章
- 点击上传新图片
- 单击关闭 结果:TinyMCE文本区域被“禁用”,没有内容,您不能在其中单击
我尝试过动态地重新初始化和设置内容,但这没有用。这是我的代码:
var newsModalHTML = $("#newsModalDiv").html();
tinymce.init({
selector: "#mytextarea",plugins: "image,link",tinycomments_mode: "embedded"
});
//replace news modal with image modal when adding a new image
$("#newImageButton").click(function() {
newsModalHTML = $("#newsModalDiv").html();
$("#newsModal").modal('toggle');
$("#newFileModal").modal('toggle');
});
//show the news modal when the file modal is closed
$("#closeUploadFile").click(function() {
$("#newsModalDiv").html(newsModalHTML);
tinymce.EditorManager.editors = [];
tinymce.init({
selector: "#mytextarea",});
tinymce.get("mytextarea").setContent("hello world");
$("#newsModal").modal('toggle');
$('#fldNewTitle').focus();
});
<button type="button" data-toggle="modal" data-target="#newsModal">+Add News Article</button>
<!--hidden edit article div-->
<div id="newsModalDiv" style="max-height:90%; overflow:scroll;">
<div class="modal fade" id="newsModal" tabindex="-1" role="dialog" aria-labelledby="newFileModalLabel">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content modalwidth">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="newFileModalLabel">Edit News Article</h4>
</div>
<div class="modal-body">
<form> <textarea id="mytextarea" name="mytextarea">test text</textarea></form>
<button type="button" id="newImageButton">Upload New Image</button>
</div>
<div class="modal-footer">
<span style="float:right"><button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" id="newArticleSubmit">Save</button></span></div>
</div>
</div>
</div>
</div>
</div>
<!--hidden upload image div-->
<div id="newFileModalDiv">
<div class="modal fade" id="newFileModal" role="dialog" aria-labelledby="newFileModalLabel">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content modalwidth">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="newFileModalLabel">Upload a New Image</h4>
</div>
<div class="modal-body">
<section class="col-md-12">
<article>
<p>Use this form to upload an image to the database for the current project.</p><br>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" id="closeUploadFile">Close</button>
<button type="button" class="btn btn-primary" id="submitNewFile">Upload Image</button>
</div>
</div>
</div>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。