not working.....

[blackcatcjy]

Thank you for publish this plugin! I need it very much.

when i imported this pulgin in my ckeditor, the toolbar button has displayed, but it was not enabled.

my code is like this:

import ElementAddAttributes from './ckeditor5-add-attribute-to-element-main/src/add-attribute-to-element';
BalloonEditor.builtinPlugins = [....., ElementAddAttributes,];
BalloonEditor.defaultConfig = {
toolbar: {
items: [....,'elementAddAttributes',]
},
image: {
toolbar: [....]
},
table: {
contentToolbar: [....]
},
language: 'cn'
};

Then I can see this button in toolbar but not enable, like this:

I have tried to use command, it doesn't work too.

[rhysstubbs]

@blackcatcjy

Thanks for using it! It's been a while since I used/did this, I will try to take a look at the issue soon!

[zlatinszsmp]

Hello @rhysstubbs thank you for creating this plugin, it could potentially solve a lot of headaches when it comes to using CKEditor 5. The only problem is that I have the same issue. Also could I ask for a little bit more information, for example:

If I add custom attributes and pass them to CKEditor, will the editor keep the custom attributes ?
Example: <p data-attr-custom="test"> This is some text <a href="https://test-href.com" id="test-id" aria-label="test-data">this is a link</a></p>

Will this plugin allow all of these custom (some not so) attributes to be kept?

Thank you in advance!

[daneshka]

@zlatinszsmp
Were you able to find the answer to your questions?

[Kwaadpepper]

Same issue here

[Kwaadpepper]

I just found why looking into code.
You need to add this into ckeditor config, this is not documented

    elementAddAttributes: {
      enabled: true,
    },

[Kwaadpepper]

Well again not working, I have this config, and replacement won't work, nor pasting and id using source and then switch back to edit mode will remove id attributes.

// @ts-ignore
  ClassicEditor.create(ckeditor, {
    wordCount: {
      container: wordCounter,
      // @ts-ignore
      onUpdate: (stats) => {
        this.chars = stats.characters;
        this.words = stats.words;
      },
    },
    link: {
      // Automatically add target="_blank" and rel="noopener noreferrer" to all external links.
      addTargetToExternalLinks: true,

      // Let the users control the "download" attribute of each link.
      decorators: [
        {
          mode: "manual",
          label: "Ouvrir dans un nouvel onglet",
          attributes: {
            target: "_blank",
            rel: "noopener noreferrer",
          },
        },
      ],
    },
    elementAddAttributes: {
      enabled: true,
    },
    typing: {
      transformations: {
        extra: [
          { from: ":)", to: "😊" },
          { from: ":-P", to: "😛" },
          { from: "8-)", to: "😎" },
          { from: ";-)", to: "😉" },
          { from: ":-D", to: "😄" },
          { from: ":twisted:", to: "😈" },
          { from: ":mrgreen:", to: "😁" },
          { from: ":lol:", to: "😆" },
          { from: ":roll:", to: "🙄" },
          { from: ":-?", to: "😕" },
          { from: ":cry:", to: "😢" },
          { from: ":-o", to: "😮" },
          { from: ":evil:", to: "😡" },
          { from: ":-|", to: "😐" },
          { from: ":oops:", to: "😳" },
          { from: ":-x", to: "😠" },
          { from: "8-O", to: "😲" },
          { from: ":-(", to: "😧" },
          { from: ":arrow:", to: "➡" },
          { from: ":idea:", to: "💡" },
        ],
      },
    },
    mediaEmbed: {
      previewsInData: false,
      removeProviders: [
        "instagram",
        "twitter",
        "googleMaps",
        "flickr",
        "facebook",
        "dailymotion",
        "spotify",
        "youtube",
      ],
      // see https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-media-embed/src/mediaembedediting.js
      providers: [
        {
          // display local videos in oembed tags
          name: "localVideo",
          url: /^(\/(?:content|storage)\/.*)/,
          html: (match: string[]) => {
            const path = match[1];

            return (
              "<video controls allowfullscreen style=\"max-width: 90%; margin: 0 auto; display: block;\">" +
              `<source src="${path}" type="video/mp4">` +
              `<p>Votre navigateur ne prend pas en charge les vidéos HTML5. Voici <a href="${path}">un lien pour télécharger la vidéo</a>.</p>` +
              "</video>"
            );
          },
        },
      ],
    },
    toolbar: {
      items: [
        "heading",
        "|",
        "bold",
        "italic",
        "underline",
        "link",
        "elementAddAttributes",
        "bulletedList",
        "numberedList",
        "|",
        "outdent",
        "indent",
        "alignment",
        "|",
        "undo",
        "redo",
        "|",
        "laravelFileManager",
        "blockQuote",
        "|",
        "insertTable",
        "tableColumn",
        "tableRow",
        "mergeTableCells",
        "|",
        // 'videoStyle:alignLeft', 'videoStyle:alignCenter', 'videoStyle:alignRight', 'videoResize',
        // '|',
        // 'videoResize:50',
        // 'videoResize:75',
        // 'videoResize:original',
        "highlight",
        "fontColor",
        "fontFamily",
        "fontSize",
        "horizontalLine",
        "specialCharacters",
        "|",
        "removeFormat",
        "|",
        "undo",
        "redo",
        "|",
        "fullScreen",
        "sourceEditing",
      ],
      viewportTopOffset:
        verticalTopMenuOffset.getBoundingClientRect().height,
    },
    table: {
      contentToolbar: [
        "tableColumn",
        "tableRow",
        "mergeTableCells",
        "tableProperties",
        "tableCellProperties",
        "toggleTableCaption",
      ],

      // Configuration of the TableProperties plugin.
      tableProperties: {
        // ...
      },

      // Configuration of the TableCellProperties plugin.
      tableCellProperties: {
        // ...
      },
    },
    width: "auto",
    language: "fr",
    image: {
      toolbar: [
        "imageTextAlternative",
        "imageStyle:inline",
        "imageStyle:block",
        "imageStyle:side",
        "linkImage",
      ],
    },
    // video: {
    //     resizeUnit: 'px',
    //     // Configure the available video resize options.
    //     resizeOptions: [
    //         {
    //             name: 'videoResize:original',
    //             value: null,
    //             label: 'Original',
    //             icon: 'original'
    //         },
    //         {
    //             name: 'videoResize:50',
    //             value: 50,
    //             label: '50',
    //             icon: 'medium'
    //         },
    //         {
    //             name: 'videoResize:75',
    //             value: '75',
    //             label: '75',
    //             icon: 'large'
    //         }
    //     ]
    // }
  })
    // @ts-ignore
    .then((editor: ClassicEditor) => {
      // CKEditorInspector.attach(editor);
      // @ts-ignore NON reactive prop
      self.editor = editor;
      editor.setData(this.internalText);
      editor.model.document.on("change:data", () => {
        // * Keep track of internal editor
        let data = editor.getData();
        self.internalText = data;
        self.$emit("input", data);
      });
    })
    // @ts-ignore
    .catch((error) => {
      console.error("Oops, something went wrong!");
      console.error(
        "Please, report the following error on https://github.com/ckeditor/ckeditor5/issues with the build id and the error stack trace:"
      );
      console.warn("Build id: x0tjc6omqq4d-iydt761tuj51");
      console.error(error);
    });
},

