首页 文章

如何使用API将CKEditor RTE添加到typo3后端模块?

提问于
浏览
1

这个问题类似于那个:RTE in own backend module based on Extbase and Fluid但不一样,所以我创建了一个新问题 .


我为typo3版本8.7.7创建了一个评论扩展

我已经将RTE编辑器(CKEditor)添加到我的BackendModule中的textarea字段中 .

因此,我在评论模型中有以下TCA:

'text' => [
    'exclude' => true,
    'label' => 'LLL:EXT:rmcomment/Resources/Private/Language/locallang_db.xlf:tx_rmcomment_domain_model_comment.text',
    'config' => [
        'type' => 'text',
        'enableRichtext' => true,
        'richtextConfiguration' => 'minimal',
        'fieldControl' => [
            'fullScreenRichtext' => [
                'disabled' => false,
            ],
        ],
        'cols' => 40,
        'rows' => 15,
        'eval' => 'trim,required',
    ],
],

后端模板如下所示:

<f:form action="create" name="newComment" object="{newComment}" arguments="{author:beuser.username, email:beuser.email}">

    <strong>Eingeloggt als: {beuser.realname} (Username: {beuser.username}) (Email: {beuser.email})</strong><br>

    <label for="commentEmailCheckbox">Öffentliche E-Mail:</label>
        <f:form.checkbox id="commentEmailCheckbox" property="mailPublic" value="1" />
    <br><br>

    <label for="commentText" class="text{rm:hasError(property:'text',then:' text-danger')}">
        <f:translate key="tx_rmcomment_domain_model_comment.text" />
        <span class="small">( <f:translate key="tx_rmcomment_domain_model_comment.required" /> )</span>
    </label><br>
        <f:form.textarea id="commentText" property="text" cols="120" rows="6" /><br>

    <f:form.submit value="{f:translate(key:'tx_rmcomment_domain_model_comment.saveComment')}" class="btn btn-default" />
</f:form>

Is there a better way to make that RTE working for my Backend-Module without "dirty javascript" (my answer )在我的流体模板里面?

EDIT

我认为这是唯一的解决方案,所以我现在将工作部分转移到答案 .

1 回答

  • 1

    在新表单下我添加此javascript:

    <script src="https://cdn.ckeditor.com/4.7.3/standard/ckeditor.js" type="text/javascript"></script>
    <script src="/typo3conf/ext/rmcomment/Resources/Public/Backend/RTE/ckcomment.js" type="text/javascript"></script>
    

    我的ckcomment.js看起来像这样:

    // Configure New Comment CKEditor-Form
    CKEDITOR.config.customConfig = '/typo3conf/ext/rmcomment/Resources/Public/Backend/RTE/backendRTEconfig.js';
    CKEDITOR.replace( 'commentText' );
    $('.text').click(function(){
        CKEDITOR.instances.commentText.focus();
    });
    

    而backendRTEconfig.js有这样的内容:

    CKEDITOR.editorConfig = function( config ) {
        config.toolbar = [
            { name: 'basicstyles', items: [ 'Bold', 'Italic' ] },
            { name: 'paragraph', items: [ 'NumberedList', 'BulletedList', '-', 'Blockquote', ] },
            { name: 'document', items: [ 'Source' ] },
        ];
    };
    

    现在我的后端模块有一个CKEditor,带有自定义的编辑按钮 . 到目前为止,这是我发现的唯一方式 .

    在另一个扩展中,我的 custom content elements 不必加载 ckeditor "library" 也不是我的 configuration-javascript . 在那里我只需要添加TCA: 'richtextConfiguration' => 'minimal'

    如果有人知道如何在我的模板中没有javascirpt“loader”的情况下激活ckeditor,请告诉我 .

相关问题