ckeditor -使用Decorator将title标签添加到链接

CKEditor 是一个流行的富文本编辑器，它允许用户在网页上创建和编辑内容。在 CKEditor 中，Decorator 是一种模式，用于修改编辑器内容的结构和样式。如果你想要在使用 CKEditor 时自动为链接添加 title 标签，你可以通过自定义 Decorator 来实现这一功能。

基础概念

Decorator：在 CKEditor 中，Decorator 是一种用于修改编辑器内容的工具。它可以用来添加、删除或修改元素及其属性。

title 标签：在 HTML 中，title 属性用于为元素提供额外信息，这些信息通常在用户将鼠标悬停在元素上时显示为工具提示。

类型与应用场景

自动添加：当用户创建或编辑链接时，自动为其添加 title 属性。
自定义内容：允许用户为每个链接设置不同的 title 文本。

实现方法

以下是一个简单的示例，展示如何在 CKEditor 中使用自定义 Decorator 来自动为链接添加 title 标签：

// 初始化 CKEditor 实例
ClassicEditor
    .create(document.querySelector('#editor'), {
        // 配置 Decorator
        decorators: [
            {
                name: 'add-title-to-link',
                mode: 'manual', // 手动模式，因为我们将在内容变化时调用它
                match: node => node.is('a'), // 匹配所有 <a> 标签
                render: (text, node) => {
                    // 如果链接没有 title 属性，则添加一个默认值
                    if (!node.getAttribute('title')) {
                        node.setAttribute('title', '点击访问');
                    }
                    return text;
                }
            }
        ],
        // 监听内容变化事件
        onChange: () => {
            const editor = ClassicEditor.instances[0];
            editor.editing.view.document.getRoot().decorate('add-title-to-link');
        }
    })
    .catch(error => {
        console.error(error);
    });