General HTML Support: Allow enabling attributes/classes/styles without specifying a tag

[corymharper]

📝 Provide a description of the new feature

What is the expected behavior of the proposed feature?

My basic suggestion is allowing something like:

    htmlSupport: {
        allow: [
            {
                attributes: ['id'],
                classes: true,
                styles: true
            }
        ],
    },

This specific ruleset would mean, "For all currently allowed tags, allow the id attribute, any class, and any style." As far as I can tell, there is no way to do this without explicitly listing out every enabled tag to extend their ruleset, which creates a huge list to maintain for what seems like a simple ask. The above-required list becomes even more cumbersome, as it most likely didn't exist previously, since many developers will just have had tags enabled passively by plugins they are using and aren't maintaining much of any list of allowed elements.

---

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

[Witoso]

Thanks for the feature request. I'm always curious how such content is created by writers that they can add the id attribute, any class, and any style. Or is it post-processed in the backend? Or maybe some custom extensions were written to add those. Would you mind sharing some details?

[corymharper]

Thanks for the feature request. I'm always curious how such content is created by writers that they can add the id attribute, any class, and any style. Or is it post-processed in the backend? Or maybe some custom extensions were written to add those. Would you mind sharing some details?

In our case, and I'm figuring this would be the case for anyone using these plugins as well, it's by using the source editing mode provided by the plugin of the same name, or by using the HTML embed feature, again enabled by the plugin of the same name.

[Witoso]

What I meant here, is how do writers/system add attributes, classes, style. In the core concept, we are a WYSIWYG editor, HTML configuration only allows preserving those values. Is it the usage SourceEditing? I am asking here about the use case more than a tech details.

[corymharper]

What I meant here, is how do writers/system add attributes, classes, style. In the core concept, we are a WYSIWYG editor, HTML configuration only allows preserving those values. Is it the usage SourceEditing? I am asking here about the use case more than a tech details.

I'm not sure if we are having a miscommunication, but I mean the product users use the source editing feature and HTML embed feature to write content that includes id's, styles, and classes. We need the editor to preserve what they have written because we display that content elsewhere applying their class rules and styles set separately.

Here's a video of some usage: https://images.sparksuite.com/v/z1qiXVUCRCP1z3SjK9SQ

[Witoso]

All good, this is exactly what I wanted to understand :+1:

[chiconguyen2601]

@Witoso How to use GeneralHtmlSupport in Reactjs? Below is my code, but I don't know where to set config for GeneralHtmlSupport plugin to keep my custom class of table in initData, could you help?

import { CKEditor } from '@ckeditor/ckeditor5-react';
import Editor from 'ckeditor5-custom-build/build/ckeditor';
import { Bold, Italic } from '@ckeditor/ckeditor5-basic-styles';
import { Essentials } from '@ckeditor/ckeditor5-essentials';
import { Paragraph } from '@ckeditor/ckeditor5-paragraph';
import GeneralHtmlSupport from '@ckeditor/ckeditor5-html-support';
import CKEditorInspector from '@ckeditor/ckeditor5-inspector';

const data = '<h1>Test Table</h1>' +
    "<table class='" +
    "myClass" +
    "'>" +
    '<thead>' +
    '<tr>' +
    '<th>No</th>' +
    '<th>Nubber</th>' +
    '<th>Input</th>' +
    '<th>Operation</th>' +
    '<th>Time</th>' +
    '<th>Remarks</th>' +
    '</tr>' +
    '</thead>' +
    '<tbody>' +
    rowData +
    '</tbody>' +
    '</table>';

const MyEditor => {
return (
    <div className='editor-container'>
      <CKEditor
        editor={Editor}
        data={data}
        onChange={(event: any, editor: any) => {
          const data1 = editor.getData();
          console.log('data', data1);
        }}
       onReady={(editor) => {

       }}
      config={{
        language: 'en'
      }}
)/>
    </div>
  );
};
export default MyEditor; 

[Witoso]

@chiconguyen2601 please create a new issue as it's not relevant to this thread.