Symfony2 + TinyMCE -> 极端文本区域错误

Question

我目前正在使用 Symfony2 和 bootstrap 模板。我想将 TinyMCE 的一个极端文本区域用于时事通讯，但我运行在让它工作时遇到了问题。

这是模板的 link，您可以在其中看到文本区域：http://devoops.me/themes/devoops/#ajax/forms_layouts.html

自带通用js脚本。有一个启动 tinymce 函数：

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'}
        ]
    });
}

在摆弄模板时，我得出的结论是这段代码：

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

足以让一个textarea随时变成TinyMCE极致文本编辑器

问题在于让它与 Symfony 生成的表单一起工作。我尝试了第一种方法，不是最漂亮的但至少它做了一些事情（脚本添加了 {% javascripts %}）：

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

这确实有效，可惜只有一次。如果我加载另一个 ajax 内容并返回，textarea 将是一个标准的。这样做时检查页面不会产生任何 javascript 错误。

为了分解，我 copy/pasted 将 Symfony（或者我应该说 Twig）生成的原始 html 放入相关的 twig 文件中。

我现在有一个看起来像这样的树枝文件：

<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>

这仍然没有用。但是，删除 <div class="form-group"></div> 标签可以使其完美运行。我一直在尝试几种方法，尝试不同的 TinyMCE 版本，寻找编码错误，但无济于事。

考虑到自己是网络开发新手，我担心这是我需要外部观点的错误。任何形式的帮助将不胜感激。

Answer 1

您如何生成 symfony 2 表单？据我所知，生成 tinymce 是一件简单的事情，你只需为你希望变成一个微型 mce 的表单输入设置一个 id/class，然后你将你的 javascript 设置为 look为此 id/class 并对其进行转换。

要在 symfony 中为表单字段指定一个特殊 ID，您可以执行以下操作：

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

这将呈现一个名为 text 且 ID 为 wysiwig_full 的字段。将文本替换为您的字段名称。

Answer 2

我完全找不到问题的根源。受够了，我切换到 CKeditor，它开箱即用，完美无缺，我只需要更改编辑器路径 var，因为我有一个包含所有插件的文件夹。

Symfony2 + TinyMCE -> 极端文本区域错误

Symfony2 + TinyMCE -> extreme textarea errors

html

javascript

jquery

symfony

tinymce-4