search

ckeditor / ckeditor5

Powerful rich text editor framework with a modular architecture, modern integrations, and features like collaborative editing.
https://ckeditor.com/ckeditor-5
Other
9.47k stars 3.7k forks source link

Adding ID on page break block #8100

Closed sameerpallav closed 4 years ago

sameerpallav commented 4 years ago

📝 Provide a description of the improvement

I insert page break into Ckedtior via <div id="${o.id}" style="page-break-after: always"><span style="display: none;">&nbsp;</span></div>

The ID gets stripped away. I even used a DIV convertor as per ckedtior 5 docs to allow all ids in DIV. But that doesn't seem to work either. Any solution on how I can add ID to a page breaks blocks?

This was my div attr convetor

ConvertDivAttributes(editor) {
    editor = editor || this.Editor;
    // Allow <div> elements in the model.
    editor.model.schema.register('div', {
      allowWhere: '$block',
      allowContentOf: '$root',
      allowAttributes: ['id']
    });
    // // // Allow <div> elements in the model to have all attributes.
    editor.model.schema.addAttributeCheck(context => {
      if (context.endsWith('div')) {
        return true;
      }
    });

    // // // // The view-to-model converter converting a view <div> with all its attributes to the model.
    editor.conversion.for('upcast').elementToElement({
      view: 'div',
      model: (viewElement, { writer: modelWriter }) => {
        console.log(viewElement);
        // return modelWriter.setAttribute( viewElement.getAttributes());
        return modelWriter.createElement('p', viewElement.getAttributes());
      }
    });

    // // // // // The model-to-view converter for the <div> element (attributes are converted separately).
    editor.conversion.for('downcast').elementToElement({
      model: 'div',
      view: 'div'
    });

    // // // // The model-to-view converter for <div> attributes.
    // // // // Note that a lower-level, event-based API is used here.
    editor.conversion.for('downcast').add(dispatcher => {
      dispatcher.on('attribute', (evt, data, conversionApi) => {
        // Convert <div> attributes only.
        if (data.item.name != 'div') {
          return;
        }

        const viewWriter = conversionApi.writer;
        const viewDiv = conversionApi.mapper.toViewElement(data.item);

        // In the model-to-view conversion we convert changes.
        // An attribute can be added or removed or changed.
        // The below code handles all 3 cases.
        if (data.attributeNewValue) {
          viewWriter.setAttribute(data.attributeKey, data.attributeNewValue, viewDiv);
        } else {
          viewWriter.removeAttribute(data.attributeKey, viewDiv);
        }
      });
    });
  }

How the feature works now and what you'd like to change?

📃 Other details

If you'd like to see this improvement implemented, add a 👍 reaction to this post.

FilipTokarski commented 4 years ago

Hi, thanks for the report. You need to add a conversion for inserting a page break and allow there the id attribute. The basic implementation looks like this:

editor.conversion.for( 'downcast' ).add( dispatcher => {
    dispatcher.on( 'insert:pageBreak', ( evt, data, conversionApi ) => {
    const viewWriter = conversionApi.writer;

    viewWriter.setAttribute( 'id', '1', conversionApi.mapper.toViewElement(data.item ) )
    } );
} );

So in this example, every time you insert a page break, it will have id="1". You can now modify the code to insert here any value that you need. Please let me know if this helps.