网站首页 > 基础教程正文

第51节可编辑的内容-Javascript-零点程序员-王唯

ccvgpt 2024-10-17 08:54:45 基础教程 10 ℃

本内容是《Web前端开发之Javascript视频》的课件，请配合大师哥《Javascript》视频课程学习。

在HTML中，任何元素都可以被编辑；启用编辑功能：HTML标签设置contenteditable属性，或者在Javascript中设置该元素的contentEditable属性；

<div id="editor" contenteditable>单击编辑</div>
<div id="mydiv">也可编辑</div>
<script>
var mydiv = document.getElementById("mydiv");
mydiv.contentEditable = true;
</script>

元素被设置成可编辑后，除了常规的插入删除等操作外，还可以使用document.execCommand()方法对当前选择的内容进行编辑，比如，设置文本的样式，如加粗、倾斜等；

另外，有些浏览器允许键盘快捷键（如Ctrl+B加粗）来加粗当前选中的文本，Firefox使用Ctrl+B和Ctrl+I；

contenteditable也存在着兼容问题，如，当回车换行时，不同的浏览器有不同有处理，标准浏览器一般会使用div，而IE会使用p来分段，有些会使用br；所以，可以使用一个替代的方案document.execCommand()方法；如：

mydiv.addEventListener("keydown", function(e){
    if(e.keyCode == 13)
        document.execCommand("defaultParagraphSeparator", false, "p");
});

HTMLElement.isContentEditable属性：

只读属性返回一个布尔值：如果当前元素的内容为可编辑状态，则返回true，否则返回false；

var mydiv = document.getElementById("mydiv");
mydiv.contentEditable = true;
console.log(mydiv.isContentEditable);

浏览器有可能为表单控件和具有contenteditable元素支持自动拼写检查；在支持该功能的浏览器中，检查可能默认开启或关闭；为元素添加spellcheck属性来显式开启拼写检查，或设置为false来显式关闭该功能；

designMode属性：

将Document对象的designMode属性设置为”on”使得整个文档可编辑，设置为”off”将恢复为只读文档；designMode属性并没有对应的HTML属性；

window.onload = function(){
    document.designMode = "on";
}

如，使<iframe>内部的文档可编辑；

<iframe id="editor" src="about:blank"></iframe>
<script>
window.onload = function(){
    var editor = document.getElementById("editor");
    editor.contentDocument.designMode = "on";
}
</script>

document.execCommand()方法：

浏览器定义了多个文本编辑命令，但大部分没有键盘快捷键；为了执行这些命令，可以使用Document对象的execCommand()方法；当HTML文档切换到designMode模式或存在可编辑元素或当前选择或给出范围，就可以使用此方法运行命令来操纵内容区域的元素；

语法：bool = document.execCommand(aCommandName, aShowDefaultUI, aValueArgument)；

其返回一个Boolean值，如果是false，则表示操作不被支持或未被启用；该方法需要三个参数：aCommandName命令名称，如”bold”、”subscript”、”justifycenter”和”insertimage”等之类的字符串；aShowDefaultUI是个布尔值，表示浏览器要不要提示用户输入所需要值，一般为false；aValueArgument为用户输入的值，默认为null；

<div id="mydiv">Web前端开发</div>
<button id="btnBold">加粗</button>
<button id="btnLink">插入链接</button>
<script>
var mydiv = document.getElementById("mydiv");
mydiv.contentEditable = true;
var btnBold = document.getElementById("btnBold");
btnBold.addEventListener("click",bold, false);
function bold(){
    document.execCommand("bold");
}
var btnLink = document.getElementById("btnLink");
btnLink.addEventListener("click", link, false);
function link(){
    var url = prompt("输入链接URL：");
    if(url)
        document.execCommand("createlink", true,url);
}
</script>

命令列表：

