Geekly Articles each Day
⬆️ ⬇️

wysiwyg do it yourself

There is a bunch of paid \ free visual editors for every taste and color. But what if they do not work in all browsers, you are not satisfied with the design or functionality, or just the soul lies in writing your own? The answer to the question how to do it - under the cut.



For visual editing, use the iframe element's designMode mode. Editors are usually embedded on top of the textarea tag. For example, the editor TinyMCE can replace them all on the page. To do this:



- Find the desired item by its id

- Create a container for the editor, put the textbook there.

') 

 // Suppose that we know the id of the necessary textarea tag
 var Textarea = document.getElementById (textarea_id); 
 var Container = document.createElement ("DIV");

 // Add the container to the parent of the Textile, then move it inside the container and hide it
 Textarea.parentNode.insertBefore (Container, Textarea); 
 Container.appendChild (Textarea);
 Textarea.style.display = 'none';


Now we need to add an iframe and enable editing mode in it. The tag itself, we add the html-code, otherwise it will not work to remove the standard design, such as frameborder. With the release of opera 9.5 and firefox 3, many editors, in particular the editor in Blogger, on LJ and others, have ceased to function due to the introduction of XSS protection. To work correctly, it is necessary that the domain of the frame coincides with the domain of the page of our editor.



There is one more thing that lies in wait for us - this is a different document object model in IE. So:



- Create a frame

- Add the page source code to it and substitute the value from the textbook

- Turn on edit mode 



 // Create a frame and add it to the editor container
 var iframe = "<iframe style = 'width: 100%; height: 100%;'  src = \ "javascript: document.open ();  document.domain = '"+
  document.domain + "'; document.close (); \" frameborder =' 0 '> </ iframe> ";

 Container.innerHTML = iframe + Container.innerHTML;
 var Frame = Container.childNodes [0];

 // The sly definition of IE;)
 var isIE = / * @ cc_on! @ * / false;

 // Select the frame document into a separate variable
 var FrameDoc = isIE?  Frame.contentWindow.document: Frame.contentDocument;

 FrameDoc.open ();

 // If the content of the body tag is empty, in FF the cursor will become somehow too small. 
 // To avoid this, add & nbsp;  (without space)
 FrameDoc.write ('<html> <head> </ head> <body>' + Textarea.value + '& nbsp; </ body> </ html>');
 FrameDoc.close ();
 FrameDoc.designMode = "on";




Now our editor is ready to enter and format text. Standard formatting - B I U S is applied using the document execCommand () function, for example 



  FrameDoc.execCommand ("Strikethrough", false, '');


will format the text as strikethrough.



To insert images and other objects, we will need to define the selected area, and then insert the html code there 



 // If IE does not set the focus on the window of the edited frame, 
 // then in the future it can insert the code at the top of your page, and not into the frame;)
 Frame.contentWindow.focus ();
 var SelectionRange = isIE?  FrameDoc.selection.createRange (): Frame.contentWindow.getSelection (). GetRangeAt (0);

 // insert image
 var html = "<img src = 'mypicture.gif' />";

 if (isIE) {
     // everything is simple
     SelectionRange.pasteHTML (html);
 } else {
     // for the rest we use an auxiliary tag
     SelectionRange.deleteContents ();
     var el = document.createElement ("SPAN");
     FrameDoc.getElementsByTagName ("BODY") [0] .appendChild (el);

     // Firefox will not understand if you immediately replace outerHTML.  In versions below the 3rd such property is absent.
     el.innerHTML = html;
     SelectionRange.insertNode (el);
     el.outerHTML = html;
 }




So, above I outlined the basic techniques for creating a wysiwyg editor. I will be glad to answer all the questions.

Source: https://habr.com/ru/post/38077/

More articles:



All Articles