Skip to content
This bundle integration tui.editor for your symfony project.
Branch: master
Clone or download
Quan Weiwei
Quan Weiwei fix var editor bug
Latest commit 97e3309 May 10, 2019
Type Name Latest commit message Commit time
Failed to load latest commit information.
docs add docs May 9, 2019
src fix var editor bug May 10, 2019
.gitignore add toolbarItems config May 10, 2019 fix render viewer May 10, 2019
LICENSE Initial commit May 9, 2019 change readme May 10, 2019 change readme May 10, 2019
composer.json change desc May 10, 2019


This bundle integration tui.editor for your symfony project. The code for this bundle was modified from FOSCKEditorBundle. Thanks FOSCKEditorBundle author:Eric Geleon and FriendsOfSymfony Community , your code is cool. Thanks MIT License.



Applications that use Symfony Flex

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

$ composer require teebbstudios/tuieditor-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 teebbstudios/tuieditor-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, enable the bundle by adding it to the list of registered bundles in the app/AppKernel.php file of your project:

// app/AppKernel.php

// ...
class AppKernel extends Kernel
    public function registerBundles()
        $bundles = [
            // ...
            new Teebb\TuiEditorBundle\TeebbTuiEditorBundle(),

        // ...

    // ...

Step 3: Download the Bundle resources

Download the latest tui.editor-bundles in your project.

$ php bin/console tuieditor:install

This will download the tui.editor all resources to TeebbTuiEditorBundle src/Resources/public folder. Then:

$ 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):

    #enable: true                           # Whether to enable tui.editor.
    #jquery: true                           # Whether to enable jquery in dependencies.
    #jquery_path: ~                         # Custom jquery path.
    #editor_js_path: ~                      # Custom tui.editor js path.
    # ...                                   # more config options, you can see: bin/console debug:config teebb_tui_editor 
    default_config: basic_config

            to_html: false                  # Save to database use html syntax?
            #previewStyle: 'vertical'       # Markdown editor's preview style (tab, vertical)
            #height: '400px'                # Editor's height style value. Height is applied as border-box ex) '300px', '100%', 'auto'
            #initialEditType: 'markdown'    # Initial editor type (markdown, wysiwyg)
            exts:                           # exts must defined as array
                - scrollSync
                - colorSyntax
                - uml
                - chart
                - mark
                - table

        - '@TeebbTuiEditor/Form/tuieditor_widget.html.twig'

Step 5: Use the Bundle

Add the tui.editor dependencies in your page top. For example:

{{ tuieditor_dependencies() }}

This will add the tui.editor dependencies JS and CSS libs like:

<script src="/bundles/teebbtuieditor/tui.editor-bundles/lib/jquery/dist/jquery.min.js"></script>
<script src="/bundles/teebbtuieditor/tui.editor-bundles/lib/markdown-it/dist/markdown-it.min.js"></script>
<script src="/bundles/teebbtuieditor/tui.editor-bundles/lib/tui-code-snippet/dist/tui-code-snippet.min.js"></script>
<script src="/bundles/teebbtuieditor/tui.editor-bundles/lib/codemirror/lib/codemirror.js"></script>
<script src="/bundles/teebbtuieditor/tui.editor-bundles/lib/highlight/highlight.pack.js"></script>
<script src="/bundles/teebbtuieditor/tui.editor-bundles/lib/squire-rte/build/squire-raw.js"></script>
<script src="/bundles/teebbtuieditor/tui.editor-bundles/lib/to-mark/dist/to-mark.min.js"></script>
<link rel="stylesheet" href="/bundles/teebbtuieditor/tui.editor-bundles/lib/codemirror/lib/codemirror.css">
<link rel="stylesheet" href="/bundles/teebbtuieditor/tui.editor-bundles/lib/highlight/styles/github.css">

Second, use the TuiEditorType in your form field:

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

    // ...

Step 6: Render Markdown syntax content

If you were saved markdown syntax in the database. Then you can use the twig function tuieditor_viewer_widget 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>
{{ tuieditor_viewer_widget("id", content) }}

Step 7: Done!

Yeah! Good Job! The tui.editor will use in your page. Now you can use your inspiration to create.

You can’t perform that action at this time.