试图用tinymce加载附加textareas

时间:2015-05-31 17:27:51

标签: php jquery forms laravel tinymce

我正在使用一个有一个默认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一样

0 个答案:

没有答案