566E
首页 包列表 提交包 常见问题 关于

定制 yippy/toast-ui-editor-bundle 二次开发

按需修改功能、优化性能、对接业务系统，提供一站式技术支持

邮箱：yvsm@zunyunkeji.com | QQ：316430983 | 微信：yvsm316

yippy/toast-ui-editor-bundle

Composer 安装命令：

composer require yippy/toast-ui-editor-bundle

包简介

This bundle integration TOAST UI Editor (TUI Editor) for your Symfony project.

关键字：

#symfony #markdown #tui.editor #toast.ui.editor

README 文档

README

MIT license Latest Stable Version Total Downloads Donate

This bundle integration TOAST UI Editor for your symfony project. The code for this bundle was forked from teebbstudios\TeebbTuiEditorBundle, which was inspired by FriendsOfSymfony\FOSCKEditorBundle.

TOAST UI Editor is a WYSIWYG and Markdown Editor that follows CommonMark and GFM specifications.

tui.editor

Installation ＆ Usage

Applications that use Symfony Flex

Open a command console, enter your project directory and execute:

$ composer require yippy/toast-ui-editor-bundle

Applications that don't use Symfony Flex

Step 1: Download the Bundle

Open a command console, enter your project directory and execute the following command to download the latest stable version of this bundle:

$ composer require yippy/toast-ui-editor-bundle

This command requires you to have Composer installed globally, as explained in the installation chapter of the Composer documentation.

Step 2: Enable the Bundle

Then ensuring the bundle is listed as one of registered bundles in the config/bundles.php file of your project:

<?php

return [
    // ...
    new Yippy\ToastUiEditorBundle\YippyToastUiEditorBundle(),
];

Step 3: Load assets files into public bundles folder

Running this command will reference the Toast UI Editor js and css assets files into /public/bundles/yippytoastuieditor, if

$ php bin/console assets:install --symlink

Step 4: Config the Bundle

You can add a config file in config/packages folder.（Just a simple config, But you can use the following configuration completely）:

