Super Sale Limited Time 50% OFF for All-Access Plans
Save 50% Now

How to Use CKEditor Plugins with Metronic Bootstrap


Hi,

On my page, HTML textarea elements are configured to be transformed into CKEditor instances using the following code:

const textareaElements = document.querySelectorAll('[data-ckeditor="true"]');
textareaElements.forEach(el => {
ClassicEditor.create(el);
});

I want to impose a limit on the maximum number of words that can be entered. Can you please guide how to achieve that?


Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (2)

Hi,

To impose a word limit on CKEditor instances, you can make use of CKEditor's event system to listen to the input event and apply a word count logic. CKEditor does not provide a built-in word limit feature, so you'll need to implement a custom solution to count the words and prevent further input when the limit is reached.

const textareaElements = document.querySelectorAll('[data-ckeditor="true"]');
const MAX_WORDS = 100; // Set your word limit here

textareaElements.forEach(el => {
  ClassicEditor.create(el).then(editor => {
    // Listen to the input event in the editor
    editor.model.document.on('change:data', () => {
      // Get the editor content as plain text
      const text = editor.getData().replace(/<[^>]*>/g, '').trim();
      
      // Count the number of words
      const words = text.split(/\s+/).filter(word => word.length > 0);
      const wordCount = words.length;
      
      // If the word count exceeds the limit, prevent more input
      if (wordCount > MAX_WORDS) {
        alert(`You have reached the maximum word limit of ${MAX_WORDS} words.`);
        
        // Optionally, trim the content to the maximum allowed number of words
        const limitedText = words.slice(0, MAX_WORDS).join(' ');
        
        // Set the truncated content back into the editor
        editor.setData(limitedText);
      }
    });
  }).catch(error => {
    console.error('There was a problem initializing CKEditor:', error);
  });
});

For more info please check CKEditor Docs.

Regards, Sean


Thanks for your reply, Sean. I'll give it a try.


Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(