2D-Position：允许通过拖曳移动绝对定位的对象；
AbsolutePosition：设定元素的 position 属性为“absolute”(绝对)；
backColor：修改文档的背景颜色，需要一个<color>类型的字符串值作为参数传入，注：IE浏览器用这个设置文字的背景颜色；
BlockDirLTR：目前尚未支持；
BlockDirRTL：目前尚未支持；
bold：开启或关闭选中文字或插入点的粗体字效果，IE使用 <strong>标签，而不是<b>标签；
BrowseMode：目前尚未支持；
ClearAuthenticationCache：清除缓存中的所有身份验证凭据；
contentReadOnly：通过传入一个布尔参数设置文档内容的可编辑性；(IE浏览器不支持)
copy：拷贝当前选中内容到剪贴板；
CreateBookmark：创建一个书签锚或获取当前选中区或插入点的书签锚的名称；
createLink：将选中内容创建为一个锚链接，该命令需要一个hrefURI字符串作为参数值传入；
cut：剪贴当前选中的文字并复制到剪贴板；
decreaseFontSize：给选中文字加上<small>标签，或在选中点插入该标签；(IE浏览器不支持)
defaultParagraphSeparator：更改在可编辑文本区域中创建新段落时使用的段落分隔符
delete：删除选中部分；
DirLTR：目前尚未支持；
DirRTL：目前尚未支持；
EditMode：目前尚未支持；
enableAbsolutePositionEditor：启用或禁用允许移动绝对定位元素的抓取器；
enableInlineTableEditing：启用或禁用表格行和列插入和删除控件；(IE浏览器不支持)
enableObjectResizing：启用或禁用图像和其他对象的大小可调整大小手柄；(IE浏览器不支持)
fontName：在插入点或者选中文字部分修改字体名称，需要提供一个字体名称字符串 (例如："Arial")作为参数；
fontSize：在插入点或者选中文字部分修改字体大小，需要提供一个HTML字体尺寸 (1-7) 作为参数；
foreColor：在插入点或者选中文字部分修改字体颜色，需要提供一个颜色值字符串作为参数；
formatBlock：添加一个HTML块式标签在包含当前选择的行, 如果已经存在了，更换包含该行的块元素 (在 Firefox中, BLOCKQUOTE 是一个例外 -它将包含任何包含块元素)；需要提供一个标签名称字符串作为参数；几乎所有的块样式标签都可以使用(例如. "H1", "P", "DL", "BLOCKQUOTE")；(IE浏览器仅仅支持标题标签 H1 - H6, ADDRESS, 和 PRE,使用时还必须包含标签分隔符 < >, 例如 "<H1>")；
forwardDelete：删除光标所在位置的字符，和按下删除键一样；
heading：添加一个标题标签在光标处或者所选文字上，需要提供标签名称字符串作为参数 (例如. "H1", "H6"). (IE 和 Safari不支持)；
hiliteColor：更改选择或插入点的背景颜色，需要一个颜色值字符串作为值参数传递；UseCSS 必须开启此功能。(IE浏览器不支持)；
increaseFontSize：在选择或插入点周围添加一个BIG标签；(IE浏览器不支持)
indent：缩进选择或插入点所在的行，在 Firefox 中, 如果选择多行，但是这些行存在不同级别的缩进, 只有缩进最少的行被缩进；
InlineDirLTR：目前尚未支持；
InlineDirRTL：目前尚未支持；
insertBrOnReturn：控制当按下Enter键时，是插入br标签还是把当前块元素变成两个；(IE浏览器不支持)；
InsertButton：用按钮控件覆盖当前选中区；
InsertFieldset：用方框覆盖当前选中区；
insertHorizontalRule：在插入点插入一个水平线（删除选中的部分）；
insertHTML：在插入点插入一个HTML字符串（删除选中的部分），需要一个个HTML字符串作为参数；(IE浏览器不支持)；
InsertIFrame：用内嵌框架覆盖当前选中区；
insertImage：在插入点插入一张图片（删除选中的部分），需要一个 URL 字符串作为参数，这个 URL 图片地址至少包含一个字符，空白字符也可以（IE会创建一个链接其值为null）；
InsertInputButton：用按钮控件覆盖当前选中区；
InsertInputCheckbox：用复选框控件覆盖当前选中区；
InsertInputFileUpload：用文件上载控件覆盖当前选中区；
InsertInputHidden：插入隐藏控件覆盖当前选中区；
InsertInputImage：用图像控件覆盖当前选中区；
InsertInputPassword：用密码控件覆盖当前选中区；
InsertInputRadio：用单选钮控件覆盖当前选中区；
InsertInputReset：用重置控件覆盖当前选中区；
InsertInputSubmit：用提交控件覆盖当前选中区；
InsertInputText：用文本控件覆盖当前选中区；
InsertMarquee：用空字幕覆盖当前选中区；
insertOrderedList：在插入点或者选中文字上创建一个有序列表；
insertUnorderedList：在插入点或者选中文字上创建一个无序列表；
insertParagraph：在选择或当前行周围插入一个段落；(IE会在插入点插入一个段落并删除选中的部分)
InsertSelectDropdown：用下拉框控件覆盖当前选中区；
InsertSelectListbox：用列表框控件覆盖当前选中区；
InsertTextArea：用多行文本输入控件覆盖当前选中区；
insertText：在光标插入位置插入文本内容或者覆盖所选的文本内容；
InsertUnorderedList：切换当前选中区是项目符号列表还是常规格式化块；
italic：在光标插入点开启或关闭斜体字；(IE使用EM标签，而不是I )；
justifyCenter：对光标插入位置或者所选内容进行文字居中；
justifyFull：对光标插入位置或者所选内容进行文本对齐；
justifyLeft：对光标插入位置或者所选内容进行左对齐；
justifyRight：对光标插入位置或者所选内容进行右对齐；
JustifyNone：目前尚未支持；
LiveResize：迫使 MSHTML 编辑器在缩放或移动过程中持续更新元素外观，而不是只在移动或缩放完成后更新；
MultipleSelection：允许当用户按住 Shift 或 Ctrl 键时一次选中多于一个站点可选元素；
open：打开；
outdent：对光标插入行或者所选行内容减少缩进量；
OverWrite：切换文本状态的插入和覆盖；
paste：在光标位置粘贴剪贴板的内容，如果有被选中的内容，会被替换；剪贴板功能必须在 user.js 配置文件中启用；
PlayImage：目前尚未支持
Print：打开打印对话框以便用户可以打印当前页；
redo：重做被撤销的操作；
Refresh：刷新当前文档；
removeFormat：对所选内容去除所有格式；
RemoveParaFormat：目前尚未支持；
SaveAs：将当前 Web 页面保存为文件；
selectAll：选中编辑区里的全部内容；
SizeToControl：目前尚未支持；
SizeToControlHeight：目前尚未支持；
SizeToControlWidth：目前尚未支持；
Stop：停止；
StopImage：目前尚未支持；
strikeThrough：在光标插入点开启或关闭删除线；
subscript：在光标插入点开启或关闭下角标；
superscript：在光标插入点开启或关闭上角标；
UnBookmark：从当前选中区中删除全部书签；
underline：在光标插入点开启或关闭下划线；
undo：撤销最近执行的命令；
unlink：去除所选的锚链接<a>标签；
Unselect：清除当前选中区的选中状态；
useCSS：切换使用HTML tags还是CSS来生成标记，要求一个布尔值true/false作为参数；注: 这个属性是逻辑上的倒退 (例如. use false to use CSS, true to use HTML).(IE不支持)；该属性已经废弃，使用 styleWithCSS 代替；
styleWithCSS：用这个取代 useCSS 命令，false 生成格式化元素；

不同的浏览器实现不同的编辑命令；只有少部分命令得到了很好的支持，所以在使用之前一定要检测浏览器是否支持该命令；

document.queryCommandSupport(command)方法：传入command命令名，返回一个布尔值，用来查询浏览器是否支持该命令；

var selectAll = document.queryCommandSupported("selectAll");
console.log(selectAll);

doument.queryCommandEnable(command)方法：传入command命令名，返回一个布尔值，查询浏览器中指定的编辑指令是否可用；

mydiv.addEventListener("mouseup",function(e){
    var createLink = document.queryCommandEnabled("createLink");
    console.log(createLink);
},false);

document.queryCommandState(command)方法：用来判定命令的当前状态：有一些命令如”bold”和”italic”有一个布尔值状态，开或关取决于当前选区或光标的位置；这些命令通常用工具栏上的开关按钮表示；

var flag = document.queryCommandState("bold");
console.log(flag);

document.queryCommandValue()方法：查询相关联的值，有些命令如”fontname”有一个相关联的值，字体系列名；

var fontSize = document.queryCommandValue("fontSize");
console.log(fontSize);  // 默认是3
var foreColor = document.queryCommandValue("foreColor");
console.log(foreColor);  // rgb(0,0,0)

document.queryCommandIndeterm(command)方法：返回一个布尔值，用于检测指定的命令是否处于不确定状态；例如，如果当前选取的文本使用了两种不同的字体，使用该方法查询”fontname”的结果是不确定的；

