Preview while editing in word-press

by

There is a good editor in word-press. What your see in the editor is what you get in the final post. However, the formula in Latex is quite different between what you see in the editor and what you get. A page is developed to preview the formula while editing.

jQuery in the word-press page

jQuery is a popular powerful library for the front development. It seems other libraries are also used so that the default symbol jQuery $ can’t be used. We have to use jQuery, the document ready function looks like as

    jQuery(document).ready(function(){
        open();
    });

Difference between the jQuery and Javascript API

The jQuery doesn’t work sometimes in the word-press page. The original Javascript APIs are had to be used. Here is the difference between the jQuery and Javascript API.

var node=jQuery(".components-button.block-editor-post-preview__button-toggle.components-dropdown-menu__toggle.is-tertiary") //jQuery

var node=document.getElementsByClassName("components-button editor-post-publish-button editor-post-publish-button__button is-primary")[0]; //Javascript

The Javascript function document.getElementsByClassName() always returns an array. The node is obtaind by the subscript. The onclick is a property rather than a method. The method to trigger a click() action is node.click(). Here is an example.

$("").click(function(){setTimeout(action,2000);}); 
$("").click();

//Javascript

node.onclick=function(){setTimeout(action,2000);};
node.click();

Page with frames

Framed page is good at comparing. One frame is the code and the other frame is the rendered result. Here is the code


<frameset cols="50%,50%">

<frame src="<?=$_REQUEST['left']?>">
<frame src="<?=$_REQUEST['right']?>" name="particle">

</frameset>

The URL must be encoded by encodeURIComponent when it is send as a querystring.

Leave a Comment