  | ||
|
 We write the elementary WYSIWYG (the visual editor) on Javascript Problem : to write the elementary visual editor and it is a little to understand as he works. What is WYSIWYG? WYSIWYG - abbreviation What You See Is What You Get. In translation: " that I see, I receive ". In visivige it is possible to look through and edit HTML-contents not editing a HTML-code. The closest analogy VISIVIGu is a word-processor from Microsoft Word with which many are familiar. In him to put fat content or italics, it is not necessary to write tegi or other elements of formatting, simply enough to press sootstvujuhhuju the action button. How it works? For a spelling simple VISIVIGa it is not necessary to invent a bicycle, all means are built already - in and successfully work. The mechanism of job of the majority of visual editors is based on property designMode object document. This built - in property (unfortunately, it is far from being for all browsers, but for the majority modern) just and allows to edit a HTML-content. After it aktivancii (designMode ='On ') on web-page it is possible to put habitual to us the cursor and to fill, delete or change formatting a content. It happens to not edit conveniently all page, and to have any fixed area for what it is used iframe. his object document it is used for activation of property designMode. Formatting of contents in limits VISIVIGa is carried out with the help of a uneasy method execCommand which realization strongly differs from a browser to a browser. We look a JavaScript-code for the elementary VISIVIGa: Code JavaScript // *********************** // The STEP 1: we Deduce iframe and we get access to it // *********************** // We deduce in a HTML-stream iframe document.write (" <iframe scrolling ='no ' frameborder ='no ' src = '*' id ='frameId ' name ='frameId '> </iframe> <br/> "); // We shall define Gecko-browsers since they differ in the job from the Opera and IE var isGecko = navigator.userAgent.toLowerCase () .indexOf ("gecko")! =-1; // We get access to objects window and document for ifrejma var iframe = (isGecko)? document.getElementById ("frameId"): frames ["frameId"]; var iWin = (isGecko)? iframe.contentWindow: iframe.window; var iDoc = (isGecko)? iframe.contentDocument: iframe.document; // *********************** // The STEP 2: we Shall add on empty page ifrejma an any HTML-code // *********************** // We form a HTML-code iHTML = " <html> <head> \n "; iHTML + = " <style> \n "; iHTML + = " body, div, p, td {font-size:12px; font-family:tahoma; margin:0px; padding:0px;} "; iHTML + = " body {margin:5px;} "; iHTML + = " </style> \n "; iHTML + = " <body> <u> Contents </u> with <b> HTML </b> - <i> a marking </i> </body> "; iHTML + = "</html>"; // We add it with the help of methods of object document iDoc.open (); iDoc.write (iHTML); iDoc.close (); // *********************** // The STEP 3: Initialization of property designMode object document // *********************** if (! iDoc.designMode) alert (" the Visual mode of editing is not supported by your browser "); else iDoc.designMode = (isGecko)? "on": "On"; // *********************** // The STEP 4: the Elementary elements of editing: fat content, italics, underlining{emphasis} // *********************** // We shall deduce a HTML-code of these elements DOCUMENT.WRITE (" <input type ='button ' value ='? ' onclick ='setBold () ' class ='bold '/> "); DOCUMENT.WRITE (" <input type ='button ' value ='? ' onclick ='setItal () ' class ='ital '/> "); DOCUMENT.WRITE (" <input type ='button ' value ='? ' onclick ='setUnder () ' class ='under '/> "); // We shall write down a code of function, for exhibiting formatting // The method execCommand object document is used function setBold () { iWin.focus (); iWin.document.execCommand ("bold", null, " "); } function setItal () { iWin.focus (); iWin.document.execCommand ("italic", null, " "); } function setUnder () { iWin.focus (); iWin.document.execCommand ("underline", null, " "); } Example of job of the elementary VISIVIGa <http: // www.internet-technologies.ru/? url=http%3A%2F%2Ffastcoder.org%2Fdemo%2FsimpleWysiwyg.html> Zamechenie: The given version of the visual editor cannot work in the Opera below version 9.01 and will show the prevention{warning} " the Visual mode of editing is not supported by your browser ". Serviceability is checked up in: - IE 6; - FF 1.5; - Opera 9.01 +; - Mozilla 1.7.2; - NN 7.1 +; Osvezhitel` for a site One of the basic ways to involve visitors on a site - to update the information contained on him more often. To be engaged in it completely not simply and selects such employment{occupation} too much time though, certainly, and it is renumerated. In this clause{article} we shall try to program this process and to make change of the information with a site dynamic. It would be quite good to have the latest news with 3DNews, synchronously with a site mycomp.com.ua to show at yourself the maintenance{contents} fresh MK, and in general to have at yourself on a site all svezhatinu which you only want. We shall realize all this on already familiar to you PHP. We receive the maintenance{contents} fresh MK The principle of job of our script will be the following: first all HTML-code on page then the necessary site is defined is downloaded completely, and the script deduces it on our page. For uploading full contents of page function file_get_contents () is used. She accepts as argument the address of page for uploading and returns a full code of the specified page. That is, if we shall write such code: $www = file_get_contents (' http: // mycomp.com.ua '); echo $www; That we shall receive a full copy of a site mycomp.com.ua, only it is necessary to take into account, that if, for example, there is a tag for a conclusion of figure with the incomplete address, a kind <img src = "1.jpg"> he, naturally, will not be displayed as search of figure will conduct under the catalogue where the script which downloads page is placed. For full display of figure it is necessary to use the link of such kind: <img src = " http: // mycomp.com.ua/1.jpg ">. For this purpose it is possible to use function of replacement of the text, approximately so: $www = str_replace (' <img src = " ', ' <img src = " http: // mycomp.com.ua / ', $ www); The same occurs if to alter links, having replaced the relative address on full: $www = str_replace (' <a href = " ', ' <a href = " http: // mycomp.com.ua / ', $ www); So, our purpose - to catch the maintenance{contents} of hot MK and without any efforts to make updating on the site synchronously with MK:-). For this purpose we come on site MK and we find the maintenance{contents} of number{room}. It is necessary to remember the address on what it is as we should pass his functions for uploading page. The address has such kind: http://mycomp.com.ua/issuetoc/. But on page besides the maintenance{contents} there is still more many any information which is not so necessary for us. Means, it is necessary to eliminate somehow superfluous, having allocated only that is necessary for us. For this purpose the initial code of page is opened. To us has carried - we deal with accurately made out code divided{shared} by comments, all is simple and understandable. It much more simplifies a problem , moreover, actually reduces her to zero:-). We find the comment <! - ARTICLES-> is the beginning, from this place we start to take the helpful information, with a cover of new number{room} and the list of clauses{articles}. Too for a long time it was not necessary to search for the end of it of all, as the comment is quite eloquent: <! - END ARTICLES->. Everything means, now, that we need to make is to deduce the information which is between these two comments. A code of the script: <? php $www2 = file_get_contents (' http: // mycomp.com.ua/issuetoc / '); // uploading of page $begin = strpos ($www2, ' <! - ARTICLES-> '); // we find the beginning $endl = strpos ($www2, ' <! - END ARTICLES-> '); // we find the end // A conclusion in a cycle of the helpful information for ($i = $ begin; $i <$endl; $i ++) echo $www2 [$i]; ?> All works perfectly, only there is a small problem: function file_get_contents (), the basic in this script, works only in PHP versions 4.3 and is higher. Obviously there will be difficulties at loading on any staren`kij the server on which for that simple reason, that all works normally, for a long time any more did not update ON. But irreplaceable functions no, and we shall write own code for uploading page from other sites which will work on any versions PHP. So, we shall copy an existing code thus: <? php $www2 = @file (" ' http: // mycomp.com.ua/issuetoc / "); $www = "; for ($j=0; $j <count ($www2); $j ++) $www. = $www2 [$j]; $begin = strpos ($www, ' <! - ARTICLES-> '); $endl = strpos ($www, ' <! - END ARTICLES-> '); for ($i = $ begin; $i <$endl; $i ++) echo $www [$i]; ?> Almost has changed nothing, only now uploading of page is made with the help of function file () which creates a file which elements are lines of page. Further all file develops in one line, na2d which we spend actions already familiar to us. |
 |
 | ||