EasyRead Editor

After discovering after_the_deadline it is really powerful and you were able to add your own rules into it i thought this would be a great platform for EasyRead editor. but after trying to : -push the plugin to comment in the front. very hard to do because the plugin has a lot of custom effects which is not easily transfarable to the #comment textarea. because it has also the feature where it disable the html tags when you click on text as well as features when you click on preview where they are hard coded “events” and effects. – so i decided to just use the #content editor or the usual editor. so next step was to try to add our own rules. After looking from the plugin from jetpack and its original non-jetpack-independent plugin did I realise that the text are send to an external server to process and sent back to the editor that is a reason why there was a proxy.php file to allow this to happen. -so to create our own rule we need to setup our own server and rebuilt the models based on our new model. this is where i decided this was too much trouble at this stage.


Custom plugin So now we will write our own custom plugin to just underline hardwords. First step we need to create a database for our plugin to compare the hardwords. so apparently the standard database $wpdb(global) does not support creating custom database so we had to use our own custom class to do it. http://codex.wordpress.org/Creating_Tables_with_Plugins while creating database wanted to know how many words there is in the english language if we wanted to do an exhaustive table. 1 million plus. http://www.languagemonitor.com/new-words/number-of-words-in-the-english-language-1008879/ http://codex.wordpress.org/Class_Reference/wpdb NEXT we need to be able to retrieve the list of words and compare them with content. First we try to compare the list from the hardwords database and content words anything similar we list them. http://www.tuxradar.com/practicalphp/4/7/5 After able to list out hardwords that exist in the text and that of the database next we need to be able to underline them.

After the deadline uses border -bottom which i have modified to this : #hardwords { border-bottom: 2px solid red cursor: default; }

Using the existing plugin was not enough, because it only took content after it is saved and made calculations based on that data.

We need to be able to add <span class=”hardword”> </span> for hardwords before it is saved.

So we will use a button to invoke a javascript since we want to manipulate text before a page reloads. http://stackoverflow.com/questions/16211586/how-to-call-javascript-function-from-a-php-printed-button

to test javascript we used this function:

function underline_hardwords(){ var content = tinyMCE.get(‘content’).getContent(); alert(content); }

was trying to create a loop to loop throught all the hardwords and found out that javascript doesnt have a foreach loop, newer browsers might support it but to avoid it we will use the standard loop

needed to be able to remove the span after it was implemented on the first click for subsequent clicks.
this actually remove elements by id and tag then by class.

the by id method is used because it is supported by IE and doesnt support the newer getElementsByClass

because the above removes the entire element where we only want to remove the span tags so i am using this one instead


Could not seem to update the css for tinymce. Css changes were not persistent so adding css to the main css for tinymce wasn’t immediately reflected and i don’t know how long the cache will last .

Went to edit the After the deadline tinymce css instead because it was using a force css refresh script. and it worked.


Submit a Comment