[rhysstubbs]

@blackcatcjy @zlatinszsmp @daneshka @Kwaadpepper

I apologise for the lack of support on this issue. This was never really used and hence it had some bugs. I've recently made some updates and tested briefly with v35.2.0.

If you still need this plugin/want to use then I'd suggest trying the updated version.

[vikasaswal94]

@rhysstubbs still not working button is enable but after entering id it is not attached to the element

[rhysstubbs]

@vikasaswal94 Well feel free to create a codepen/fiddle to demonstrate it not working. I accept there may be issues but at the same time I'm not really able to spend much time on this. For my use case this is used for adding ids to paragraphs and headings and thats about it. Beyond that I've not done any other testing.

I'm going to recommend that anyone that needs this/wants to use it in a production app that they fork it and make changes as they need. I wrote it, then never used it, and still don't. I'm happy to look at specific cases, but I'd be a bad idea expecting this to "just work" as I assure you it will not... consider it a work-in-progress.

[Saeeed-B]

@rhysstubbs
The matter is clear, there is no need to re-open the position.

When the button is clicked and it has to give an ID to the element, it doesn't do it
No id is given to the element.
without any error

[Saeeed-B]

@rhysstubbs It doesn't give you an error to show you.
It just doesn't work

[Saeeed-B]

For my use case this is used for adding ids to paragraphs and headings and thats about i

It does not work exactly in these cases either. I don't know how you are using this, maybe it is not compatible with newer versions of ck

[Kwaadpepper]

I think I remember as I am using this, it does work only for headings (assign ID).
However il will need it to ad ID to more things.
I don't know if the ckeditor engine will allow that though. Even modifying this plugin.

Two things from now either the engine will allow to handle I'd on any node, either the ckeditor team did not implement that yet cause they have not anticipated this case.

Maybe they will in the future. Many people will need to find a solution including me as they are migrating from ckeditor 4

[Saeeed-B]

it does work only for headings

Whatever I test, it doesn't work for headings either!!

[Saeeed-B]

If it works only on the headings, my problem will be solved

[vikasaswal94]

@vikasaswal94 Well feel free to create a codepen/fiddle to demonstrate it not working. I accept there may be issues but at the same time I'm not really able to spend much time on this. For my use case this is used for adding ids to paragraphs and headings and thats about it. Beyond that I've not done any other testing.

I'm going to recommend that anyone that needs this/wants to use it in a production app that they fork it and make changes as they need. I wrote it, then never used it, and still don't. I'm happy to look at specific cases, but I'd be a bad idea expecting this to "just work" as I assure you it will not... consider it a work-in-progress.

Hi @rhysstubbs thanks for the reply, i have created 1 github repo for the same can you help in that
https://github.com/vikasaswal94/angular-ivy-kk9ryg

[sbt99]

As I told @rhysstubbs via e-mail, I took the code of this repo and changed it to make the applying of ID attributes work. Note that it really only covers ID attributes so far. The code can be found here: https://gitlab.com/s_leu/ckeditor5-id-attributes

The plugin is also included in the drupal module here: https://www.drupal.org/project/ckeditor_id_attributes