Article From:https://segmentfault.com/q/1010000010471847
Question:

At present, using editor simditor, a requirement now is to add a word limit to this editor.
The value in the current editor can be obtained in real time, for example:

<p style="font-size=14px">123456</p>

If I limit the number of five words, after truncation should be:

<p style="font-size=14px">12345</p>

The number of words is very simple. It only needs to filter out the labels, and then we can see the length of the filtered text.
But it is difficult to cut the text with tags. How can I find the location that should be cut accurately and quickly?

Once thought of a way to take a shortcut. It is when the value changes in the editor (onValueChange) are compared with the value before the change (currentValue). If there is a change, the length of the tag is removed regularly, if the length exceeds the length.The value (currentValue) is reassigned to the editor.

But this shortcut encountered many pits later. First of all, if he pasted the text to more than the number of restricted words, this paragraph is not sticky. I have no other methods except intercept the corresponding position. Ask you guys to help you

    var editorValue = editor.getValue();
    var actualText_num = editorValue.replace(/<\/?[^>]*>/g,'').replace(/[ | ]*\n/g,'\n').replace(/\n[\s| | ]*\r/g,'\n').replace(/&nbsp;/ig,'').length;

    editor.on('valuechanged', function(e, type) {
      var tmp_editorValue = editor.getValue();
      
      if(tmp_editorValue === editorValue){
        return;
      }

      var tmp_actualText = tmp_editorValue.replace(/<\/?[^>]*>/g,'').replace(/[ | ]*\n/g,'\n').replace(/\n[\s| | ]*\r/g,'\n').replace(/&nbsp;/ig,'');

      if(tmp_actualText.length > 50 && tmp_actualText.length >= actualText_num ){
        editor.setValue(editorValue);
        editor.focus();
      }else{
        editorValue = tmp_editorValue;
        actualText_num = tmp_actualText.length;
      }

…… According to the tip of the first floor, I checked the maximumWords of uEditor, and found that on the demonstration of the official website, he just prompted the number of words in the lower right corner, and gave a warning when it exceeded the limit. The operation was not truncated. Again in embarrassment

Here is the code.

Answer 0:

I helped you look at API, there is no way to prohibit input.
I said my idea, not necessarily feasible, I see a valuechanged event, a bit of the trick is to call the getValue () method in the event to get the content, determine the length of the content and call the blur () method, and no further input.
This is API:http://simditor.tower.im/docs…

Answer 1:

Later, we set up a set of plug-ins to solve this problem. First, the incoming text is parsed into DOM, then it is easy to do.

Answer 2:

I’ve used two kinds of editors, but I can’t cut them at the moment. You can only count the words. The actual content is tagged.
If you truncate the implementation, the editor will definitely give you a configuration. After all, that’s what everyone expects, but it doesn’t give you a hint that it’s not working.

Similar Posts:

Leave a Reply

Your email address will not be published. Required fields are marked *