如何使用API​​将CKEditor RTE添加到typo3后端模块？ [英] How to add CKEditor RTE to typo3 Backend Module with the API?

问题描述

这个问题类似于那个问题： RTE在自己的基于Extbase和Fluid
的后端模块中，但是不一样，所以我创建了一个新问题。

---

我为typo3版本8.7.7创建注释扩展名

我在BackendModule的textarea字段中添加了RTE编辑器（CKEditor）。 / p>

因此，我的评论模型中具有以下TCA：

 'text'=> [
'exclude'=>是的，
标签 => ‘LLL：EXT：rmcomment / Resources / Private / Language / locallang_db.xlf：tx_rmcomment_domain_model_comment.text’，
  => [
'type'=> ‘text’，
‘enableRichtext’=>是的，
 richtextConfiguration => ‘minimal’，
‘fieldControl’=> [
‘fullScreenRichtext’=> [
 disabled => false，
]，
]，
 cols => 40，
行 => 15，
评估 => 'trim，required'，
]，
]，
  

后端模板看起来像这样：

 < f：form action = create name = newComment object = {newComment} arguments = {author：beuser.username，email：beuser.email}> 
 
< strong> Eingeloggt als：{beuser.realname}（用户名：{beuser.username}）（电子邮件：{beuser.email}）< / strong>< br> 
 
< label for = commentEmailCheckbox>Öffentliche电子邮件：< / label> 
< f：form.checkbox id = commentEmailCheckbox property = mailPublic value = 1 /> 
< 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> 
  

---

是否有更好的制作方法那个RTE为我的Backend-Module工作，而我的流体模板中没有脏javascript（**我的答案）？**

EDIT

我认为这是唯一的解决方案，所以我现在将工作部分移至答案。

解决方案

在新表单下，我添加以下javascript：

 <脚本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看起来像这样：

< pre class = lang-js prettyprint-override> //配置新注释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 = [
 {名称：'basicstyles'，项目： ['Bold'，'Italic']}，
 {名称：'paragraph'，项目：['NumberedList'，'BulletedList'，'-'，'Blockquote'，]}，
 {名称：'document'，items：['Source']}，
]; 
}; 
  

现在，我为自己的后端模块提供了一个CKEditor，它带有自定义的编辑器按钮。到目前为止，这是我找到的唯一方法。

在另一扩展中，我的自定义内容元素不必加载 ckeditor库 或我的 configuration-javascript 。在那里，我只需要添加TCA： richtextConfiguration => 'minimal'

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

This question is similar to that one: RTE in own backend module based on Extbase and Fluid but not the same, so i created a new question.

---

I create a comment-extension for typo3 Version 8.7.7

I have added a RTE Editor (CKEditor) to a textarea field in my BackendModule.

Therefore i have the following TCA in my comment-model:

'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',
    ],
],

The backend template looks like this:

<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) inside my fluid-template?**

EDIT

I think this is the only solution, so i move the working part to an answer now.

解决方案

Under the new form i add this 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>

My ckcomment.js looks like this:

// 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();
});

And the backendRTEconfig.js has this content:

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

Now i got a CKEditor for my Backend Module with customized editor-buttons. Until now it's the only way i found.

In another extension my custom content elements don't have to load the ckeditor "library" nor my configuration-javascript. There I only had to add the TCA: 'richtextConfiguration' => 'minimal'

If someone know how to activate ckeditor without the javascirpt "loader" in my template, let me know.

这篇关于如何使用API​​将CKEditor RTE添加到typo3后端模块？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！