我最近在Firefox中创建了一个富文本编辑器和“enableInlineTableEditing”功能（带有用于插入/删除行/列的表句柄控件），但我注意到在Chrome中，它根本不起作用。 从documentation开始，我看到Chrome不支持此功能，但我确实需要此表格句柄控件功能。 知道怎么启用这个吗？
var parms = [{
"cmd": "aCommandName",
"desc": "A DOMString representing the name of the command"
}, {
"cmd": "aShowDefaultUI",
"desc": "A Boolean indicating whether the default user interface should be shown. This is not implemented in Mozilla."
}, {
"cmd": "aValueArgument",
"desc": "A DOMString representing some commands (such as insertimage) require an extra value argument (the image's url). Pass an argument of null if no argument is needed."
}];
var commands = [{
"cmd": "backColor",
"val": "red",
"desc": "Changes the document background color. In styleWithCss mode, it affects the background color of the containing block instead. This requires a color value string to be passed in as a value argument. (Internet Explorer uses this to set text background color.)"
}, {
"cmd": "bold",
"icon": "bold",
"desc": "Toggles bold on/off for the selection or at the insertion point. (Internet Explorer uses the STRONG tag instead of B.)"
}, {
"cmd": "contentReadOnly",
"desc": "Makes the content document either read-only or editable. This requires a boolean true/false to be passed in as a value argument. (Not supported by Internet Explorer.)"
}, {
"cmd": "copy",
"icon": "clipboard",
"desc": "Copies the current selection to the clipboard. Clipboard capability must be enabled in the user.js preference file. See"
}, {
"cmd": "createLink",
"val": "https://twitter.com/netsi1964",
"icon": "link",
"desc": "Creates an anchor link from the selection, only if there is a selection. This requires the HREF URI string to be passed in as a value argument. The URI must contain at least a single character, which may be a white space. (Internet Explorer will create a link with a null URI value.)"
}, {
"cmd": "cut",
"icon": "scissors",
"desc": "Cuts the current selection and copies it to the clipboard. Clipboard capability must be enabled in the user.js preference file. See"
}, {
"cmd": "decreaseFontSize",
"desc": "Adds a SMALL tag around the selection or at the insertion point. (Not supported by Internet Explorer.)"
}, {
"cmd": "delete",
"icon": "scissors",
"desc": "Deletes the current selection."
}, {
"cmd": "enableInlineTableEditing",
"desc": "Enables or disables the table row and column insertion and deletion controls. (Not supported by Internet Explorer.)"
}, {
"cmd": "enableObjectResizing",
"desc": "Enables or disables the resize handles on images and other resizable objects. (Not supported by Internet Explorer.)"
}, {
"cmd": "fontName",
"val": "'Inconsolata', monospace",
"desc": "Changes the font name for the selection or at the insertion point. This requires a font name string (\"Arial\" for example) to be passed in as a value argument."
}, {
"cmd": "fontSize",
"val": "1-7",
"icon": "text-height",
"desc": "Changes the font size for the selection or at the insertion point. This requires an HTML font size (1-7) to be passed in as a value argument."
}, {
"cmd": "foreColor",
"val": "rgba(0,0,0,.5)",
"desc": "Changes a font color for the selection or at the insertion point. This requires a color value string to be passed in as a value argument."
}, {
"cmd": "formatBlock",
"desc": "Adds an HTML block-style tag around the line containing the current selection, replacing the block element containing the line if one exists (in Firefox, BLOCKQUOTE is the exception - it will wrap any containing block element). Requires a tag-name string to be passed in as a value argument. Virtually all block style tags can be used (eg. \"H1\", \"P\", \"DL\", \"BLOCKQUOTE\"). (Internet Explorer supports only heading tags H1 - H6, ADDRESS, and PRE, which must also include the tag delimiters < >, such as \"<H1>\".)"
}, {
"cmd": "forwardDelete",
"desc": "Deletes the character ahead of the cursor's position. It is the same as hitting the delete key."
}, {
"cmd": "heading",
"val": "h3",
"icon": "header",
"desc": "Adds a heading tag around a selection or insertion point line. Requires the tag-name string to be passed in as a value argument (i.e. \"H1\", \"H6\"). (Not supported by Internet Explorer and Safari.)"
}, {
"cmd": "hiliteColor",
"val": "Orange",
"desc": "Changes the background color for the selection or at the insertion point. Requires a color value string to be passed in as a value argument. UseCSS must be turned on for this to function. (Not supported by Internet Explorer.)"
}, {
"cmd": "increaseFontSize",
"desc": "Adds a BIG tag around the selection or at the insertion point. (Not supported by Internet Explorer.)"
}, {
"cmd": "indent",
"icon": "indent",
"desc": "Indents the line containing the selection or insertion point. In Firefox, if the selection spans multiple lines at different levels of indentation, only the least indented lines in the selection will be indented."
}, {
"cmd": "insertBrOnReturn",
"desc": "Controls whether the Enter key inserts a br tag or splits the current block element into two. (Not supported by Internet Explorer.)"
}, {
"cmd": "insertHorizontalRule",
"desc": "Inserts a horizontal rule at the insertion point (deletes selection)."
}, {
"cmd": "insertHTML",
"val": "<h3>Life is great!</h3>",
"icon": "code",
"desc": "Inserts an HTML string at the insertion point (deletes selection). Requires a valid HTML string to be passed in as a value argument. (Not supported by Internet Explorer.)"
}, {
"cmd": "insertImage",
"val": "http://dummyimage.com/160x90",
"icon": "picture-o",
"desc": "Inserts an image at the insertion point (deletes selection). Requires the image SRC URI string to be passed in as a value argument. The URI must contain at least a single character, which may be a white space. (Internet Explorer will create a link with a null URI value.)"
}, {
"cmd": "insertOrderedList",
"icon": "list-ol",
"desc": "Creates a numbered ordered list for the selection or at the insertion point."
}, {
"cmd": "insertUnorderedList",
"icon": "list-ul",
"desc": "Creates a bulleted unordered list for the selection or at the insertion point."
}, {
"cmd": "insertParagraph",
"icon": "paragraph",
"desc": "Inserts a paragraph around the selection or the current line. (Internet Explorer inserts a paragraph at the insertion point and deletes the selection.)"
}, {
"cmd": "insertText",
"val": new Date(),
"icon": "file-text-o",
"desc": "Inserts the given plain text at the insertion point (deletes selection)."
}, {
"cmd": "italic",
"icon": "italic",
"desc": "Toggles italics on/off for the selection or at the insertion point. (Internet Explorer uses the EM tag instead of I.)"
}, {
"cmd": "justifyCenter",
"icon": "align-center",
"desc": "Centers the selection or insertion point."
}, {
"cmd": "justifyFull",
"icon": "align-justify",
"desc": "Justifies the selection or insertion point."
}, {
"cmd": "justifyLeft",
"icon": "align-left",
"desc": "Justifies the selection or insertion point to the left."
}, {
"cmd": "justifyRight",
"icon": "align-right",
"desc": "Right-justifies the selection or the insertion point."
}, {
"cmd": "outdent",
"icon": "outdent",
"desc": "Outdents the line containing the selection or insertion point."
}, {
"cmd": "paste",
"icon": "clipboard",
"desc": "Pastes the clipboard contents at the insertion point (replaces current selection). Clipboard capability must be enabled in the user.js preference file. See"
}, {
"cmd": "redo",
"icon": "repeat",
"desc": "Redoes the previous undo command."
}, {
"cmd": "removeFormat",
"desc": "Removes all formatting from the current selection."
}, {
"cmd": "selectAll",
"desc": "Selects all of the content of the editable region."
}, {
"cmd": "strikeThrough",
"icon": "strikethrough",
"desc": "Toggles strikethrough on/off for the selection or at the insertion point."
}, {
"cmd": "subscript",
"icon": "subscript",
"desc": "Toggles subscript on/off for the selection or at the insertion point."
}, {
"cmd": "superscript",
"icon": "superscript",
"desc": "Toggles superscript on/off for the selection or at the insertion point."
}, {
"cmd": "underline",
"icon": "underline",
"desc": "Toggles underline on/off for the selection or at the insertion point."
}, {
"cmd": "undo",
"icon": "undo",
"desc": "Undoes the last executed command."
}, {
"cmd": "unlink",
"icon": "chain-broken",
"desc": "Removes the anchor tag from a selected anchor link."
}, {
"cmd": "useCSS ",
"desc": "Toggles the use of HTML tags or CSS for the generated markup. Requires a boolean true/false as a value argument. NOTE: This argument is logically backwards (i.e. use false to use CSS, true to use HTML). (Not supported by Internet Explorer.) This has been deprecated; use the styleWithCSS command instead."
}, {
"cmd": "styleWithCSS",
"desc": "Replaces the useCSS command; argument works as expected, i.e. true modifies/generates style attributes in markup, false generates formatting elements."
}];
var commandRelation = {};
function supported(cmd) {
var css = !!document.queryCommandSupported(cmd.cmd) ? "btn-succes" : "btn-error"
return css
};
function icon(cmd) {
return (typeof cmd.icon !== "undefined") ? "fa fa-" + cmd.icon : "";
};
function doCommand(cmdKey) {
var cmd = commandRelation[cmdKey];
if (supported(cmd) === "btn-error") {
alert("execCommand(“" + cmd.cmd + "”)\nis not supported in your browser");
return;
}
val = (typeof cmd.val !== "undefined") ? prompt("Value for " + cmd.cmd + "?", cmd.val) : "";
document.execCommand(cmd.cmd, false, (cmd.val || ""));
}
function init() {
var html = '',
template = '<span><code class="btn btn-xs %btnClass%" title="%desc%" onmousedown="event.preventDefault();" onclick="doCommand(\'%cmd%\')"><i class="%iconClass%"></i> %cmd%</code></span>';
commands.map(function(command, i) {
commandRelation[command.cmd] = command;
var temp = template;
temp = temp.replace(/%iconClass%/gi, icon(command));
temp = temp.replace(/%desc%/gi, command.desc);
temp = temp.replace(/%btnClass%/gi, supported(command));
temp = temp.replace(/%cmd%/gi, command.cmd);
html+=temp;
});
document.querySelector(".buttons").innerHTML = html;
}
init(); @import url(https://fonts.googleapis.com/css?family=Inconsolata:400,700|Open+Sans:400,800);
body {
font-family: 'Open Sans', sans-serif;
}
.jumbotron {
padding: 0 0 20px;
font-family: 'Inconsolata', monospace ;
}
.btn-succes {
background-color: green;
color: yellow;
}
.btn-error {
background-color: grey;
color: black;
}
.btn-succes, .btn-succes {
margin: 5px;
}
i {
color:white;
}
.btn-error i {
color: black;
}
.btn {
-webkit-user-select: none; /* webkit (safari, chrome) browsers */
-moz-user-select: none; /* mozilla browsers */
-khtml-user-select: none; /* webkit (konqueror) browsers */
-ms-user-select: none; /* IE10+ */
}
:focus {
outline: none;
}<div class="container">
<div class="jumbotron">
<div class="container">
<h2>execCommands supported in your browser</h2>
<div class="row">
<div class="col-md-6">The <small class="btn btn-success btn-xs">Green</small> commands are supported by your browser, where as the <small class="btn btn-error btn-xs">Grey</small> ones.. You guessed it! :-) <br />Anyway try to select contents below and click <small class="btn btn-success btn-xs">commands</small> to execute the commands on it. <br />I use the HTML attribute <code>contenteditable=true</code> to allow modifications to the content. <code>Updated</code>: Added <a href="https://fortawesome.github.io/Font-Awesome/icons/">font awesome icons</a>. <br /> <br />Inspired by <a href="https://css-tricks.com/cut-and-copy-from-javascript/">Cut and Copy (from JavaScript)</a></div>
<div class="col-md-6">
<code>2017-06-04 updated:</code><br>
<em>As pointed out by <a href="https://twitter.com/Robvanhe">@Robvanhe</a> the pen did not actually work in Safari. It was due to selection being cleared after click, so no selection to apply command existed. Fixed now. Rewritten also to vanilla javascript (no use for Angular).</em>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12 tags buttons">
</div>
</div>
<div class="row" contentEditable="true">
<div class="col-md-3"> <br /><br />From <a href="https://www.picksumipsum.co.uk/">www.picksumipsum.co.uk</a>
<img src="https://www.picksumipsum.co.uk/wp-content/themes/starkers/images/e.png" alt="" class="img-responsive" /><h4>CLINT EASTWOOD</h4></div>
<div class="col-md-9">
<div class="row" contentEditable="true">
<div class="col-md-12">
<h3>Try to alter this text using the execCommands buttons above</h3>
You see, in this world there's two kinds of people, my friend: those with loaded guns and those who dig. you dig. well, do you have anything to say for yourself? you see, in this world there's two kinds of people, my friend: those with loaded guns and those who dig. you dig. <code>don't p!ss down my back and tell me it's raining</code>. dyin' ain't much of a livin', boy. are you feeling lucky punk this is the ak-47 assault rifle, the preferred weapon of your enemy; and <u>it makes a distinctive sound</u> when fired at you, so remember it. when a naked man's chasing a woman through an alley with a butcher knife and a hard-on, i figure he's not out collecting for the red cross. man's gotta know his limitations. ever notice how sometimes you come across somebody you shouldn't have <a href="https://google.com?q=f**ked" target="_blank" title="Try to ”unlink“ this link.">f**ked</a> with? well, i'm that guy. you see, in this world there's two kinds of people, my friend: those with loaded guns and those who dig. you dig. man's gotta know his limitations. <br /><br /></div>
<div class="col-md-4">You see, in this world there's two kinds of people, my friend: those with loaded guns and those who dig. you dig. well, do you have anything to say for yourself? you want a guarantee, buy a toaster. You want a guarantee, buy a toaster. don't p!ss down my back and tell me it's raining. This is the <b>ak-47</b> assault rifle, the preferred weapon of your enemy; and it makes a <u>distinctive sound</u> when fired at you, <br /><br /></div>
<div class="col-md-4"><img src="http://dummyimage.com/300x220?text=From%20dummyimage.com" alt="" class="img-responsive" /></div>
<div class="col-md-4">…so remember it. dyin' ain't much of a livin', boy. ever notice how sometimes you come across somebody you shouldn't have f**ked with? well, i'm that guy. what you have to ask yourself is, do i feel lucky. well do ya' punk? man's gotta know his limitations. are you feeling lucky punk dyin' ain't much of a livin', boy.</div>
</div>
<div class="row" contentEditable="true">
<div class="col-md-12">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod neque eaque fuga culpa doloribus adipisci vel explicabo! Nihil ipsa commodi quae voluptates laudantium fugit nam. Itaque veniam iure aliquid harum!</div>
</div>
</div>
</div>
</div>
</div>
答案 0 :(得分：0)
根据https://www.fxsitecompat.dev/en-CA/docs/2018/firefox-specific-html-editing-ui-has-been-deprecated/，W3C要求FireFox弃用该功能。解决此问题的唯一方法是为此目的通过javaScript和UI中的按钮/控件来实现。