Highlighting text in “TextArea”
This article will show how in modern browsers you can highlight text in the edit box (WYSIWYG).
An example can be seen in google.docs or on some advanced forums.
I am sure it will be interesting to many.
It is contentEditable or designMode that does all the basic “dirty” work for us.
')
If this attribute is put into a tag, then everything inside the tag becomes automatically editable.
This attribute is not currently supported by some older browsers (for example, FireFox 2.0). But there is a more “global” page parameter, which all browsers now support, which can help us - designMode.
By this, I will understand it.
This is actually a document property that allows you to edit HTML content. The difference from contentEditable is globality. That is, it is tied to the entire document, and not to a specific tag.
Therefore, we need to create a local document in our page, which will be fully editable. For this we will use the iframe.
To turn an iframe into an editing area we need:
1) Get a pointer to the iframe document (contentDocument).
2) Check out the html document for it.
3) Set the design mode to editMode.
For this, I wrote a small visual library.
Actually, we need to initialize the iframe itself in the onload section.
That's all. The only note is that this script will not work locally in IE - only from the server.
Add keys with which we can do B , I , U.
Specifically, I will not analyze the execCommand commands - anyone interested in reading on MSDN . With them you can add different colors to the document, pictures and a lot of things.
And yet - add the styles of our text field. To do this, you need to refine our Javascript:
UPD: By the way, I just found another habr article on this topic. Who cares, read.
An example can be seen in google.docs or on some advanced forums.
I am sure it will be interesting to many.
ContentEditable attribute and designMode parameter
It is contentEditable or designMode that does all the basic “dirty” work for us.
')
If this attribute is put into a tag, then everything inside the tag becomes automatically editable.
<html><head></head><body> <div contentEditable="true"><b>C</b>ontent<u>!!!</u></div> </body></html> This attribute is not currently supported by some older browsers (for example, FireFox 2.0). But there is a more “global” page parameter, which all browsers now support, which can help us - designMode.
By this, I will understand it.
DesignMode features
This is actually a document property that allows you to edit HTML content. The difference from contentEditable is globality. That is, it is tied to the entire document, and not to a specific tag.
Therefore, we need to create a local document in our page, which will be fully editable. For this we will use the iframe.
<html> <head> <script language = "javascript"> <! - / * Turning the iframe into the editing area, see below (the following JS code) * / // -> </ script> </ head> <body> <iframe id = "frm"> </ iframe> </ body> </ html>
To turn an iframe into an editing area we need:
1) Get a pointer to the iframe document (contentDocument).
2) Check out the html document for it.
3) Set the design mode to editMode.
For this, I wrote a small visual library.
var NewTextArea = {
frame: {},
document: {},
window: {},
init: function (frame) {
NewTextArea.frame = frames [frame]? Frames [frame]: document .getElementById (frame); // IE, Opera - frames.document, others - ById.document
if (! NewTextArea.frame) {
alert ( "Error ID" );
return -1;
}
// 1) get pointer
NewTextArea. document = NewTextArea.frame.contentDocument || NewTextArea.frame. document ;
if (! NewTextArea. document ) {
alert ( "Error iframe" );
return -2;
}
NewTextArea.window = NewTextArea.frame.contentWindow || NewTextArea.frame.window;
if (! NewTextArea.window) {
alert ( "window" );
return -2;
}
// 2) Design an iframe HTML document
var HTML = "<html> <head> </ head> <body>"; HTML + = "<u> Document </ u> <b> HTML </ b>"; HTML + = "</ body> </ html>"
NewTextArea. document .open ();
NewTextArea. document .write (HTML);
NewTextArea. document .close ();
// 3) Set the designMode
if (NewTextArea. document .designMode) {
NewTextArea. document .designMode = 'on' ;
} else {
alert ( "Error designMode" );
return -3;
}
}
}
* This source code was highlighted with Source Code Highlighter .
Actually, we need to initialize the iframe itself in the onload section.
... <body onload = "NewTextArea.init ('frm')">
<iframe id = "frm"> </ iframe>
</ body> That's all. The only note is that this script will not work locally in IE - only from the server.
Various tasty improvements
Add keys with which we can do B , I , U.
... <body onload = "NewTextArea.init ('frm')">
<iframe id = "frm"> </ iframe>
<input type = "button" value = "B"
onclick = "NewTextArea.window.focus (); NewTextArea.document.execCommand ('bold', null, '')" />
<input type = "button" value = "I"
onclick = "NewTextArea.window.focus (); NewTextArea.document.execCommand ('italic', null, '')" />
<input type = "button" value = "U"
onclick = "NewTextArea.window.focus (); NewTextArea.document.execCommand ('underline', null, '')" />
</ body> Specifically, I will not analyze the execCommand commands - anyone interested in reading on MSDN . With them you can add different colors to the document, pictures and a lot of things.
And yet - add the styles of our text field. To do this, you need to refine our Javascript:
...
var HTML = "<html> <head> <style>";
HTML + = "html, body {margin: 0px; padding: 0px; background: black; color: white; font-size: 20px}";
HTML + = "p, div, span {margin: 0px; padding: 0px}";
HTML + = "</ style> </ head> <body>";
HTML + = "<u> Document </ u> <b> HTML </ b>";
HTML + = "</ body> </ html>";
... You can also do the loading of the text field style from the .css file by inserting the appropriate <link ...> tag instead of the <style>.
UPD: By the way, I just found another habr article on this topic. Who cares, read.
Source: https://habr.com/ru/post/43317/
All Articles