操纵CKEditor视图的innertext

Question

我正在为#Neoscms创建一个为CKEditor5创建一个自定义插件。 NEOS使用＃ckeditor5，但具有自定义视图。

该插件或多或少是占位符插件。用户可以使用项目（标识符和标签）的键值存储配置数据源。 ckeditor中的下拉列表中充满了项目，当用户从下拉列表中选择一个项目时，它会创建一个占位符元素，该元素应以某些数据属性结尾。

主要想法是拥有一个空的元素，只是数据属性以识别元素并能够分配实时数据。但是事实证明，实时数据很棘手。当我在网站上使用额外的JS片段来操纵跨度时，CKEditor无法处理。

是否可以操纵DOM中的视图元素并仍然有一个工作编辑器？ 如果我只是在降低的降低中添加内部文本并且不替换某些内容，则该插件正常工作。但是实时数据会很好。

带有元素的neos后端

也许该代码可以给出包装的想法。 它尚未准备就绪，因为这或多或少是主要功能;）

import {Plugin, toWidget, viewToModelPositionOutsideModelElement, Widget,} from "ckeditor5-exports";

import PlaceholderCommand from "./placeHolderCommand";

export default class PlaceholderEditing extends Plugin {
    static get requires() {
        return [Widget];
    }

    init() {
        this._defineSchema();
        this._defineConverters();

        this.editor.commands.add(
            "placeholder",
            new PlaceholderCommand(this.editor)
        );

        this.editor.editing.mapper.on(
            "viewToModelPosition",
            viewToModelPositionOutsideModelElement(this.editor.model, (viewElement) =>
                viewElement.hasClass("internezzo-placeholder")
            )
        );

        this.editor.config.define("placeholderProps", {
            types: ["name", "node", "nodePath"],
        });

        this.editor.config.define("placeholderBrackets", {
            open: "[",
            close: "]",
        });
    }

    _defineSchema() {
        const schema = this.editor.model.schema;

        schema.register("placeholder", {
            allowWhere: "$text",
            isInline: true,
            isObject: true,
            allowAttributes: [
                "name",
                "node",
                "nodePath",
                "data-placeholder-identifier",
                "data-node-identifier",
                "data-node-path",
            ],
        });
    }

    _defineConverters() {
        const conversion = this.editor.conversion;
        const config = this.editor.config;

        conversion.for("upcast").elementToElement({
            view: {
                name: "span",
                classes: ["foobar-placeholder"],
            },
            model: (viewElement, writer) => {
                const name = viewElement.getAttribute('data-placeholder-identifier');
                const node = viewElement.getAttribute('data-node-identifier');
                const nodePath = viewElement.getAttribute('data-node-path');
                const modelWriter = writer.writer || writer;
                return modelWriter.createElement("placeholder", {name, node, nodePath, editable: false});
            },
        });

        conversion.for("editingDowncast").elementToElement({
            model: "placeholder",
            view: (modelItem, writer) => {
                const viewWriter = writer.writer || writer;
                const widgetElement = createPlaceholderView(modelItem, viewWriter);
                return toWidget(widgetElement, viewWriter);
            },
        });

        conversion.for("dataDowncast").elementToElement({
            model: "placeholder",
            view: (modelItem, writer) => {
                const viewWriter = writer.writer || writer;

                return createPlaceholderView(modelItem, viewWriter);
            },
        });

        // Helper method for downcast converters.
        function createPlaceholderView(modelItem, viewWriter) {
            const name = modelItem.getAttribute("name");
            const node = modelItem.getAttribute("node");
            const nodePath = modelItem.getAttribute("nodePath");

            const placeholderView = viewWriter.createContainerElement("span", {
                class: "foobar-placeholder",
                "data-placeholder-identifier": name,
                "data-node-identifier": node,
                "data-node-path": nodePath,
            });

            // Would be nice to remove that and have just empty spans that get dynamic data
            let innerText = config.get("placeholderBrackets.open") + name;
            innerText += config.get("placeholderBrackets.close");
            viewWriter.insert(
                viewWriter.createPositionAt(placeholderView, 0),
                viewWriter.createText(innerText)
            );

            return placeholderView;
        }
    }
}

因此，网站使用的额外JS摘要正在搜索使用类foobar-codeholder 的跨度，并使用实时数据进入跨度。当然，这在前端中起作用，但是使用CKEditor的CMS的后端在不断变化的数据上存在问题。

Answer 1

我找不到使用Ckeditor文档的解决方案，也许我以某种方式滥用了API，但是我现在为我找到了一个工作解决方案。

我的网站片段现在通过广播消息与插件进行通信。然后我搜索占位符元素，并检查是否需要更改属性。

const broadcastChannel = new BroadcastChannel('placeholder:changeData');
broadcastChannel.postMessage({identifier: name, value});

现在仅在插件中

// Receive new values for placeholder via broadcast
        const broadcastChannel = new BroadcastChannel('placeholder:changeData');
        broadcastChannel.onmessage = (message) => {
            const identifier = get('data.identifier', message);
            const newValue = get('data.value', message);
            this.editor.model.change( writer => {
                if (identifier) {
                    this._replaceAttribute(writer, identifier, newValue);
                }
            });
        };

，我需要重新加载页面，但是已经读到，这可能是由于我的元素下降而导致的，并且我更改了属性。