Symfony2 + TinyMCE -> extreme textarea errors

Question

I'm currently using Symfony2 and a bootstrap template. I would like to use one of TinyMCE's extreme textarea for a newsletter, but I am running into issues while getting it to work.

Here's a link to the template where you can see the textareas : http://devoops.me/themes/devoops/#ajax/forms_layouts.html

It comes with a general js script. There is a start tinymce function :

function TinyMCEStart(elem, mode) {
    var plugins = [];
    if (mode == 'extreme') {
        plugins = ["advlist anchor autolink autoresize autosave bbcode charmap code contextmenu directionality ",
            "emoticons fullpage fullscreen hr image insertdatetime layer legacyoutput",
            "link lists media nonbreaking noneditable pagebreak paste preview print save searchreplace",
            "tabfocus table template textcolor visualblocks visualchars wordcount"];
    }
    <!-- ADDED BY ME
    tinyMCE.baseURL = 'http://'+location.host+resourcesUrl+"/plugins/tinymce";
    tinyMCE.baseURI.setPath(resourcesUrl+"/plugins/tinymce");
    tinyMCE.documentBaseURL = 'http://'+location.host+'/ormindo/web/';
    -->
    tinyMCE.init({selector: elem,
        theme: "modern",
        plugins: plugins,
        //content_css: "css/style.css",
        toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | print preview media fullpage | forecolor backcolor emoticons",
        style_formats: [
            {title: 'Header 2', block: 'h2', classes: 'page-header'},
            {title: 'Header 3', block: 'h3', classes: 'page-header'},
            {title: 'Header 4', block: 'h4', classes: 'page-header'},
            {title: 'Header 5', block: 'h5', classes: 'page-header'},
            {title: 'Header 6', block: 'h6', classes: 'page-header'},
            {title: 'Bold text', inline: 'b'},
            {title: 'Red text', inline: 'span', styles: {color: '#ff0000'}},
            {title: 'Red header', block: 'h1', styles: {color: '#ff0000'}},
            {title: 'Example 1', inline: 'span', classes: 'example1'},
            {title: 'Example 2', inline: 'span', classes: 'example2'},
            {title: 'Table styles'},
            {title: 'Table row 1', selector: 'tr', classes: 'tablerow1'}
        ]
    });
}

While fiddling with the template, I have come to the conclusion that this code :

<textarea class="form-control" rows="5" id="wysiwig_full"></textarea>
<script type="text/javascript">
$(document).ready(function() {
    TinyMCEStart('#wysiwig_full', 'extreme');
});
</script>

is enough to get a textarea turned into a TinyMCE extreme text editor at any time.

The problem lies in getting this to work with a Symfony-generated form. I tried a first approach, not the prettiest but at least it does something (script is added with {% javascripts %}) :

$(document).ready(function() {   
// Create Wysiwig editor for textarea
TinyMCEStart('#ormindo_newsletterbundle_newslettermessage_contents', 'extreme');
});

This does work, alas only once. If I load another ajax content and come back, the textarea will be a standard one. Inspecting the page while doing so does not yield any javascript error.

Trying to break things down, I copy/pasted the raw html generated by Symfony (or should I say Twig) into the associated twig file.

I now had a twig file looking like this :

<div class="form-group">
<textarea id="ormindo_newsletterbundle_newslettermessage_contents" name="ormindo_newsletterbundle_newslettermessage[contents]" class="form-control"></textarea>
</div>
<script type="text/javascript">
$(document).ready(function() {
    TinyMCEStart('#ormindo_newsletterbundle_newslettermessage_contents', 'extreme');
});
</script>

This still did not work. However, removing the <div class="form-group"></div> tag made it work flawlessly. I have been trying several things, trying different TinyMCE version, hunting coding errors, to no avail.

Considering myself a web-dev novice, I fear this is the kind of error where I need an external point of view. Any kind of help will be greatly appreciated.

Answer 1

How are you generating the symfony 2 form? As far as I know it is a simple matter to generate the tinymce, you just set an id/class for the form input that you wish to turn into a tiny mce, and then you set your javascript to look for that id/class and transform it.

To give a special id for a form field in symfony you do the following:

{{form_widget(form.text,{'id':'wysiwig_full'})}}

That will render a the field called text with the id wysiwig_full. Replace text with whatever the name of your field is.

Answer 2

I was absolutely unable to find the source of my issues. Being quite fed up, I switched up to CKeditor, and it worked flawlessly out of the box, I just had to change the editor path var because I have a folder containing all my plugins.