中文文档在这里:中文文档
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.
Open a command console, enter your project directory and execute:
$ composer require teebbstudios/tuieditor-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.
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(),
];
// ...
}
// ...
}
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
You can add a config file in config/packages
folder.(Just a simple config, But you can use the following configuration completely):
#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
You can config tui.editor language.
#config/services.yaml
parameters:
locale: 'zh_CN' # Change the locale
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)
{
$builder
// ...
->add('body', TuiEditorType::class)
;
}
// ...
}
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) }}
Yeah! Good Job! The tui.editor will use in your page. Now you can use your inspiration to create.