如何在 Link 浏览器中为内容元素和新 rte_ckeditor 定义自定义 class、标题和目标？

Question

先决条件

[x] 你能在 TYPO3 8.7 LTS 上重现这个问题吗 - 是

[x] 您是否[粗略搜索] 以查看是否已报告您的错误或增强功能？ -是

描述

如何在任何元素 link（通常是元素标题和图像）中为 Link 浏览器配置默认 link 目标、class 和标题以及rte_ckeditor 在 Typo3 8 LTS 中？我花了几个小时尝试配置它，但没有成功，也没有文档。这些字段是空的，如下图所示。

重现问题的步骤

创建您可以 link 标题或图像的任何元素。
单击以打开 Link 浏览器
任何类型的 link（页面、文件、文件夹、外部 URL、电子邮件）的选项都为空。

预期行为：如果它们为空，我想为每种类型的 link 定义默认 classes、link 目标和标题。例如外部 URL，我想自动填充 target="_blank"，class "external-link"，title="Link to External Website"，如果 link 不是之前配置。基本上对于任何新的 link 我只想让它自动填充我的自定义值而不是空值。

这仅适用于以前的 Typo3 版本的 rtehtmlarea，但我无法在 Typo3 8 LTS 和 ckeditor 上设置此选项系统范围。

以前只对rtehtmlarea起作用的PageTS是这样的：

RTE {
    classesAnchor {
        externalLink {
            class = external-link
            type = url
            titleText = Opens external link in new window
            target = _blank
            image =
        }
        externalLinkInNewWindow {
            class = external-link-new-window
            type = url
            titleText = Opens external link in new window
            target = _blank
            image =
        }
        internalLink {
            class = internal-link
            type = page
            titleText =  Opens internal link in this window
            target = _top
            image =
        }
        internalLinkInNewWindow {
            class = internal-link-new-window
            type = page
            titleText = Opens internal link in new window
            target = _blank
            image =
        }
        folder {
            class = folder
            type = folder
            titleText =
            target =
            image =
        }
        download {
            class = download
            type = file
            titleText = Initiates file download
            target = _blank
            image =
        }
        mail {
            class = mail
            type = mail
            titleText = Email Address
            image =
        }
    }
}

我希望这适用于新的 rte_ckeditor 以及我可以使用 Link 浏览器 link 的任何元素选项。

Answer 1

这是解决方案，

RTE.default {

     # This will provide only basic tool in the text RTE
     preset = default

     ## Bootstrap CSS
     contentCSS {
         20 = fileadmin/Resources/Public/Bootstrap/css/bootstrap.css
     }


     classesAnchor {
        url {
            class = externalLink
            type = url
            titleText = Opens external link in new window
            target = _blank
            image =
         }

        page {
            class = internalLink
            type = page
            titleText =  Opens internal link in this window
            target = _top
            image =
        }

        file {
            class = download
            type = file
            titleText = external file
            target = _blank
            image =
        }

        folder {
            class = folder
            type = folder
            titleText = folder file
            target = _blank
            image =
        }

        mail {
            class = mail
            type = mail
            titleText = Email Address
            image =
        }
    }

    buttons.link{
        page.properties.class.default = internalLink

        url.properties.class.default = externalLink

        folder.properties.class.default = folder

        file.properties.class.default = download

        mail.properties.class.default = mail

        properties.class.allowedClasses = internalLink,externalLink,folder,mail,download
    }
}

看看这个，我也添加了默认 link 标题及其目标。你可以看到我后端的输出：

Answer 2

所以过了几天又几天又几天！！！经过搜索、试验和错误，我终于找到了一种方法，可以根据 rte_ckeditor 甚至 rtehtmlarea 之外的类型启用 link 的自动填充参数。这不是我想要的，但差不多了！

将此添加到我的页面 TSConfig 解决了部分问题：

TCEMAIN.linkHandler {
    # I don't want to load the folder link handler so I reset it.
    folder >
    # Leaving page type empty on purpose.
    page {
    }
    file {
        addParams = onclick="jumpToUrl('?act=file&linkAttributes[target]=_blank&linkAttributes[title]=Opens or downloads file in new window&linkAttributes[class]=download&linkAttributes[params]=');return false;"
    }
    url {
        addParams = onclick="jumpToUrl('?act=url&linkAttributes[target]=_blank&linkAttributes[title]=Opens external link in new window&linkAttributes[class]=externalLink&linkAttributes[params]=');return false;"
    }
    mail {
        addParams = onclick="jumpToUrl('?act=mail&linkAttributes[title]=Opens email manager to send an email&linkAttributes[class]=mail&linkAttributes[params]=');return false;"
    }
}

