📄 rte.js
字号:
// Internal (private) properties.
// RichEditor is the global RichEditor object (function) of which there is only
// 1 instance.
RichEditor.txtView = true; // WYSIWYG mode. false == View Source
// initEditor(): Initialise the editor (called on window load, see below)
function initEditor()
{
// Apply style data if supplied
if (!public_description.styleData) {
public_description.put_styleData(null);
}
// Apply default editor options
var strDefaults = 'dragdrop=no;source=yes';
strDefaults += ';history=' + (document.queryCommandSupported('Undo') ? 'yes' : 'no');
applyOptions(strDefaults);
// Prepare the editable region
loading.style.display = 'none';
doc.contentEditable = "true";
editor.style.visibility = 'visible';
// OZ - 12-06-2002
// Put focus into the document (required when no HTML is supplied via docHtml property)
doc.focus();
}
// checkRange(): make sure our pretend document (the content editable
// DIV with id of "doc") has focus and that a text range exists (which
// is what execCommand() operates on).
function checkRange()
{
RichEditor.selectedImage = null;
if (!RichEditor.txtView) return; // Disabled in View Source mode
doc.focus();
if (document.selection.type == "None") {
document.selection.createRange();
}
var r = document.selection.createRange();
DBG(1, 'RANGE Bounding('
+ 'top='+r.boundingHeight
+ ', left='+r.boundingHeight
+ ', width='+r.boundingWidth
+ ', height='+r.boundingHeight + ')'
+ ', Offset('
+ 'top='+r.offsetTop
+ ', left='+r.offsetLeft + ')'
+ ', Text=(' + r.text + ')'
+ ', HTML=(' + r.htmlText + ')'
);
}
// post(): Called in response to clicking the post button in the
// toolbar. It fires an event in the container named post, passing the
// HTML of our newly edited document as the data argument.
function post()
{
//DBG(1, 'Raise "post" event');
//window.external.raiseEvent("post", doc.innerHTML);
//alert(doc.innerHTML);
return doc.innerHTML;
}
// insert(): called in response to clicking the insert table, image,
// smily icons in the toolbar. Loads up an appropriate dialog to
// prompt for information, the dialog then returns the HTML code or
// NULL. We paste the HTML code into the document.
function insert(what)
{
if (!RichEditor.txtView) return; // Disabled in View Source mode
DBG(1, 'insert' + what + ')');
// Chose action based on what is being inserted.
switch(what)
{
case "table":
strPage = "dlg_ins_table.html";
strAttr = "status:no;dialogWidth:340px;dialogHeight:360px;help:no";
break;
case "smile":
strPage = "dlg_ins_smile.html";
strAttr = "status:no;dialogWidth:300px;dialogHeight:350px;help:no";
break;
case "char":
strPage = "dlg_ins_char.html";
strAttr = "status:no;dialogWidth:450px;dialogHeight:290px;help:no";
break;
case "image":
strPage = "dlg_ins_image.html";
strAttr = "status:no;dialogWidth:400px;dialogHeight:210px;help:no";' '
break;
case "about":
strPage = "dlg_about.html";
strAttr = "status:no;dialogWidth:250px;dialogHeight:130px;help:no";' '
break;
}
// run the dialog that implements this type of element
html = showModalDialog(strPage, window, strAttr);
// and insert any result into the document.
if (html) {
insertHtml(html);
}
}
// insertHtml(): Insert the supplied HTML into the current position
// within the document.
function insertHtml(html)
{
doc.focus();
var sel = document.selection.createRange();
// don't try to insert HTML into a control selection (ie. image or table)
if (document.selection.type == 'Control') {
return;
}
sel.pasteHTML(html);
}
// doStyle(): called to handle the simple style commands such a bold,
// italic etc. These require no special handling, just a call to
// execCommand(). We also call reset so that the toolbar represents
// the state of the current text.
//
// 2002-07-30 Updated based on patch submitted by Michael Keck (mkkeck)
//
function doStyle(s){
if(!RichEditor.txtView) return;
/* Disabled in View Source mode */
DBG(1, 'doStyle(' + s + ')');
checkRange();
if(s!='InsertHorizontalRule'){
/* what command string? */
document.execCommand(s);
} else if( s=='InsertHorizontalRule') {
/* if s=='InsertHorizontalRule then use this command */
document.execCommand(s,false, null);
/* Note:
In your source view the <HR> has an ID like this
<HR id=null>
*/
}
reset();
}
// link(): called to insert a hyperlink. It will use the selected text
// if there is some, or the URL entered if not. If clicked when over a
// link, that link is allowed to be edited.
function link(on)
{
if (!RichEditor.txtView) return; // Disabled in View Source mode
var strURL = "http://";
var strText;
// First, pick up the current selection.
doc.focus();
var r = document.selection.createRange();
var el = r.parentElement();
// Is this aready a link?
if (el && el.nodeName == "A") {
r.moveToElementText(el);
if (!on) { // If removing the link, then replace all with
r.pasteHTML(el.innerHTML);
return;
}
strURL = el.href;
}
// Get the text associated with this link
strText = r.text;
// Prompt for the URL
strURL = window.prompt("输入地址:", strURL);
if (strURL) {
// Default the TEXT to the url if non selected
if (!strText || !strText.length) {
strText = strURL;
}
// Replace with new URL
r.pasteHTML('<A href=' + strURL + ' target=_new>' + strText + '</a>');
}
reset();
}
// sel(); similar to doStyle() but called from the dropdown list boxes
// for font and style commands.
function sel(el)
{
if (!RichEditor.txtView) return; // Disabled in View Source mode
checkRange();
switch(el.id)
{
case "ctlFont":
document.execCommand('FontName', false, el[el.selectedIndex].value);
break;
case "ctlSize":
document.execCommand('FontSize', false, el[el.selectedIndex].value);
break;
case "ctlStyle":
document.execCommand('FormatBlock', false, el[el.selectedIndex].text);
break;
}
doc.focus();
reset();
}
// pickColor(): called when the text or fill color icons are clicked. Displays
// the color chooser control. The color setting is completed by the event
// handler of this control (see richedit.html)
function pickColor(fg)
{
if (!RichEditor.txtView) return; // Disabled in View Source mode
checkRange();
var el = window.event.srcElement;
if (el && el.nodeName == "IMG") {
setState(el, true);
}
color.style.top = window.event.clientY + 10;
color.style.left = window.event.clientX - 100;
color.style.display = 'block';
color._fg = fg;
}
// setColor(): called from the fore/back color selection dialog event handler
// to set/reset the fore/background color.
function setColor(name, data)
{
color.style.display = 'none';
checkRange();
if (!data) {
removeFormat(document.selection.createRange(), color._fg);
} else {
document.execCommand(color._fg, false, data);
}
setState(btnText, false);
setState(btnFill, false);
doc.focus();
}
// removeFormat(): Called to remove specific formats from the selected text.
// The 'removeFormat' command removes all formatting. The principle behind
// this routine is to have a list of the possible formats the selection may
// have, check the selection for the current formats, ignoreing the one we
// want to use, then remove all formatting and then re-apply all but the
// one we wanted to remove.
function removeFormat(r, name)
{
var cmd = [ "Bold", "Italic", "Underline", "Strikethrough", "FontName", "FontSize", "ForeColor", "BackColor" ];
var on = new Array(cmd.length);
for (var i = 0; i < cmd.length; i++) {
on[i] = name == cmd[i] ? null : r.queryCommandValue(cmd[i]);
}
r.execCommand('RemoveFormat');
for (var i = 0; i < cmd.length; i++) {
if (on[i]) r.execCommand(cmd[i], false, on[i]);
}
}
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -