bdjurisic/tinymce-bundle

此包将 TinyMCE WYSIWYG 编辑器集成到 Symfony2 项目中。

维护者

详细信息

github.com/bdjurisic/TinymceBundle

源代码

问题

安装: 33

依赖项: 0

建议者: 0

安全: 0

星标: 0

关注者: 0

分支: 155

类型:symfony-bundle

3.0.3 2023-05-25 07:25 UTC

Requires

MIT 5c7f8cf1f522af49c5244203b9d26a44174a805c

Symfony2bundlewysiwygtinymceeditor

This package is not auto-updated.

Last update: 2024-09-27 12:17:01 UTC

README

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

安装

选择合适的版本

注意！要升级您的配置，请阅读 UPGRADE.md

通过 composer 将 TinyMCE 包作为应用程序的依赖项添加

$ php composer.phar require stfalcon/tinymce-bundle='X.Y'

将 StfalconTinymceBundle 添加到您的应用程序内核中。

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

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

$ php app/console assets:install web/

模板中包含

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

    {{ tinymce_init() }}

您还可以通过传递一个选项来覆盖默认配置

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

或

    {{ tinymce_init({
        theme: {'simple':{'language': app.request.locale, 'height': 500 }},
        toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
        autosave_ask_before_unload: false,
        asset_package_name: 'backend'})
    }}

新功能！ 添加指定资产包 doc 以生成正确的 js 链接，见上面，参数：asset_package_name

基本配置

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

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

    <textarea class="tinymce"></textarea>

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

    stfalcon_tinymce:
        include_jquery: true
        tinymce_jquery: true
        ...

选项 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
        selector: ".tinymce"
        language: %locale%
        theme:
            simple:
                theme: "modern"
        ...

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

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

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

多重选择器

您可以为编辑器放置指定一个或多个选择器。

    // app/config/config.yml
    stfalcon_tinymce:
        selector: ".tinymce"

或

    // app/config/config.yml
    stfalcon_tinymce:
        selector: 
            - ".tinymce"
            - "#tinymce"

或

    // app/config/config.yml
    stfalcon_tinymce:
        selector: [".tinymce", "#tinymce"]

自定义配置

根据 TinyMCE 文档，您可以按自己的意愿配置编辑器。以下是一个几乎完整的可用参数列表，您可以通过自己配置

    // app/config/config.yml
    stfalcon_tinymce:
        include_jquery: true
        tinymce_jquery: true
        selector:
            - ".tinymce"
            - "#editor1"
            - "#editor2"
        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"

外部插件支持

如果您想加载位于您包中的某些外部插件，您应该像以下示例那样进行配置

    stfalcon_tinymce:
        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_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:
        ...
        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

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

Sonata Admin Bundle的示例

    jQuery(document).ready(function() {
        $('form').on('sonata.add_element', function(){
            initTinyMCE();
        });
    });