我没有为 page 配置任何东西，因为如果它被填充并且我点击文件、外部 Url、电子邮件或任何其他自定义 link 处理程序，属性是从页面 link 处理程序传递过来，这违背了每个 link 处理程序类型的 pre-populated 参数的目的。

唯一剩下的问题是，如果我点击 External URL，目标将是 "_blank"，标题将是 "Opens external link in new window"，class 将是 "externalLink"。到目前为止，一切都很好。那么如果你点击link一个File甚至link一个内部Page，那些pre-loaded for External URL的参数将被传递一起，我认为这不应该发生。由于我正在尝试 pre-populate 每个 link 类型，为什么我要保留先前 link 类型的属性？这可能只是一个意见问题，但我希望为每个 link 类型选择 force pre-populated 参数。也许我只是缺少实现此行为的小配置。

Answer 3

TYPO3 8.7.8（仅限）中存在错误 - 请参阅：https://forge.typo3.org/issues/82865

[编辑] classesAnchor 仅在 8.7.5 到 8.7.7 版本中有效，希望在 8.7.9 中再次有效

但正确的答案应该是（就像 Ghanshyam Bhava 在他的评论中指出的那样）切换到 YAML 配置。

https://typo3worx.eu/2017/02/configure-ckeditor-in-typo3/

# Load default processing options
imports:
    - { resource: "EXT:rte_ckeditor/Configuration/RTE/Default.yaml" }

classesAnchor:

  externalLink:
    class: 'external-link'
    type: 'url'

  downloadLink:
    class: 'download-link'
    type: 'file'

  mailLink:
    class: 'mail-link'
    type: 'mail'

buttons:
  link:
    properties:
      class:
        allowedClasses: 'external-link,download-link,mail-link'

Link RTE 之外的其他字段的浏览器应该可以通过 TCA-Overrides 实现。

Answer 4

我已经在 TYPO3 9 中测试了此解决方案，并在我的 yaml 配置文件中使用 ckeditor 加载了我自己的默认值。它工作正常，除了默认设置不能按预期工作。 titleText，当前被同类型的最后一个标题覆盖。例如对于类型 'page'，标题 'Opens internal link in new window' 被加载而不是 'Opens internal link in this window'。

buttons:
  link:
    relAttribute:
      enabled: true
    page:
      properties:
        class:
          default: internal-link
    url:
      properties:
        class:
          default: external-link-new-window
    folder:
      properties:
        class:
          default: folder
    file:
      properties:
        class:
          default: download
    mail:
      properties:
        class:
          default: mail
    properties:
      class:
        allowedClasses: 'internal-link,internal-link-new-window,download,external-link,external-link-new-window,mail'

#Classes config
classesAnchor:
  internalLink:
    class: 'internal-link'
    type: 'page'
    titleText: 'Opens internal link in this window'
  internalLinkNewWindow:
    class: 'internal-link-new-window'
    type: 'page'
    target: '_blank'
    titleText: 'Opens internal link in new window'
  download:
    class: 'download'
    type: 'file'
    target: '_blank'
    titleText: 'Download file'
  externalLink:
    class: 'external-link'
    type: 'url'
    titleText: 'Opens External link in this window'
  externalLinkNewWindow:
    class: 'external-link-new-window'
    type: 'url'
    target: '_blank'
    titleText: 'Opens External link in new window'
  linkMail:
    class: 'mail'
    type: 'mail'
    titleText: 'Email Address'

Answer 5

要在 yaml 中配置 default 类，您必须在 .yaml 文件中像这样添加默认值类：

classesAnchor: page: class: 'link-page' type: 'page' target: '_top' file: class: 'link-file' type: 'file' target: '_blank' titleText: 'Download' url: class: 'link-external' type: 'url' target: '_blank' mail: class: 'link-mail' type: 'mail' titleText: 'Send email' buttons: link: properties: class: allowedClasses: 'link-page, link-file, link-external, link-mail' page: properties: class: default: 'link-page' file: properties: class: default: 'link-file' url: properties: class: default: 'link-external' mail: properties: class: default: 'link-mail'

如何在 Link 浏览器中为内容元素和新 rte_ckeditor 定义自定义 class、标题和目标？

How to define custom class, title, and target in Link Browser for content elements and the new rte_ckeditor?

typo3

typo3-8.x