README

注意！此仓库已从stfalcon/TinymceBundle分叉，因为其不再维护。文档/版权信息/命名仍然引用旧仓库，将在后续修复。

此Bundle使将TinyMCE WYSIWYG编辑器添加到您的Symfony2项目变得非常简单。

安装

通过Composer安装

注意！此版本的TinyMCE bundle旨在用于TinyMCE版本4，并且仅与Symfony版本 >= 2.1 兼容。要升级您的配置，请参阅UPGRADE.md

使用以下控制台命令将TinyMCE bundle作为依赖项添加到您的应用的composer.json中

composer require gibilogic/tinymce-bundle

添加TinyMCE自动符号链接

"scripts": {
"post-install-cmd": [
    "Stfalcon\\Bundle\\TinymceBundle\\Composer\\ScriptHandler::createSymlink"
],
"post-update-cmd": [
    "Stfalcon\\Bundle\\TinymceBundle\\Composer\\ScriptHandler::createSymlink"
]
},

将StfalconTinymceBundle添加到您的应用kernel中。

// app/AppKernel.php
<?php
    // ...
    public function registerBundles()
    {
        $bundles = array(
            // ...
            new Stfalcon\Bundle\TinymceBundle\StfalconTinymceBundle(),
        );
    }

该bundle需要将必要的资源复制到web文件夹。您可以使用以下命令

    php app/console assets:install web/

在模板中包含

此bundle附带一个Twig扩展，这使得将TinyMCE Javascript包含到您的页面中变得非常简单。将以下标签添加到您想使用TinyMCE的地方。它将输出完整的Javascript，包括<script>标签。将其添加到页面底部以优化性能。

    {{ tinymce_init() }}

您也可以通过传递类似这样的选项来覆盖默认配置

    {{ tinymce_init({'use_callback_tinymce_init': true, tinymce_config:{'theme': {'simple': {'menubar': false}}}}) }}

此函数允许第二个参数，允许您选择给定的配置是否必须替换原始配置或合并。 True将替换，False将合并（默认：false）。

基本配置

默认情况下，tinymce对所有页面的文本区域启用。如果您想自定义它，请执行以下操作

将类"tinymce"添加到textarea字段以初始化TinyMCE。

    <textarea class="tinymce" id="my-tinymce-textarea"></textarea>

如果您想使用编辑器的jQuery版本，请设置以下参数

    stfalcon_tinymce:
        include_jquery: true
        tinymce_jquery: true
        ...

注意：如果使用非jQuery版本，则必须在textarea标签上强制设置id属性。

选项include_jquery允许您从Google CDN加载外部jQuery库。如果您尚未在页面上包含jQuery，请将其设置为true。

如果您正在使用FormBuilder，请使用数组添加类，您还可以使用theme选项将使用的主题更改为"simple"之外的其他主题（即您的配置中定义的其他主题之一 - 上述示例定义了"bbcode"）。例如：

<?php
    $builder->add('introtext', 'textarea', array(
        'attr' => array(
            'class' => 'tinymce',
            'data-theme' => 'bbcode' // Skip it if you want to use default theme
        )
    ));

本地化

您可以通过在配置的最高级别添加语言选择器来更改TinyMCE编辑器的语言。

    // app/config/config.yml
    stfalcon_tinymce:
        include_jquery: true
        tinymce_jquery: true
        tinymce_config:
            selector: ".tinymce"
            language: %locale%
            theme:
                simple:
                    theme: "modern"
            ...

注意！由于无法为每个编辑器实例设置自定义语言，因此此选项为所有实例设置语言。

在示例中，我们使用参数.ini设置默认语言。当然，您可以通过传递语言代码（例如ru或ru_RU，en或en_US）来设置默认语言。

如果未设置语言参数，则默认语言将从会话中获取。

自定义配置

根据TinyMCE文档，您可以按需配置您的编辑器。以下是几乎完整的可用参数列表，您可以根据自己的需要进行配置

    // app/config/config.yml
    stfalcon_tinymce:
        include_jquery: true
        tinymce_jquery: true
        tinymce_config:
            selector: ".tinymce"
            base_url: "http://yourdomain.com/" # this parameter may be included if you need to override the assets_base_urls for your template engine (to override a CDN base url)
            # Get current language from the parameters.ini
            language: %locale%
            # Custom buttons
            tinymce_buttons:
                stfalcon: # Id of the first button
                    title: "Stfalcon"
                    image: "http://stfalcon.com/favicon.ico"
            theme:
                # Simple theme: same as default theme
                simple: ~
                # Advanced theme with almost all enabled plugins
                advanced:
                     plugins:
                         - "advlist autolink lists link image charmap print preview hr anchor pagebreak"
                         - "searchreplace wordcount visualblocks visualchars code fullscreen"
                         - "insertdatetime media nonbreaking save table contextmenu directionality"
                         - "emoticons template paste textcolor"
                     toolbar1: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image"
                     toolbar2: "print preview media | forecolor backcolor emoticons | stfalcon | example"
                     image_advtab: true
                     templates:
                         - {title: 'Test template 1', content: 'Test 1'}
                         - {title: 'Test template 2', content: 'Test 2'}
                # BBCode tag compatible theme (see http://www.bbcode.org/reference.php)
                bbcode:
                     plugins: ["bbcode, code, link, preview"]
                     menubar: false
                     toolbar1: "bold,italic,underline,undo,redo,link,unlink,removeformat,cleanup,code,preview"

注意！在tinymce_config中设置的选项将被原样传递给TinyMCE。因此，没有设置某些TinyMCE自定义配置参数的限制。

外部插件支持

如果您想加载位于您的bundle中的某些外部插件，请按以下示例进行配置

    stfalcon_tinymce:
        tinymce_config:
            external_plugins:
                filemanager:
                    url: "asset[bundles/acmedemo/js/tinymce-plugin/filemanager/editor_plugin.js]"
                imagemanager:
                    url: "asset[bundles/acmedemo/js/tinymce-plugin/imagemanager/editor_plugin.js]"
            ...
            theme:
                simple:
                    theme: "modern"
                    ...

自定义按钮

您可以在编辑器的工具栏中添加一些自定义按钮（参见：http://www.tinymce.com/tryit/button.php，http://www.tinymce.com/wiki.php/api4:method.tinymce.Editor.addButton）

首先，您应该在您的配置中描述它

    stfalcon_tinymce:
        tinymce_config:
            tinymce_buttons:
                stfalcon: # Id of the first button
                    title: "Stfalcon"
                    image: "http://stfalcon.com/favicon.ico"
                hello_world: # Id of the second button
                    title: "Google"
                    image: "http://google.com/favicon.ico"
                    ...
                    or for the local images
                    ...
                    image: "asset[bundles/somebundle/images/icon.ico]"

            theme:
                simple:
                         ...
                     toolbar1: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image"
                     toolbar2: "print preview media | forecolor backcolor emoticons | stfalcon | hello_world"

并且您应该为您的按钮创建基于其按钮 ID 的回调函数 tinymce_button_

function tinymce_button_stfalcon(ed) {
    ed.focus();
    ed.selection.setContent("Hello from stfalcon.com :)");
}

function tinymce_button_hello_world(ed) {
    ed.focus();
    ed.selection.setContent("Hello world!");
}

自定义 CSS

此选项允许您指定一个自定义 CSS 文件，以扩展主题内容的 CSS。此 CSS 文件是在编辑器内（可编辑区域）使用的文件。此选项也可以是逗号分隔的 URL 列表。

如果您指定了相对路径，则它相对于包含 TinyMCE 的（HTML）文件的 URL 来解析，而不是相对于 TinyMCE 本身。

    stfalcon_tinymce:
        tinymce_config:
            ...
            theme:
                simple:
                    content_css: "asset[bundles/mybundle/css/tinymce-content.css]"
                    ...

注意！请参阅官方 TinyMCE 文档以获取更多信息：http://www.tinymce.com/wiki.php/Configuration:content_css

初始化事件

就像 jQuery 中的 $(document).ready() 一样，您可以在 Tinymce 中监听 init 事件。

为此，您必须编辑您的配置并将 use_callback_tinymce_init 设置为 true。

app/config/config.yml:

    stfalcon_tinymce:
        ...
        use_callback_tinymce_init: true
        ...

然后创建一个名为 callback_tinymce_init 的 JavaScript 回调函数，如下所示

function callback_tinymce_init(editor) {
    // execute your best script ever
}

如何初始化动态加载元素的 TinyMCE

要初始化为新加载的文本区域，只需调用 initTinyMCE() 函数。

对于 Sonata Admin Bundle 的示例

    jQuery(document).ready(function() {
        $('form').on('sonata-collection-item-added', function(){
            initTinyMCE();
        });
    });

gibilogic / tinymce-bundle

维护者

详细信息