我正在使用一个有一个默认textarea字段的表单,我正在使用TinyMCE,该字段工作没有任何问题 - 除了我有几个可选的textarea字段,用户可以通过单击按钮添加 - 该按钮时clicked使用相同类型的textarea字段附加表单,但问题是,新添加的可选textarea字段不会加载TinyMCE但是简单的HTML textarea字段
这就是我正在做的事情
HTML表单中的默认textarea字段
<div class="form-group">
<label for="service_overview">Service Overview *</label>
<div class="input-group">
<div class="input-group-addon">
<i class="glyphicon glyphicon-user"></i>
</div>
<textarea rows="10" cols="50" name="service_overview[]" aria-required="true" required="s" placeholder="Service Overview" class="form-control">
</textarea>
<span class="input-group-addon danger">
<span aria-hidden="true" class="glyphicon glyphicon-remove"></span>
</span>
</div>
</div>
用于在表单
中附加另一个textarea字段的jQuery代码<script type="text/javascript">
$(document).ready(function() {
var max_fields = 10; //maximum input boxes allowed
var wrapper = $(".services"); //Fields wrapper
var add_button = $(".add_service_button"); //Add button ID
var x = 1; //initlal text box count
$(add_button).click(function(e){ //on add input button click
e.preventDefault();
if(x < max_fields){ //max input box allowed
x++; //text box increment
initMCEall();
$(wrapper).append('<div><div class="clearfix">{{ Form::button("Remove service", ["class" => "btn btn-danger remove_field"]) }}</div><div class="form-group"> {{ Form::label("service_title", "Service Title *") }} <div class="input-group"> <div class="input-group-addon"> <i class="glyphicon glyphicon-user"></i> </div> {{ Form::text("service_title[]", null, ["class" => "form-control", "placeholder" => "Service Title", "required" => "s", "id" => "itName", "aria-required" => "true"]) }} <span class="input-group-addon danger"> <span class="glyphicon glyphicon-remove" aria-hidden="true"></span> </span> </div> </div> <div class="form-group"> {{ Form::label("service_overview", "Service Overview *") }} <div class="input-group"> <div class="input-group-addon"> <i class="glyphicon glyphicon-user"></i> </div> {{ Form::textarea("service_overview[]", null, ["class" => "form-control", "placeholder" => "Service Overview", "required" => "s", "aria-required" => "true"]) }} <span class="input-group-addon danger"> <span class="glyphicon glyphicon-remove" aria-hidden="true"></span> </span> </div> </div> <div class="form-group"> <div class="fileinput fileinput-new" data-provides="fileinput"> <div class="fileinput-new thumbnail" style="width: 200px; height: 150px;"> <img data-src="holder.js/100%x100%" alt="..."></div> <div class="fileinput-preview fileinput-exists thumbnail" style="max-width: 200px; max-height: 150px;"></div> {{ Form::file("service_image[]") }} </div> </div></div>'); //add input box
}
});
$(wrapper).on("click",".remove_field", function(e){ //user click on remove text
e.preventDefault(); $(this).parent('div').parent('div').remove(); x--;
})
});
</script>
使用textareas启动TinyMCE的代码
<script type="text/javascript">
function initMCEall(){
tinyMCE.init({
mode : "textareas"
});
}
// add all textarea elements to document
initMCEall();
</script>
我想要的是当用户加载另一个Textarea时,TinyMCE编辑器应该与添加的textarea集成,就像默认的textarea一样