需要注意的是，这些编辑器生成的HTML标记很可能是杂乱无章的；

另外，一旦用户编辑了某元素的内容，就可以使用innerHTML属性得到已经编辑内容的HTML标记；如何处理这些富文本，有多种方式，可以把它存储在隐藏的表单控件中，并通过提交该表单发送到服务器，也可以保存在本地；

示例：一个HTML编辑器：

<head>
    <style>
        *{margin:0;padding:0; box-sizing: border-box;}
        #editor{width:600px;margin:100px auto;}
        #editor #toolBar1,#editor #toolBar2{width:100%;background-color: lightgray;}
        img.intLink{cursor:pointer;border:none;}
        #toolBar1 select{font-size:16px;}
        #textBox{width:100%; height:200px; border:1px solid;padding:10px; overflow:scroll;}
        #textBox #sourceText{margin:0;padding:0; min-width:498px; min-height:200px;}
    </style>
    <script>
        var oDoc, sDefTxt;
        function initDoc(){
            oDoc = document.getElementById("textBox");
            sDefTxt = oDoc.innerHTML;
            if(document.compForm.switchMode.checked)
                setDocMode(true);
        }
        function formatDoc(sCmd, sValue){
            if(validateMode()){
                document.execCommand(sCmd, false, sValue);
                oDoc.focus();
            }
        }
        function validateMode(){
            if(!document.compForm.switchMode.checked)
                return true;
            alert("Uncheck 'Show HTML");
            oDoc.focus();
            return false;
        }
        function setDocMode(bToSource){
            var oContent;
            if(bToSource){
                oContent = document.createTextNode(oDoc.innerHTML);
                oDoc.innerHTML = "";
                var oPre = document.createElement("pre");
                oDoc.contentEditable = false;
                oPre.id = "sourceText";
                oPre.contentEditable = true;
                oPre.appendChild(oContent);
                oDoc.appendChild(oPre);
                document.execCommand("defaultParagraphSeparator", false, "div");
            }else{
                if(document.all)
                    oDoc.innerHTML = oDoc.innerText;
                else{
                    oContent = document.createRange();
                    oContent.selectNodeContents(oDoc.firstChild);
                    oDoc.innerHTML = oContent.toString();
                }
                oDoc.contentEditable = true;
            }
            oDoc.focus();
        }
        function printDoc(){
            if(!validateMode())
                return;
            var oPrintWin = window.open("","_blank","width=450,height=450,left=400,top=100,menubar=yes,toolbar=no,scrollbars=yes");
            oPrintWin.document.open();
            oPrintWin.document.write("<!doctype html><html><head><title>打印<\/title><\/head><body onload='print();'>" + oDoc.innerHTML + "<\/body><\/html>");
            oPrintWin.document.close();
        }
    </script>
