What is WYSIWYG?
WYSIWYG is an acronym for What You See Is What You Get. Translation: “What I see is what I get.” In visiwig you can view and edit HTML content without editing the HTML code. The closest analogy to VISIVIG is the word processor from Microsoft Word, with which many are familiar. In it, to add boldness or italics, you do not need to write tags or other formatting elements; you just need to press the corresponding function button.
How it works?
To write a simple VISIVIG, you don’t need to reinvent the wheel; all the tools are already built in and work successfully. The way most visual editors work is based on the designMode property of the document object. This built-in property (unfortunately, not for all browsers, but for most modern ones) allows you to edit HTML content. After activating it (designMode='On'), you can place the usual cursor on the web page and type, delete or change the formatting of the content.
It can be convenient not to edit the entire page, but to have some fixed area, for which an iframe is used. It is its document object that is used to activate the designMode property.
Content formatting within VISIVIG is carried out using the complex execCommand method, the implementation of which varies greatly from browser to browser.
Let's look at the JavaScript code for the simplest VISIVIG:
JavaScript code
WYSIWYG is an acronym for What You See Is What You Get. Translation: “What I see is what I get.” In visiwig you can view and edit HTML content without editing the HTML code. The closest analogy to VISIVIG is the word processor from Microsoft Word, with which many are familiar. In it, to add boldness or italics, you do not need to write tags or other formatting elements; you just need to press the corresponding function button.
How it works?
To write a simple VISIVIG, you don’t need to reinvent the wheel; all the tools are already built in and work successfully. The way most visual editors work is based on the designMode property of the document object. This built-in property (unfortunately, not for all browsers, but for most modern ones) allows you to edit HTML content. After activating it (designMode='On'), you can place the usual cursor on the web page and type, delete or change the formatting of the content.
It can be convenient not to edit the entire page, but to have some fixed area, for which an iframe is used. It is its document object that is used to activate the designMode property.
Content formatting within VISIVIG is carried out using the complex execCommand method, the implementation of which varies greatly from browser to browser.
Let's look at the JavaScript code for the simplest VISIVIG:
JavaScript code
Code:
// *********************** // STEP 1: Display the iframe and get access to it // ************** ************
// Output iframe document to the HTML stream . write ( "<iframe scrolling='no' frameborder='no' src='#' id='frameId' name='frameId'></iframe><br/>" ); // Let's define Gecko browsers, because they differ in their work from Opera and IE var isGecko = navigator . userAgent . toLowerCase (). indexOf ( "gecko" ) != - 1 ; // Access the window & document objects for the iframe var iframe = ( isGecko ) ? document . getElementById ( "frameId" ) : frames [ "frameId" ]; var iWin = ( isGecko ) ? iframe . contentWindow : iframe . window ; var iDoc = ( isGecko ) ? iframe . contentDocument : iframe . document ;
// *********************** // STEP 2: Add arbitrary HTML code to the empty iframe page // ************ **************
// Generate 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>Content</u> with <b>HTML</b>-<i>markup</i></body>" ;
iHTML += "</html>" ; // Add it using the methods of the document
iDoc object . open ();
iDoc . write ( iHTML );
iDoc . close ();
// *********************** // STEP 3: Initializing the designMode property of the document object // ************* **********
if (! iDoc . designMode ) alert ( "Visual editing mode is not supported by your browser" ); else iDoc . designMode = ( isGecko ) ? "on" : "On" ;
// *********************** // STEP 4: The simplest editing elements: bold, italic, underline // ********* **************
// Print out the HTML code of these
document elements . write ( "<input type='button' value='F' onclick='setBold()' class='bold' />" );
document . write ( "<input type='button' value='К' onclick='setItal()' class='ital' />" );
document . write ( "<input type='button' value='H' onclick='setUnder()' class='under' />" ); // Write the function code to set formatting // Use the execCommand method of the document object 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 , "" ); }