README

中文文档在这里：中文文档

此插件集成了tui.editor，以便在您的symfony项目中使用。此插件的代码是从FOSCKEditorBundle修改而来。感谢FOSCKEditorBundle的作者：Eric Geleon 和 FriendsOfSymfony 社区，你们的代码很棒。感谢MIT许可证。

安装与使用

使用Symfony Flex的应用程序

打开命令行，进入您的项目目录，并执行以下命令：

$ composer require teebbstudios/tuieditor-bundle

不使用Symfony Flex的应用程序

步骤 1：下载插件

打开命令行，进入您的项目目录，并执行以下命令以下载此插件的最新稳定版本：

$ composer require teebbstudios/tuieditor-bundle

此命令要求您全局安装Composer，如Composer文档中的安装章节所述。

步骤 2：启用插件

然后，通过将其添加到项目app/AppKernel.php文件中注册的插件列表中来启用插件

// app/AppKernel.php

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

        // ...
    }

    // ...
}

步骤 3：下载插件资源

在您的项目中下载最新的tui.editor-bundles。

$ php bin/console tuieditor:install

这将把tui.editor的所有资源下载到TeebbTuiEditorBundle的src/Resources/public文件夹。然后

$ php bin/console assets:install --symlink

步骤 4：配置插件

您可以在config/packages文件夹中添加一个配置文件。（只是一个简单的配置，但您可以使用以下配置）

#config/packages/teebb_tuieditor.yaml
teebb_tui_editor:
    #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

    configs:
        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

您可以为tui.editor配置语言。

#config/services.yaml

parameters:
    locale: 'zh_CN'                   # Change the locale

步骤 5：使用插件

在您的页面顶部添加tui.editor的依赖项。例如

{{ tuieditor_dependencies() }}

这将添加tui.editor依赖的JS和CSS库等

<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">

其次，在表单字段中使用TuiEditorType

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

    // ...
}

步骤 6：渲染Markdown语法内容

如果您在数据库中保存了Markdown语法，则可以使用twig函数tuieditor_viewer_widget来渲染Markdown语法内容。第一个参数id：div DOM id。第二个参数content：twig变量，Markdown语法内容。

提示：别忘了在页面顶部渲染依赖项！

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

步骤 7：完成！

太棒了！做得好！tui.editor将在您的页面上使用。现在您可以发挥创意进行创作了。

teebbstudios / tuieditor-bundle

维护者

详细信息