</head>
<body onload="initDoc()">
<div id="editor">
<form name="compForm" method="post" action="sample.php" onsubmit="if(validateMode()){this.myDoc.value=oDoc.innerHTML; return true;}return false;">
    <input type="hidden" name="myDoc">
    <div id="toolBar1">
        <select onchange="formatDoc('formatblock',this[this.selectedIndex].value); this.selectedIndex=0;">
            <option selected>-文本格式-</option>
            <option value="h1">标题1 <h1></option>
            <option value="h2">标题2 <h2></option>
            <option value="h3">标题3 <h3></option>
            <option value="h4">标题4 <h4></option>
            <option value="h5">标题5 <h5></option>
            <option value="h6">标题6 <h6></option>
            <option value="p">段落 <p></option>
            <option value="pre">预定义 <pre></option>
        </select>
        <select onchange="formatDoc('fontname', this[this.selectedIndex].value); this.selectedIndex=0;">
            <option class="heading" selected>-字体-</option>
            <option>Arial</option>
            <option>Arial Black</option>
            <option>Courier New</option>
            <option>Times New Roman</option>
        </select>
        <select onchange="formatDoc('fontsize',this[this.selectedIndex].value); this.selectedIndex=0;">
            <option class="heading" selected>-字号-</option>
            <option value="1">非常小</option>
            <option value="2">小</option>
            <option value="3">正常</option>
            <option value="4">中大</option>
            <option value="5">大</option>
            <option value="6">非常大</option>
            <option value="7">最大</option>
        </select>
        <select onchange="formatDoc('forecolor',this[this.selectedIndex].value); this.selectedIndex=0;">
            <option class="heading" selected>-颜色-</option>
            <option value="red">Red</option>
            <option value="blue">Blue</option>
            <option value="green">Green</option>
            <option value="black">Black</option>
        </select>
        <select onchange="formatDoc('backcolor',this[this.selectedIndex].value); this.selectedIndex=0;">
            <option class="heading" selected>-背景颜色-</option>
            <option value="red">Red</option>
            <option value="blue">Blue</option>
            <option value="green">Green</option>
            <option value="black">Black</option>
        </select>
    </div>
    <div id="toolBar2">
    <img class="intLink" src="icons/clean.gif" onclick="if(validateMode()&&confirm('确定清除所有吗？')){oDoc.innerHTML = sDefTxt};" /> 
    <img class="intLink" src="icons/print.png" onclick="printDoc();" /> 
    <img class="intLink" src="icons/undo.gif" onclick="formatDoc('undo');" /> 
    <img class="intLink" src="icons/redo.gif" onclick="formatDoc('redo');" /> 
    <img class="intLink" src="icons/format.png" onclick="formatDoc('removeFormat');" /> 
    <img class="intLink" src="icons/bold.gif" onclick="formatDoc('bold')" /> 
    <img class="intLink" src="icons/italic.gif" onclick="formatDoc('italic')" /> 
    <img class="intLink" src="icons/underline.gif" onclick="formatDoc('underline')" /> 
    <img class="intLink" src="icons/justifyleft.gif" onclick="formatDoc('justifyleft')" /> 
    <img class="intLink" src="icons/justifycenter.gif" onclick="formatDoc('justifycenter')" /> 
    <img class="intLink" src="icons/justifyright.gif" onclick="formatDoc('justifyright')" /> 
    <img class="intLink" src="icons/numberedlist.gif" onclick="formatDoc('insertorderedlist')" /> 
    <img class="intLink" src="icons/dottedlist.gif" onclick="formatDoc('insertunorderedlist')" /> 
    <img class="intLink" src="icons/quote.gif" onclick="formatDoc('formatblock','blockquote')" /> 
    <img class="intLink" src="icons/outdent.gif" onclick="formatDoc('outdent')" /> 
    <img class="intLink" src="icons/indent.gif" onclick="formatDoc('indent')" /> 
    <img class="intLink" src="icons/hyperlink.gif" onclick="var sLnk=prompt('输入链接地址','http:\/\/'); if(sLnk&&sLnk!=''&&sLnk!='http:\/\/'){formatDoc('createlink',sLnk);}" /> 
    <img class="intLink" src="icons/cut.gif" onclick="formatDoc('cut')" /> 
    <img class="intLink" src="icons/copy.gif" onclick="formatDoc('copy')" /> 
    <img class="intLink" src="icons/paste.gif" onclick="formatDoc('paste')" /> 
    </div>
    <div id="textBox" contenteditable="true"><p>富文本编辑器</p></div>
    <p id="editMode">
        <input type="checkbox" name="switchMode" id="switchBox" onchange="setDocMode(this.checked);">
        <label for="switchBox">显示HTML</label>
    </p>
    <p><input type="submit" value="保存" /></p>
</form>
</div>
</body>

这些浏览器内置的编辑功能对用户输入少量的富文本来说，足够使用了；但要解决所有种类的文档的编辑来说，这些API还显得不足；在实际开发中，一般采用的是第三方的类库，比如百度UEditor和layui.layedit和Dojo，它们都包含了编辑器组件；

上一篇： JavaScript-如何在js代码中引用一个js模块?
下一篇： Javascript 模块化指北 javascript的模块规范

网站首页 > 基础教程 正文

第51节 可编辑的内容-Javascript-零点程序员-王唯

猜你喜欢

网站首页 > 基础教程正文

第51节可编辑的内容-Javascript-零点程序员-王唯