如何将 CKEditor 添加到 Sonata Admin 后端的文本区域

Question

我想将 CKEditor 添加到 Sonata Admin 后端。现在我只运行 Create Bundle，它允许我内联编辑内容，但我也想在后端使用编辑器。我尝试了 Formatter Widget，但它有点过大，因为我不想在我的实体中创建新字段。

有人已经这样做了吗？

Answer 1

在您的页面中包含 ckeditor 脚本并将ckeditor 类添加到您的文本区域，仅此而已。

示例：在您的表单类型中：

$builder->add('description', 'textarea', array('attr' => array('class' => 'ckeditor')))

在你的树枝上：

   <script src="{{ asset('js/ckeditor.js') }}"></script>
     .
     .
     .
    {{form(form)}}

Answer 2

zizoujab 的解决方案是完全正确的，所以我赞成它。但是，正如我提到的 SonataAdminBundle 的问题，还需要做更多的工作。这就是我给出这个额外答案的原因。

我通过覆盖自定义包中的SonataAdminBundle:CRUD:edit.html.twig 解决了这个问题：

{% extends 'SonataAdminBundle:CRUD:base_edit.html.twig' %}

{% block javascripts %}
{{ parent() }}
<script src="{{ asset('js/ckeditor/adapter/jquery.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/ckeditor/ckeditor.js') }}" type="text/javascript"></script>
    <script type="text/javascript">
        $(function() {
            $('textarea.ckeditor').ckeditor();
        });
    </script>
{% endblock %}

我也遇到了问题，由于我使用的 ckeditor 版本，这不起作用。我无法使用 CmfCreateBundle 安装。这产生了一些 js 错误并且 <textarea> 标签消失了。 所以我不得不从 ckeditor.com 下载“标准”版本，这很有效。

Answer 3

如果您想要一些所见即所得的编辑器，并且可以使用 NOT CKEditor，那么我建议您查看sonata-formatter-bundle

Answer 4

按照updated doc 为Sonata Formatter

config.yml：

twig:
    debug:            "%kernel.debug%"
    strict_variables: "%kernel.debug%"

    # These 3 lines below were missing in my own conf
    # Adding them made formatter richtext editor alternatives
    # finally available in my project:

    form:
        resources:
            - 'SonataFormatterBundle:Form:formatter.html.twig'

奏鸣曲.yml

sonata_block:
    (...)
    blocks:
        (...)
        sonata.block.service.text:
        sonata.page.block.children_pages:
        sonata.formatter.block.formatter:
(...)
sonata_formatter:
    formatters:
        markdown:
            service: sonata.formatter.text.markdown
            extensions:
                - sonata.formatter.twig.control_flow
                - sonata.formatter.twig.gist
                - sonata.media.formatter.twig

        text:
            service: sonata.formatter.text.text
            extensions:
                - sonata.formatter.twig.control_flow
                - sonata.formatter.twig.gist
                - sonata.media.formatter.twig

        rawhtml:
            service: sonata.formatter.text.raw
            extensions:
                - sonata.formatter.twig.control_flow
                - sonata.formatter.twig.gist
                - sonata.media.formatter.twig

        richhtml:
            service: sonata.formatter.text.raw
            extensions:
                - sonata.formatter.twig.control_flow
                - sonata.formatter.twig.gist
                - sonata.media.formatter.twig

        twig:
            service: sonata.formatter.text.twigengine
            extensions: [] # Twig formatter cannot have extensions

    ckeditor:
        templates:
            browser: 'SonataFormatterBundle:Ckeditor:browser.html.twig'
            upload: 'SonataFormatterBundle:Ckeditor:upload.html.twig'