Implement the limit of words/characters

[msamsel]

🆕 Feature Request

There should be an option to limit words/characters in the editor:

• Indicate the limit by changing the style of the WordCounter container
• display limit as: Characters: NNN/MMM

---

If you'd like to see this fixed sooner, add a 👍 reaction to this post.

[PawanKPhogat]

I too need to set the limit of characters in ckeditor5 to satisfy backward compatibility

[pankaarya]

@mlewand : May i know by when ckeditor5 will support limiting number of characters? ETA?

[mlewand]

@pankaarya no particular plans regarding this feature for now. Best what you can do is to add 👍 reaction to the first post. Other option is also trying to roll out your own plugin as it shouldn't be difficult to observe word count plugin and act accordingly upon reaching the limit.

[yangfan0095]

solved like this

let oldData = '';

onUpdate: (data) => {
if (data.characters >= 4500) {
            disableInputRef.current = true;
            setShowLimitError(true);
          } else {
            disableInputRef.current = false;
            setShowLimitError(false);
             if (window.CKeditor) {
               oldData = window.CKeditor.getData();
             }
          }
...

editor.model.document.on('change:data', () => {
          if (disableInputRef.current === true) {
             window.CKeditor.setData(oldData);
          }
        });
  
    

this way can solve , but cannot control the scroll. when call setData , the content will be reset and the scroll will be Initialized to the top.

[yangfan0095]

 const getUndoElement = () => {
    if (!window.CKeditor) {
      return null;
    }
    const ckButtonLabelElements = document.getElementsByClassName('ck ck-button__label');
    if (typeof ckButtonLabelElements === 'object') {
      const keys = Object.keys(ckButtonLabelElements);
      const undoKey = keys.find((key) => ckButtonLabelElements[key].textContent === 'Undo');
      if (undoKey) {
        return ckButtonLabelElements[undoKey].parentElement;
      }
    }
    return null;
  };


  const undoEdit = _.debounce(() => {
    try {
      if (
        undoButtonElementRef.current &&
        !undoButtonElementRef.current.className.includes('ck-disabled')
      ) {
        console.log('undo input from outer');
        undoButtonElementRef.current.click();
      }
    } catch (e) {
      console.log(e);
    }
  }, 1500);


 editor.model.document.on('change:data', () => {
          // 输入长度超过限制 则编辑器禁止输入， 实现方式为手动触发undo 插件执行。
          if (disableInputRef.current === true) {
            undoEdit();
          }
        });

the other way , find the undo Element ,use the undo plugin by dom click manually , it's the best way that I tried , to limit words input from time to now

• 1 find the undo Element
• 2 set change:data listener
• 3 when limit trigger， click undoElement manually

[Reinmar]

I wrote this PoC of characters limit plugin: https://github.com/Reinmar/ckeditor5-maximum-length

It works similar to how Twitter handles it.

This is it in the Strapi integration: