1

Topic: New Text Metrics Plugin

I've just uploaded a new plugin (http://sourceforge.net/tracker/index.ph … tid=738747) to source forge that calculates text metrics (character, whitespace, word, sentence, and paragraph counts). It's very efficient, as it only uses a single pass through the HTML to parse out the metrics (using a state machine to handle various special cases). In fact, with the new browser Javascript performance advances + the single pass algorithm, we have removed most of the timers that you'll find in the default word count plugin (which we used as a template to create ours) and tested it on a 16,000 word document, and found no noticeable pauses in normal and rapid-typing scenarios.

It has been in production on Scriptito.com for over a month, and we've had no issues with it... However, the HTML that's being generated by the current Scriptito TinyMCE configuration is pretty basic, so as we add additional functionality, I'm sure the parser will have to be tweaked slightly to cover the additional HTML scenarios.

We at Scriptito love what TinyMCE has provided, and are hoping that our plugin will be of some use to it's other users.

Thanks, Chad

2

Re: New Text Metrics Plugin

They say that "premature optimization is the root of all evil"... but sometimes you just can't help yourself.

I've uploaded a new (v1.1) version of the text metrics plugin to Sourceforge that measurements reveal to have significantly reduced parse times in both Safari and Chrome while remaining relatively unaffected in Firefox.

The change? Instead of comparing characters, we're now comparing character codes, which changes the comparison from a string comparison to an integer comparison. Using a text sample of 86,435 characters (15,853 words) as a worst case (Is roughly 5x the number of words in an average chapter):

- Safari v5.0 (6533.16) parse time went from ~20ms to ~10 ms.
- Chrome (v 5.0.375.99) parse time is ~6ms (sorry, didn't measure the "before").
- Firefox (v3.6.6) went from 116ms to 127ms... However I have a feeling that this misrepresents Firefox's actual response time, as the "feel" of typing went from very slow w/ Firebug javascript console enabled to much better w/ Firebug disabled.

All browsers running on a MBP, 2.66 GHz, 4 GB RAM.

I have not measure IE, as I can only run it in a VM, which skews actual performance numbers significantly.

Last edited by cstansbury (2010-07-05 17:55:09)

3

Re: New Text Metrics Plugin

Cool stuff. I think it can be optimized even more if you would use for example http://ejohn.org/blog/pure-javascript-html-parser/

Been thinking of bringing a parser into the TinyMCE API as well since it would solve some nasty issues on IE.

Best regards,
Spocke - Main developer of TinyMCE

4

Re: New Text Metrics Plugin

Thanks for the link - I was unaware of that work, and will definitely take a look into it. While it may not be practical (yet) for some of the keydown/real-time feedback, I think that a more fullblown HTML parser, combined with some of the new HTML5 background worker capabilities will allow us to have a lot more pseudo-realtime visual feedback / triggers.

5

Re: New Text Metrics Plugin

I've uploaded version 1.2 of the Text Metrics plugin to SourceForge (https://sourceforge.net/tracker/index.p … tid=738747).

The new version adds the ability for you to:

- Turn the text metrics on or off via a toggle button in the toolbar,
- Control the initial state of said toggle button via the "s_textmetrics_on" parameter specified when initializing the tinyMCE editor instance,
- Control the positioning and visibility of the metrics in the status bar via CSS.

Included in the Sourceforge zip file is the CSS and Silk icon that we are currently using in production.

Finally, I've confirmed that the speed to parse the metrics on a 16K word chapter in Firefox is 20 ms instead of the previously stated 127 ms.  I was unsure of the performance penalty of measuring javascript performance with the Firebug console opened, and once I measured it with the console closed, I found the true performance measurement.

Thanks, and hopefully you'll find the plugin of some use.

Last edited by cstansbury (2010-07-09 22:26:09)

6

Re: New Text Metrics Plugin

Hmm... It looks like the SourceForge location that we were told to upload 3rd party plugins to has been made private... so *all* the 3rd party plugins have been impacted(?). Before I set up my own download site, I'll see if I can't get an answer from Spocke as to what could be happening w/ that.

7

Re: New Text Metrics Plugin

I renabled the plugins section on sourceforge. However we are moving away from source forge so I suggest moving the plugins to GitHub and add the source, download etc there. Then we can setup a third party page and link directly to those projects from our site. GitHub also adds the possibility to add an issue tracker there and the make it easy for users to fork and contribute patches.

Best regards,
Spocke - Main developer of TinyMCE

8

Re: New Text Metrics Plugin

Okay - you might want to make a note of that in the sticky post that you have at the top of the "Third party plugins" forum, as this is the first I've seen you communicate your intentions to do so.

9

Re: New Text Metrics Plugin

I've created a repository on GitHub which will now be used to store the Scriptito s_textmetrics plugin (and future others): https://github.com/scriptito/TinyMCE.

Chad

Note: Updated the link above to remove the period (.) that was unintentionally added to the end of the URL.

Last edited by cstansbury (2011-01-04 14:54:37)

10

Re: New Text Metrics Plugin

I'm a beginner, can you please explain me how to install this plugin, I tried to do it but it does'nt work. is it working with all the version of tinymice.

11

Re: New Text Metrics Plugin

I will add a README to the TinyMCE plugin source on github later this evening when I have time...

12

Re: New Text Metrics Plugin

thank you very much

13

Re: New Text Metrics Plugin

The instructions can be found here: http://blog.scriptito.com/tinymce-text- … lugin-v12. I've also updated the github project to include a sample stylesheet & graphic.

14

Re: New Text Metrics Plugin

sorry I follow your instruction but it still doesnt work on my site, here is the code I use, can you pleas tell me if there is an error on it.

<!-- TinyMCE -->
<script type="text/javascript" src="tinymce/jscripts/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript" src="tinymce/jscripts/tiny_mce/plugins/s_textmetrics/text-utils.js"></script>
<script type="text/javascript">
    tinyMCE.init({
        // General options
        mode : "textareas",
        theme : "advanced",
        plugins : "safari,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,s_textmetrics",
       
   

        // Theme options
        theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,fontsizeselect,|,link,unlink,|,toggle_metrics",
        theme_advanced_buttons2 : "",
        theme_advanced_buttons3 : "",
        theme_advanced_buttons4 : "",
        theme_advanced_toolbar_location : "top",
        theme_advanced_toolbar_align : "left",
        theme_advanced_statusbar_location : "bottom",
        theme_advanced_resizing : true,

        // Example content CSS (should be your site CSS)
        content_css : "css/content.css",

        // Drop lists for link/image/media/template dialogs
        template_external_list_url : "lists/template_list.js",
        external_link_list_url : "lists/link_list.js",
        external_image_list_url : "lists/image_list.js",
        media_external_list_url : "lists/media_list.js",

        // Replace values for the template plugin
        template_replace_values : {
            username : "Some User",
            staffid : "991234"
        }
       
   
    });
</script>
<!-- /TinyMCE -->

thanks for your help

15

Re: New Text Metrics Plugin

<!-- TinyMCE -->
<script type="text/javascript" src="tinymce/jscripts/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript" src="tinymce/jscripts/tiny_mce/plugins/s_textmetrics/text-utils.js"></script>
<script type="text/javascript">
    tinyMCE.init({
        // General options
        mode : "textareas",
        theme : "advanced",
        plugins : "safari,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,
insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen
,noneditable,visualchars,nonbreaking,xhtmlxtras,template,s_textmetrics",
       
   

        // Theme options
        theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,
|,fontsizeselect,|,link,unlink,|,toggle_metrics",
        theme_advanced_buttons2 : "",
        theme_advanced_buttons3 : "",
        theme_advanced_buttons4 : "",
        theme_advanced_toolbar_location : "top",
        theme_advanced_toolbar_align : "left",
        theme_advanced_statusbar_location : "bottom",
        theme_advanced_resizing : true,

        // Example content CSS (should be your site CSS)
        content_css : "css/content.css",

        // Drop lists for link/image/media/template dialogs
        template_external_list_url : "lists/template_list.js",
        external_link_list_url : "lists/link_list.js",
        external_image_list_url : "lists/image_list.js",
        media_external_list_url : "lists/media_list.js",

        // Replace values for the template plugin
        template_replace_values : {
            username : "Some User",
            staffid : "991234"
        }
       
   
    });
</script>
<!-- /TinyMCE -->

16

Re: New Text Metrics Plugin

Hmm... Try adding

s_textmetrics_on:true

to your tinyMCE.init call... I thought that I had made that optional, but after a quick look @ the code that may not be the case.

The only other thing that I can think of is that you're configured in a non-debug mode, and TinyMCE is looking for the s_textmetrics/editor_plugin.js and it's not finding it because I only provided the editor_plugin_src.js. You'll need to either copy the editor_plugin_src.js to editor_plugin.js or create a minified version of the code and use that.

If that fails, why don't you post a copy any error message(s) you see in the Javascript console.

Thanks, Chad

17

Re: New Text Metrics Plugin

you werev right  TinyMCE was  looking for the s_textmetrics/editor_plugin.js
thanks a lot for your help