CKEditor shows me a textarea inside text input - php

Question

I have a problem with the render of my view.
Here is how I build my form :
$builder->add('intitule', CKEditorType::class, [
'label'=>'NEW_CGU',
'required'=>false,
'data'=>'testj'
]);
I'm displaying it like this :
<div class="row m-0">
<div class="col-xs-5 plr-16 pt-16 pb-16 background-white" style="width : 100%">
{{ form_label(form.intitule) }}
<textarea id="editor1" >
{{ form_start(form, { 'attr': { 'novalidate': 'novalidate' }}) }}
{{ form_widget(form.intitule, { 'attr': { 'class': 'inscription plr-16' , 'rows' : '20'}}) }}
{{ form_errors(form.intitule) }}
{#<p class="help-block">Maximum 500 caractères.</p>#}
</textarea>
<div class="text-right">
{{ "BACK"|trans }}
{% if is_granted('ROLE_PREVIOUS_ADMIN') %}
<button disabled class="button-square" title="non accessible en consultation">Valider</button>
{% else %}
<button type="submit" class="button-square" onclick="return confirm('Êtes vous sûr de vouloir effectuer ces modifications?')">Valider</button>
{% endif %}
</div>
{{ form_end(form) }}
</div>
</div>
Everything works, but there is something wrong with my display. I have a textarea within the "block text" of CKEditor
Finally, my JS looks like this :
$(function() {
CKEDITOR.replace( 'editor1', {
removePlugins: 'magicline',
height: 400
} );
});
What am I doing wrong please ?

Answer 1

Just simply render your widget out of html form inputs !
Remove your <textarea id="editor1" > tag.