Styjun

I need to add 'id' attr to heading elements witch don't have it.

I try to do so

conversion.for('upcast').elementToElement(
 model: (viewElement, modelWriter) => 
 const attrs = ;
 const id = viewElement.getAttribute('id');


 if (id) 
 attrs['id'] = id;
 

 return modelWriter.createElement('heading1', attrs);
 ,
 view: 
 name: 'h1'
 ,
 converterPriority: 'low' + 1
);

conversion.for('downcast').add(dispatcher => 
 dispatcher.on('insert:heading1', (evt, data, conversionApi) => 
 if (!data.item.getAttribute('id')) 
 conversionApi.writer.setAttribute('id', generateUID(), data.item)
 
 );
);

conversion.for('downcast').attributeToAttribute(
 model: 
 name: 'heading1',
 key: 'id'
 ,
 view: 
 name: 'h1',
 key: 'id'
 
);

editor.conversion.elementToElement(option);

modelElements.push(option.model);

and it's changed the model with

<$root>
 <heading1 id="ykuqo5" >some text</heading1>
</$root>

but view still don't have 'id' attr.

I expect html tag in editor would be have id attr same to model. Thanks for help, sorry for my english

c. There are few minor issues:

1. The conversion process might be simplified to the two-way converter conversion.attributeToAttribute().


2. You should allow id attribute on all headings either by extending their definitions or by adding an attribute check to the schema.


3. Enforcing model state should be done by adding a model's document post-fixer.

class HeadingIdAttribute extends Plugin 
 init() 
 const editor = this.editor;
 const model = editor.model;
 const conversion = editor.conversion;

 // Allow 'id' attribute on heading* elements:

 // Either by extending each heading definition:
 // editor.model.schema.extend( 'heading1', allowAttributes: [ 'id' ] );
 // editor.model.schema.extend( 'heading2', allowAttributes: [ 'id' ] );
 // editor.model.schema.extend( 'heading3', allowAttributes: [ 'id' ] );

 // or by adding a more general attribute check:
 model.schema.addAttributeCheck( ( schemaContext, attribute ) => 
 if ( attribute == 'id' && isHeading( schemaContext.last.name ) ) 
 return true;
 
 );

 // Then the conversion might be a two way attribute-to-attribute:
 conversion.attributeToAttribute( 
 model: 'id',
 view: 'id'
 );

 // Register a model post-fixer to add missing id attribute 
 // to the heading* element.
 model.document.registerPostFixer( writer => 
 let wasChanged = false;

 // Get changes
 const changes = model.document.differ.getChanges();

 for ( const change of changes ) 
 // Check heading nodes on insert.
 if ( change.type == 'insert' && isHeading( change.name ) ) 
 const heading = change.position.nodeAfter;

 // Set 'id' attribute when it is missing in the model.
 if ( !heading.hasAttribute( 'id' ) ) 
 writer.setAttribute( 'id', uid(), heading );

 // Return true to notify that model was altered.
 wasChanged = true;
 
 
 

 return wasChanged;
 );

 // Helper method for checking if name is any heading element.
 // Detects default headings: 'heading1', 'heading2', ... 'heading6'.
 function isHeading( name ) 
 return name.slice( 0, -1 ) == 'heading';
 
 

And add this plugin to your editor (remember to add also other plugins):

ClassicEditor
 .create( document.querySelector( '#editor' ), 
 plugins: [ Enter, Typing, Undo, Heading, Paragraph, HeadingIdAttribute ],
 toolbar: [ 'heading', ' )
 .then( editor => 
 window.editor = editor;
 )
 .catch( err => 
 console.error( err.stack );
 );

It will create an id attribute to the view as well: