CKEditor 未与 Sonata Formatter(Sonata Admin Bundle)一起显示
CKEditor not showing with Sonata Formatter (Sonata Admin Bundle)
我在使用 Sonata Formatter Bundle 时遇到问题。
在我的 config.yml 中,我有以下内容(除其他外):
imports:
- { resource: sonata.yml }
twig:
debug: "%kernel.debug%"
strict_variables: "%kernel.debug%"
#sonata
form:
resources:
# ...
- 'SonataFormatterBundle:Form:formatter.html.twig'
在我的 sonata.yml 文件中我有:
sonata_block:
default_contexts: [cms]
blocks:
# Enable the SonataAdminBundle block
sonata.admin.block.admin_list:
contexts: [admin]
# Your other blocks
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 #keep this commented unless you are using media bundle.
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'
ivory_ck_editor:
configs:
default:
language: '%locale%'
toolbar: standard
sonata_admin:
templates:
layout: DXEenhanaBundle:Admin:standard_layout.html.twig
我已将所需的 CSS 和 JS 添加到我的 standard_layout.html.twig 文件中,它们已正确加载。
在我的管理文件中,我有以下内容:
$formMapper
->add('name', 'text', array('label' => 'Applicant Name'))
->add('contacts', 'sonata_formatter_type', array(
'event_dispatcher' => $formMapper->getFormBuilder()->getEventDispatcher(),
'format_field' => 'contacts',
'source_field' => 'contacts',
'source_field_options' => array(
'attr' => array('class' => 'span10', 'rows' => 7)
),
'ckeditor_context' => 'default',
'listener' => true,
'target_field' => 'contacts',
'label' => 'Contacts'
))
...
我看到一个文本区域,但在我的文本区域中没有 ckeditor,我错过了什么?
这是我在浏览器中看到的:
我也没有收到任何控制台错误或其他错误...。
您需要按照 Sonata Admin Integration of SonataFormatterBundle Documentation 部分所述覆盖管理 layout.html.twig 模板。
新建模板文件app\Resources\SonataAdminBundle\views\layout.html.twig
:
{% extends 'SonataAdminBundle::standard_layout.html.twig' %}
{% block stylesheets %}
{{ parent() }}
<link rel="stylesheet" href="{{ asset('bundles/sonataformatter/markitup/skins/sonata/style.css') }}" type="text/css"
media="all"/>
<link rel="stylesheet" href="{{ asset('bundles/sonataformatter/markitup/sets/markdown/style.css') }}"
type="text/css" media="all"/>
<link rel="stylesheet" href="{{ asset('bundles/sonataformatter/markitup/sets/html/style.css') }}" type="text/css"
media="all"/>
<link rel="stylesheet" href="{{ asset('bundles/sonataformatter/markitup/sets/textile/style.css') }}" type="text/css"
media="all"/>
{% endblock %}
{% block javascripts %}
{{ parent() }}
<script src="{{ asset('bundles/ivoryckeditor/ckeditor.js') }}" type="text/javascript"></script>
<script src="{{ asset('bundles/sonataformatter/vendor/markitup-markitup/markitup/jquery.markitup.js') }}" type="text/javascript"></script>
<script src="{{ asset('bundles/sonataformatter/markitup/sets/markdown/set.js') }}" type="text/javascript"></script>
<script src="{{ asset('bundles/sonataformatter/markitup/sets/html/set.js') }}" type="text/javascript"></script>
<script src="{{ asset('bundles/sonataformatter/markitup/sets/textile/set.js') }}" type="text/javascript"></script>
{% endblock %}
并更新您的 config.yml 为:
sonata_admin:
templates:
layout: SonataAdminBundle::layout.html.twig
对你来说可能有点晚了,但我遇到了同样的问题。我必须在字段上添加 "ckeditor" class:
->add('htmlContent', 'sonata_simple_formatter_type', array('format' => 'richhtml', 'attr' => array('class' => 'ckeditor')))
这让它发挥作用
从 SonataAdmin#v0.3 开始,您可以在配置文件中添加资产。 Formatter Docs
sonata_admin.yaml
sonata_admin:
assets:
extra_javascripts:
# ...
- bundles/fosckeditor/ckeditor.js
- bundles/sonataformatter/vendor/markitup-markitup/markitup/jquery.markitup.js
- bundles/sonataformatter/markitup/sets/markdown/set.js
- bundles/sonataformatter/markitup/sets/html/set.js
- bundles/sonataformatter/markitup/sets/textile/set.js
extra_stylesheets:
# ...
- bundles/sonataformatter/markitup/skins/sonata/style.css
- bundles/sonataformatter/markitup/sets/markdown/style.css
- bundles/sonataformatter/markitup/sets/html/style.css
- bundles/sonataformatter/markitup/sets/textile/style.css
我在使用 Sonata Formatter Bundle 时遇到问题。
在我的 config.yml 中,我有以下内容(除其他外):
imports:
- { resource: sonata.yml }
twig:
debug: "%kernel.debug%"
strict_variables: "%kernel.debug%"
#sonata
form:
resources:
# ...
- 'SonataFormatterBundle:Form:formatter.html.twig'
在我的 sonata.yml 文件中我有:
sonata_block:
default_contexts: [cms]
blocks:
# Enable the SonataAdminBundle block
sonata.admin.block.admin_list:
contexts: [admin]
# Your other blocks
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 #keep this commented unless you are using media bundle.
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'
ivory_ck_editor:
configs:
default:
language: '%locale%'
toolbar: standard
sonata_admin:
templates:
layout: DXEenhanaBundle:Admin:standard_layout.html.twig
我已将所需的 CSS 和 JS 添加到我的 standard_layout.html.twig 文件中,它们已正确加载。
在我的管理文件中,我有以下内容:
$formMapper
->add('name', 'text', array('label' => 'Applicant Name'))
->add('contacts', 'sonata_formatter_type', array(
'event_dispatcher' => $formMapper->getFormBuilder()->getEventDispatcher(),
'format_field' => 'contacts',
'source_field' => 'contacts',
'source_field_options' => array(
'attr' => array('class' => 'span10', 'rows' => 7)
),
'ckeditor_context' => 'default',
'listener' => true,
'target_field' => 'contacts',
'label' => 'Contacts'
))
...
我看到一个文本区域,但在我的文本区域中没有 ckeditor,我错过了什么?
这是我在浏览器中看到的:
我也没有收到任何控制台错误或其他错误...。
您需要按照 Sonata Admin Integration of SonataFormatterBundle Documentation 部分所述覆盖管理 layout.html.twig 模板。
新建模板文件app\Resources\SonataAdminBundle\views\layout.html.twig
:
{% extends 'SonataAdminBundle::standard_layout.html.twig' %}
{% block stylesheets %}
{{ parent() }}
<link rel="stylesheet" href="{{ asset('bundles/sonataformatter/markitup/skins/sonata/style.css') }}" type="text/css"
media="all"/>
<link rel="stylesheet" href="{{ asset('bundles/sonataformatter/markitup/sets/markdown/style.css') }}"
type="text/css" media="all"/>
<link rel="stylesheet" href="{{ asset('bundles/sonataformatter/markitup/sets/html/style.css') }}" type="text/css"
media="all"/>
<link rel="stylesheet" href="{{ asset('bundles/sonataformatter/markitup/sets/textile/style.css') }}" type="text/css"
media="all"/>
{% endblock %}
{% block javascripts %}
{{ parent() }}
<script src="{{ asset('bundles/ivoryckeditor/ckeditor.js') }}" type="text/javascript"></script>
<script src="{{ asset('bundles/sonataformatter/vendor/markitup-markitup/markitup/jquery.markitup.js') }}" type="text/javascript"></script>
<script src="{{ asset('bundles/sonataformatter/markitup/sets/markdown/set.js') }}" type="text/javascript"></script>
<script src="{{ asset('bundles/sonataformatter/markitup/sets/html/set.js') }}" type="text/javascript"></script>
<script src="{{ asset('bundles/sonataformatter/markitup/sets/textile/set.js') }}" type="text/javascript"></script>
{% endblock %}
并更新您的 config.yml 为:
sonata_admin:
templates:
layout: SonataAdminBundle::layout.html.twig
对你来说可能有点晚了,但我遇到了同样的问题。我必须在字段上添加 "ckeditor" class:
->add('htmlContent', 'sonata_simple_formatter_type', array('format' => 'richhtml', 'attr' => array('class' => 'ckeditor')))
这让它发挥作用
从 SonataAdmin#v0.3 开始,您可以在配置文件中添加资产。 Formatter Docs
sonata_admin.yaml
sonata_admin:
assets:
extra_javascripts:
# ...
- bundles/fosckeditor/ckeditor.js
- bundles/sonataformatter/vendor/markitup-markitup/markitup/jquery.markitup.js
- bundles/sonataformatter/markitup/sets/markdown/set.js
- bundles/sonataformatter/markitup/sets/html/set.js
- bundles/sonataformatter/markitup/sets/textile/set.js
extra_stylesheets:
# ...
- bundles/sonataformatter/markitup/skins/sonata/style.css
- bundles/sonataformatter/markitup/sets/markdown/style.css
- bundles/sonataformatter/markitup/sets/html/style.css
- bundles/sonataformatter/markitup/sets/textile/style.css