TinyMCE 在动态生成的文本区域上不可点击和编辑
Posted
技术标签:
【中文标题】TinyMCE 在动态生成的文本区域上不可点击和编辑【英文标题】:TinyMCE not clickable and editable on dynamically generated textarea 【发布时间】:2019-12-29 14:38:45 【问题描述】:我有一组 div
元素用于旅行行程。我使用添加新按钮重复输入组。在每组输入中,都有一个带有 TinyMCE 的文本区域。
初始(父)文本区域工作正常,但动态生成的其他文本区域不能正常工作。 TinyMCE 文本区域正在显示,但它完全不可点击,不可编辑。
我正在使用来自 GitHub 的这个 jQuery 插件来重复我的 div:https://github.com/vurghus-minar/isiaFormRepeater
这是我的带有一组输入字段的 div
<div class="isiaFormRepeater repeat-section" id="example" data-field-id="itinerary" data-items-index-array="[1]">
<div class="col-xs-12 repeat-items">
<div class="col-md-12 repeat-item">
<div class="row" id="field0">
<div class="form-group">
<label class="col-md-2 control-label" for="action_name">Day Travel Plan</label>
<div class="col-md-10">
<textarea name="itinerary[1][daydetails]" class="form-control input-md repeat-el"></textarea>
</div>
</div>
<br><br>
<div class="form-group">
<label class="col-md-2 control-label" for="action_id">Day No</label>
<div class="col-md-10">
<input id="itinerary[1][day]" name="itinerary[1][day]" type="text" placeholder="" class="form-control input-md repeat-el">
</div>
</div>
<br><br>
<div class="form-group">
<label class="col-md-2 control-label" for="action_json">Remarks</label>
<div class="col-md-10">
<input type="text" id="itinerary[1][remarks]" name="itinerary[1][remarks]" class="form-control input-md repeat-el">
<div id="action_jsondisplay"></div>
</div>
</div>
</div>
</div>
</div>
</div>
这是我使用该插件文档的 jQuery 代码。它成功地重复了 div,但 TinyMCE 只在原始 div 上工作。
<script src="../public/js/jquery.min.js">
<script src="../public/repeater/isia-form-repeater.min.js"></script>
<script>
$(document).ready(function()
$('#example').isiaFormRepeater(
addButton: '<div class="repeat-add-wrapper"><a data-repeat-add-btn class="repeat-add pure-button pure-button-primary" href="#"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span>Add New City & Hotel</a></div>',
removeButton: '<a data-repeat-remove-btn class="repeat-remove pure-button pure-button-primary" href="#">Remove this City</a>'
);
$('#example').isiaFormRepeater();
);
</script>
这是我的 TinyMCE 脚本
<script src="../public/tinymce/tinymce.min.js"></script>
<script>
tinymce.init(
selector: 'textarea',
height: 200,
);
</script>
【问题讨论】:
【参考方案1】:如果您向页面动态添加额外的textarea
元素,您需要在每次动态添加后再次运行tinymce.init()
。我无法从您的代码中判断您是否正在这样做,但如果没有发生这种情况,您将在首次运行 init()
函数时将任何 textarea 转换为 TinyMCE,但此后不会,除非您在元素成为一部分后再次调用 init()
DOM。
【讨论】:
以上是关于TinyMCE 在动态生成的文本区域上不可点击和编辑的主要内容,如果未能解决你的问题,请参考以下文章
如何让 Parsley JS 验证在 Tinymce 富文本区域上工作?具体来说,如何通知 Parsley.js Tiny MCE 的更改?