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

【问题标题】：Symfony2 + TinyMCE -> extreme textarea errorsSymfony2 + TinyMCE -> 极端文本区域错误
【发布时间】：2015-08-31 23:30:31
【问题描述】：

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

这里是模板的链接，您可以在其中看到文本区域：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 错误。

为了解决问题，我将 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 版本，寻找编码错误，但无济于事。

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

【问题讨论】：

使用模板版本的 TinyMCE (4.0.16)，我有一个不同的错误。 textarea 被简单地隐藏了，我的 Inspect Element 控制台显示“SyntaxError: expected expression, got '
好吧，对于 4.0.16，问题似乎是 TinyMCE 中的每个 .js 文件都被缩小了，所以它是 xxx.min.js。然而，TinyMCE 一直在寻找 xxx.js。我目前正在调查。

标签： javascript jquery html symfony tinymce-4

【解决方案1】：

您是如何生成 symfony 2 表单的？据我所知，生成 tinymce 是一件简单的事情，您只需为希望变成微型 mce 的表单输入设置一个 id/class，然后设置您的 javascript 以查找该 id/class 和转换它。

要为 symfony 中的表单域指定一个特殊的 id，你可以执行以下操作：

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

这将呈现一个名为 text 的字段，其 id 为 wysiwig_full。用您的字段名称替换文本。

【讨论】：

到目前为止，我只使用 {{ form_widget(form.txt) }}，因此我在 TinyMCEStart 中使用“#ormindo_newsletterbundle_newslettermessage_contents”这样的东西：它是由 Symfony 生成的 id。它确实有效，只是不漂亮，你的方法绝对是我应该使用的。可悲的是，您的方法和我的方法都产生相同的结果：如果我更改页面并返回，textarea 将保持不变。
你试过不同的浏览器吗？另外你有什么我可以在网上看到的吗？
Chromium 和 Firefox 显示相同的行为。但是我担心我的所有工作目前都是本地的。
您提到删除 form-group 使其完美运行。我也猜你正在使用 bootstrap.js？也许这会影响您的代码，尝试删除 bootstrap.js 或任何其他影响表单组的 javascript
实际上似乎是父标签的存在破坏了一切。如果我将 div 类更改为其他任何内容，我会得到相同的结果（也尝试不使用引导程序）。如果我删除父 div，它可以工作。

【解决方案2】：

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

【讨论】：