1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

How to create a simple real-time word count for editor?

Discussion in 'XenForo Development Discussions' started by JoseLuisLAPS3, Oct 28, 2014.

  1. JoseLuisLAPS3

    JoseLuisLAPS3 Member

    Hi, i'm trying to create a simple word count for the XenForo editor via jquery but i don't know exactly how to access the DOM.

    I used this simple javascript code to access a normal input zone:

    Code:
    function count(){
        var words = $('#title').val().trim().replace(/\s+/gi, ' ').split(' ').length;
        var chars = $('#title').val().length;
        if(chars===0){words=0;}
        $('#titlecounter').html('('+ chars +')');
    }
    
     $('#title').on('keyup propertychange paste', function(){
         count();
        });
    
    But i don't know how to access the Editor content (Redactor). Someone now how to access it via jquery ? maybe @cclaerhout ?
     
  2. JoseLuisLAPS3

    JoseLuisLAPS3 Member

    Nobody knows how to do that ?
     
  3. Chris D

    Chris D XenForo Developer Staff Member

    The editor contents are synced to a hidden textarea, so you should target that and retrieve its value, e.g. the most basic way:

    Code:
    $('textarea.BbCodeWysiwygEditor').val();
    One thing that's worth bearing in mind is the editor contents contain HTML. You will have to factor in how a string such as:

    <font color="#ff0000">This is a string</font>

    ...is counted. You may need some function that strips out all HTML and then counts what is left.
     
    JoseLuisLAPS3 likes this.
  4. JoseLuisLAPS3

    JoseLuisLAPS3 Member

    Nice, this is a good, but i need as you said some kind of "HTML code cleaner".
     
  5. Chris D

    Chris D XenForo Developer Staff Member

    Try this... (untested):

    Code:
    $("<div/>").html($('textarea.BbCodeWysiwygEditor').val()).text()
    That creates a div, populates the inner HTML with the HTML from the hidden textarea and then returns the text value of the div (which strips the HTML).
     
    Brogan and JoseLuisLAPS3 like this.
  6. JoseLuisLAPS3

    JoseLuisLAPS3 Member

    Works !!!! A lot of thanks !
     
    Chris D likes this.
  7. cclaerhout

    cclaerhout Well-Known Member

    I don't think the textarea is synchronized with the RTE in real time, so the value given by the above code won't be accurate, unless if you want to get this value when the form is sent. Otherwise, you will have to use the Redactor functions to get this value and apply a filter based on what kind of words or characters you want to match for your counter. Don't forget, the JS regex engine doesn't support unicode. To clean the RTE content and implement your counter, you can take a look at the TinyMCE wordcount plugin (LGPL licence). Good luck.
     
  8. Chris D

    Chris D XenForo Developer Staff Member

    It is, otherwise I wouldn't have suggested its use.
     
  9. cclaerhout

    cclaerhout Well-Known Member

    Then "$('textarea.BbCodeWysiwygEditor').val()" should be enough to get the code (creating a wrapper to get its text is redundant here), but not to bind an external function on it. With this way of doing, the syncCode will have to be extended to trigger an event and this will not be clean. The cleanest solution is simply to make a plugin. Redactor has already one but it has been coded with its new api (ref). This means on XenForo it will have to be coded with the editor former API and with the XenForo self API (for the init):
    Code:
      $(document).on('EditorInit', function(e, data){
         var editor = data.editor,
           config = data.config;
    
         RedactorPlugins.myPlugin = {
           init: function()
           {
             this.$editor.on('keyup', $.proxy(function(e)
             {
               var html = this.$editor.html();
               console.log(html);
               //to do
             }, this));   
           }
         };
    
         if(typeof config.plugins === undefined || !$.isArray(config.plugins)){
           config.plugins = ['myPlugin'];
         }else{
           config.plugins.push('myPlugin');
         }
       });
    
     
  10. Chris D

    Chris D XenForo Developer Staff Member

    It is, to get the raw HTML code, yes.

    It isn't redundant because the textarea value contains the HTML contents of the editor, and to accurately count the word/characters, the HTML tags need to be removed. Using the wrapper and text method removes those tags.
     
  11. cclaerhout

    cclaerhout Well-Known Member

    Oh ok, then use this code, it will be faster:
    Code:
    $($('textarea.BbCodeWysiwygEditor').val()).text();
    The problems of this solution remain the same:
    1. it fails to give a proper way to listen the modifications and bind a function on it
    2. the counter will be inaccurate since, for example, some whitespace will be missing (the one of the paragraphs), that's why all counters plugins using some custom regex.
     
  12. JoseLuisLAPS3

    JoseLuisLAPS3 Member

    A little problem i found with the code. The event keyup don't fire with $('textarea.BbCodeWysiwygEditor').

    How can i make this code fire?
     
  13. cclaerhout

    cclaerhout Well-Known Member

    See post #9.
     
  14. JoseLuisLAPS3

    JoseLuisLAPS3 Member

    I see it, but i dont know if i need to code this as a javascript source or inside Xenforo. The best way to do it
     
  15. cclaerhout

    cclaerhout Well-Known Member

    Create a js file and include it in your header. If you just want a quick test, just paste the code in a global template (footer for example).
     
  16. timothy259856

    timothy259856 Active Member

    I know this topic is too old but are there anyway to change the content of the editor by js?
     

Share This Page