ckeditor5 - How can I apply a style to unordered <ul> and ordered <ol> list blocks instead of &l

admin管理员组

文章数量:1391981

My initial goal is to change the default Font Background Color plugin to assign color to block elements instead of creating an additional span element.

What I did is to create my custom version of FontBackgroundColorCommand

export const BLOCK_BACKGROUND_COLOR_ATTR_NAME = 'blockBackgroundColor';

class CustomFontBackgroundColorCommand extends FontBackgroundColorCommand {
  execute(options: { value?: string }) {
    const model = this.editor.model;
    const document = model.document;
    const selection = document.selection;

    model.change(writer => {
      // Apply the background color to the block element
      const blocks = Array.from(selection.getSelectedBlocks());
      for (const block of blocks) {
        writer.setAttribute(BLOCK_BACKGROUND_COLOR_ATTR_NAME, options.value, block);
      }
    });
  }
}

And create a plugin to deal with this new BLOCK_BACKGROUND_COLOR_ATTR_NAME attribute and transform it into a style.

export default class VfCanvasCustomFontBackgroundColor extends Plugin {

  init() {
    const editor = this.editor;

    editor.model.schema.extend('$block', {allowAttributes: BLOCK_BACKGROUND_COLOR_ATTR_NAME});

    editor.model.schema.setAttributeProperties(BLOCK_BACKGROUND_COLOR_ATTR_NAME, {
      isFormatting: true, // enable the Remove Format button
    });

    // Define the downcast conversion (model data to view data).
    editor.conversion.for('downcast').attributeToAttribute({
      model: BLOCK_BACKGROUND_COLOR_ATTR_NAME,
      view: modelAttributeValue => ({
        key: 'style',
        value: {
          'background-color': modelAttributeValue as string,
        }
      })
    });

    // Define the upcast conversion (view data to model data).
    editor.conversion.for('upcast').attributeToAttribute({
      converterPriority: "normal",
      view: {
        styles: {
          "background-color": /.*/,
        },
      },
      model: {
        key: BLOCK_BACKGROUND_COLOR_ATTR_NAME,
        value: (viewElement: ViewElement) => {
          const backgroundColor = viewElement.getStyle("background-color");
          viewElement._removeStyle("background-color");
          return backgroundColor;
        }
      }
    });

    // Override the default command
    editormands.add('fontBackgroundColor', new CustomFontBackgroundColorCommand(editor));
  }
}

This works well for most type of blocks except for lists, where each <li> gets its own background-color style, while my need is to apply the style to the parent <ul>/<ol> tag.

I'm stuck because the MODEL doesn't have the concept of parent of a listItem element, so I don't know how to build any upcast/downcast specific functions for lists.

Do you have any suggestion?

本文标签：