#config/packages/toast_ui_editor.yaml
yippy_toast_ui_editor:
    #enable: true                                           # Whether to enable tui.editor.
    #jquery:
        #enable: false                                      # Whether to enable jquery.
        #js_paths:                                          # Custom jquery path.
            #- /bundles/yippytoastuieditor/js/jquery.min.js
    # ...                                                   # more config options, you can see: bin/console debug:config yippy_toast_ui_editor 

    #editor:
        #js_paths:
            #- /bundles/yippytoastuieditor/js/toast-ui-editor-bundle.js
        #css_paths:
            #- /bundles/yippytoastuieditor/css/toastui-editor.css
        #options:
            #height: 'auto'                                 # Editor's height style value. Height is applied as border-box ex) '300px', '100%', 'auto'
            #initial_edit_type: 'wysiwyg'                   # Initial editor type (markdown, wysiwyg)
            #preview_style: 'vertical'                      # Markdown editor's preview style (tab, vertical)
            #theme: 'dark'                                  # override editor color scheme with dark theme
            #toolbar_items:
                #- ['heading', 'bold', 'italic', 'strike']
                #- ['hr', 'quote']
                #- ['ul', 'ol', 'task', 'indent', 'outdent']
                #- ['table', 'image', 'link']
                #- ['code', 'codeblock']
            #widget_rules:
                #- |
                    #rule: /\[(@\S+)\]\((\S+)\)/,
                    #toDOM(text) {
                        #const rule = /\[(@\S+)\]\((\S+)\)/;
                        #const matched = text.match(rule);
                        #const span = document.createElement('span');
                        #span.innerHTML = `<span class="badge badge-primary" href="`+matched[2]+`">`+matched[1]+`</span>`;
                        #return span;
                    #}
    #viewer:
        #js_paths:
            #- /bundles/yippytoastuieditor/js/toast-ui-viewer-bundle.js
        #css_paths:
            #- /bundles/yippytoastuieditor/css/toastui-editor-viewer.css
        #options:
            #height: 'auto'                                 # Viewer's height style value. Height is applied as border-box ex) '300px', '100%', 'auto'
    #extensions:                                            # extensions must defined as array of plugin_name variable or [plugin_name, [plugin_options]]
        #chart:                                             # chart custom options
            #js_paths:
                #- /bundles/yippytoastuieditor/js/toast-ui-chart-bundle.js
            #css_paths:
                #- /bundles/yippytoastuieditor/css/toastui-chart.min.css
            #options:
                #width: 'auto'                              # number|string	'auto'	Default width value
                #height: 'auto'                             # number|string	'auto'	Default height value
                #minWidth: 0                                # number	0	Minimum width value
                #maxWidth: 0                                # number	0	Minimum height value
                #minHeight: Infinity                        # number    Infinity	Maximum width value
                #maxHeight: Infinity                        # number	Infinity	Maximum height value
        #codeSyntaxHighlight:
            #js_paths:
                #- /bundles/yippytoastuieditor/js/toast-ui-code-syntax-highlight-bundle.js
            #css_paths:
                #- /bundles/yippytoastuieditor/css/toastui-editor-plugin-code-syntax-highlight.css
        #colorSyntax:                                       # colorSyntax custom options
            #js_paths:
                #- /bundles/yippytoastuieditor/js/toast-ui-color-syntax-bundle.js
            #css_paths:
                #- /bundles/yippytoastuieditor/css/toastui-editor-plugin-color-syntax.css
                #- /bundles/yippytoastuieditor/css/tui-color-picker.css
            #options:
                #preset: ['#181818', '#292929']         # [required] preset	Array.<string>		Preset for color palette
        #tableMergedCell:
            #js_paths:
                #- /bundles/yippytoastuieditor/js/toast-ui-table-merged-cell-bundle.js
            #css_paths:
                #- /bundles/yippytoastuieditor/css/toastui-editor-plugin-table-merged-cell.css
        #uml:                                               # uml custom options
            #js_paths:
                #- /bundles/yippytoastuieditor/js/toast-ui-uml-bundle.js
            #options:
                #rendererURL: ~                             # [required]string	'http://www.plantuml.com/plantuml/png/'	URL of plant uml renderer
    #dependencies:                                          # You may add any dependancy that you need here
        #editor_dark_theme:
            #css_paths:
                #- /bundles/yippytoastuieditor/css/toastui-editor-dark.css

    default_config: basic_config
    configs:
        basic_config:
            #to_html: false                                  # Save to database use html syntax?
            #editor:
                #js_paths:
                    #- /bundles/yippytoastuieditor/js/toast-ui-editor-bundle.js
                #css_paths:
                    #- /bundles/yippytoastuieditor/css/toastui-editor.css
                #options:
                    #height: 'auto'                             # Editor's height style value. Height is applied as border-box ex) '300px', '100%', 'auto'
                    #initial_edit_type: 'wysiwyg'               # Initial editor type (markdown, wysiwyg)
                    #preview_style: 'vertical'                  # Markdown editor's preview style (tab, vertical)
                    #theme: 'dark'                              # override editor color scheme with dark theme
                    #toolbar_items:
                        #- ['heading', 'bold', 'italic', 'strike']
                        #- ['hr', 'quote']
                        #- ['ul', 'ol', 'task', 'indent', 'outdent']
                        #- ['table', 'image', 'link']
                        #- ['code', 'codeblock']
                    #widget_rules:
                        #- |
                            #rule: /\[(@\S+)\]\((\S+)\)/,
                            #toDOM(text) {
                                #const rule = /\[(@\S+)\]\((\S+)\)/;
                                #const matched = text.match(rule);
                                #const span = document.createElement(`span`);
                                #span.innerHTML = `<span class="badge badge-primary" href="`+matched[2]+`">`+matched[1]+`</span>`;
                                #return span;
                            #}
            #viewer:
                #js_paths:
                    #- /bundles/yippytoastuieditor/js/toast-ui-viewer-bundle.js
                #css_paths:
                    #- /bundles/yippytoastuieditor/css/toastui-editor-viewer.css
                #options:
                    #height: 'auto'                             # Viewer's height style value. Height is applied as border-box ex) '300px', '100%', 'auto'
            extensions:                                            # extensions must defined as array of plugin_name variable or [plugin_name, [plugin_options]]
                chart:                                             # chart custom options
                    #js_paths:
                        #- /bundles/yippytoastuieditor/js/toast-ui-chart-bundle.js
                    #css_paths:
                        #- /bundles/yippytoastuieditor/css/toastui-chart.min.css
                    #options:
                        #width: 'auto'                              # number|string	'auto'	Default width value
                        #height: 'auto'                             # number|string	'auto'	Default height value
                        #minWidth: 0                                # number	0	Minimum width value
                        #maxWidth: 0                                # number	0	Minimum height value
                        #minHeight: Infinity                        # number    Infinity	Maximum width value
                        #maxHeight: Infinity                        # number	Infinity	Maximum height value
                codeSyntaxHighlight:
                    #js_paths:
                        #- /bundles/yippytoastuieditor/js/toast-ui-code-syntax-highlight-bundle.js
                    #css_paths:
                        #- /bundles/yippytoastuieditor/css/toastui-editor-plugin-code-syntax-highlight.css
                colorSyntax:                                       # colorSyntax custom options
                    #js_paths:
                        #- /bundles/yippytoastuieditor/js/toast-ui-color-syntax-bundle.js
                    #css_paths:
                        #- /bundles/yippytoastuieditor/css/toastui-editor-plugin-color-syntax.css
                        #- /bundles/yippytoastuieditor/css/tui-color-picker.css
                    #options:
                        #preset: ['#181818', '#292929']         # [required] preset	Array.<string>		Preset for color palette
                tableMergedCell:
                    #js_paths:
                        #- /bundles/yippytoastuieditor/js/toast-ui-table-merged-cell-bundle.js
                    #css_paths:
                        #- /bundles/yippytoastuieditor/css/toastui-editor-plugin-table-merged-cell.css
                uml:                                               # uml custom options
                    #js_paths:
                        #- /bundles/yippytoastuieditor/js/toast-ui-uml-bundle.js
                    #options:
                        #rendererURL: ~                             # [required]string	'http://www.plantuml.com/plantuml/png/'	URL of plant uml renderer
            #dependencies:                                          # You may add any dependancy that you need here
                #editor_dark_theme:                                 # Must include if using 'dark' theme
                    #css_paths:
                        #- /bundles/yippytoastuieditor/css/toastui-editor-dark.css

