README

入门

1. 使用Composer安装此包

composer require eckinox/tinymce-bundle

2. 开始使用TinyMCE！

在Symfony表单中使用TinyMCE

在Symfony表单中添加TinyMCE编辑器的工作方式与其他表单类型相同

public function buildForm(FormBuilderInterface $builder, array $options): void
{
    $builder->add("comment", TinymceType::class, [
        "attr" => [
            "toolbar" => "bold italic underline | bullist numlist",
        ],
    ])
    // ...

在模板中使用TinyMCE

要在没有使用Symfony表单的情况下在Twig中渲染TinyMCE编辑器，您可以使用此包提供的tinymce() Twig函数。

只需提供第一个参数作为值即可。

您还可以使用第二个参数来指定要添加到元素上的属性。

以下是一个示例

{{ tinymce("<p>This is a note</p>", { name: "notes", skin: "oxide" }) }}

在JavaScript中使用TinyMCE

要在JavaScript中渲染TinyMCE编辑器，首先确保加载了主TinyMCE脚本。

如果您已经在页面上使用了tinymce() Twig函数或TinymceType，则脚本已加载。否则，您可以通过手动添加以下脚本或将它们包含在页面上

<script src="{{ asset('bundles/tinymce/ext/tinymce/tinymce.min.js') }}"></script>
<script src="{{ asset('bundles/tinymce/ext/tinymce-webcomponent.js') }}" type="module"></script>

或使用tinymce_scripts()函数，如下所示

{{ tinymce_scripts() }}

然后，您只需在页面上添加一个具有所需属性和值的TinyMCE编辑器Web元素即可。

以下是一个示例

const contentText = document.createTextNode("<p>Your original text goes here</p>");
const editor = document.createElement("tinymce-editor");

editor.append(contentText);
editor.setAttribute("skin", "appstack");

// Add the editor to the page
document.body.append(editor);

有关更多信息，请参阅Tiny的Web组件文档。

配置TinyMCE

此包包含并使用TinyMCE的Web组件版本。

您可以通过在编辑器元素本身（<tinymce-editor>）上设置HTML属性来配置TinyMCE。

当使用表单类型时，您可以使用attr选项设置属性。
例如，您可以像这样设置工具栏的操作

public function buildForm(FormBuilderInterface $builder, array $options): void
{
    $builder->add("comment", TinymceType::class, [
        "attr" => [
            "toolbar" => "bold italic underline | bullist numlist",
        ],
    ])
    // ...

有关TinyMCE提供的不同配置的更多信息，请参阅Tiny的Web组件文档。

默认配置

您可以在配置文件中设置以下默认选项

tinymce:
    # The configurations mirror the TinyMCE attributes.
    # Learn more about each option in Tiny's documentation: 
    # https://www.tiny.cloud/docs/tinymce/6/webcomponent-ref/
    skin: "oxide"
    content_css: "default"
    plugins: "advlist autolink link image media table lists"
    toolbar: "bold italic underline | bullist numlist"
    images_upload_url: "https://yoursite.com/upload"
    images_upload_route: "" # Name of the route for `images_upload_url` (leave `images_upload_url` blank if using this)
    images_upload_route_params: "" # Parameters of the route for `images_upload_url` (leave `images_upload_url` blank if using this)
    images_upload_handler: ""
    images_upload_base_path: ""
    images_upload_credentials: "true"
    images_reuse_filename: ""

文件上传（可选）

默认情况下不处理文件上传，因为过程将因项目而异。

要设置此功能，请参阅Tiny的Web组件文件上传文档。

为了帮助您入门，我们提供了一个实现示例。您可以在docs/file-upload-example.md中找到此示例。

AppStack皮肤

此包附带了一个appstack皮肤，它与AppStack Bootstrap模板的风格相匹配。

此皮肤是tinymce-5的扩展，并内置了暗黑模式支持。

要使用它，只需在配置中指定即可

# config/packages/tinymce.yaml
tinymce:
    skin: appstack
    content_css: appstack

版本

贡献

请随时向GitHub上的eckinox/tinymce-bundle存储库提交问题和PR。

有关如何贡献的更多信息，请查看 CONTRIBUTING.md。

许可证

本软件包遵循MIT许可证分发。

TinyMCE 和 TinyMCE 网页组件由 Tiny® 开发并遵循MIT许可证进行分发。

eckinox / tinymce-bundle

维护者

详细信息