You can config Toast UI Editor language.

#config/services.yaml

parameters:
    locale: 'zh_CN'                   # Change the locale

Step 5: Use the Bundle

Add the Toast UI Editor dependencies in your page top. For example:

{{ toast_ui_editor_dependencies() }}

This will add the Toast UI Editor dependencies JS and CSS libs like:

<link rel="stylesheet" href="/bundles/yippytoastuieditor/css/toastui-editor-dark.css">

Second, use the TuiEditorType in your form field:

use Yippy\ToastUiEditorBundle\Form\Type\ToastUiEditorType;

class ArticleType extends AbstractType
{
    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder
            // ...
            ->add('body', ToastUiEditorType::class)
        ;
    }

    // ...
}

Step 6: Render Markdown syntax content

If you were saved markdown syntax in the database. Then you can use the twig function toast_ui_editor_widget_viewer to render the markdown syntax content. The first parameter id: div DOM id. The second parameter content: twig variable, the markdown syntax content.

Tips: Don't forget render the dependencies in the page top！

<div id="id"></div>
{{ toast_ui_editor_widget_viewer("id", content) }}

You can also amend configuration

<div id="id"></div>
{{ toast_ui_editor_widget_viewer("id", content, { "viewer": {"js_paths": []} }) }}

Step 7: Done!

Yeah! Good Job! The Toast UI Editor will use in your page. Now you can use your inspiration to create.

How to Use

Override Template

Creating Widget Rules

yippy/toast-ui-editor-bundle 适用场景与选型建议

yippy/toast-ui-editor-bundle 是一款 基于 JavaScript 开发的 Composer 扩展包，目前已累计 26 次下载、GitHub Stars 达 0， 最近一次更新时间为 2025 年 12 月 12 日， 在 PHP 生态内属于活跃度较高的组件。

它主要适用于以下技术方向： 「symfony」 「markdown」 「tui.editor」 「toast.ui.editor」 等业务场景。在实际项目中，围绕这些方向常见需要落地的问题包括：接口对接、性能调优、并发安全、与既有框架（Laravel / ThinkPHP / Yii / Webman 等）的兼容适配，以及生产环境的日志埋点与稳定性保障。

我们在过去多个企业项目中使用过 yippy/toast-ui-editor-bundle 或与其功能相近的方案，如果你在选型或落地过程中遇到问题，例如 版本兼容、二次改造、私有化封装、与内部系统对接、生产 BUG 排查，欢迎联系我们协助评估。

围绕 yippy/toast-ui-editor-bundle 我们能提供哪些服务？
定制开发 / 二次开发

基于 yippy/toast-ui-editor-bundle 在你已有业务上做功能扩展、字段裁剪、UI 适配、与内部账号 / 权限 / 日志系统的深度对接。

BUG 修复 & 性能优化

线上偶发问题、内存泄漏、慢查询、并发异常等排查修复；针对高流量场景做缓存、队列、索引层面的调优。

项目外包 & 长期维护

承接完整的项目从需求 → 设计 → 开发 → 上线 → 长期运维；也可按月提供技术保姆服务。

yvsm@zunyunkeji.com QQ：316430983 微信：yvsm316 西安尊云信息科技 · 专注 PHP / Go / 分布式系统研发

与 yippy/toast-ui-editor-bundle 相关的其它包

同方向 / 同关键字的高下载量 PHP Composer 包推荐，方便对比选型：

dg/texy 159

Texy converts plain text in easy to read Texy syntax into structurally valid (X)HTML. It supports adding of images, links, nested lists, tables and has full support for CSS. Texy supports hyphenation of long words (which reflects language rules), clickable emails and URL (emails are obfuscated again

ufo-cms/json-rpc-bundle 5

The bundle for easy using json-rpc api on your project

litalino/flarum-more-bbcode 2

Adds more BBCode

yoanbernabeu/daplos-bundle 1

Bundle Symfony DaplosBundle

ins0/github-changelog-generator 14

Creates a markdown changelog for your GitHub repository.

varunsridharan/wp2github-md 0

Lightweight Application To Convert WordPress Readme Into Github Markdown

统计信息

  • 总下载量： 26
  • 月度下载量： 0
  • 日度下载量： 0
  • 收藏数： 0
  • 点击次数： 17
  • 依赖项目数： 0
  • 推荐数： 0

GitHub 信息

  • Stars： 0
  • Watchers： 0
  • Forks： 0
  • 开发语言： JavaScript
访问仓库

其他信息

  • 授权协议： MIT
  • 更新时间： 2025-12-12