Skip to content

Internalize execCommand() editor example #324

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Jul 24, 2025
Merged

Internalize execCommand() editor example #324

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
5e3813d
Internalize execCommand() editor example
Josh-Cena Jul 23, 2025
beb3c02
chore: minor edits
bsmth Jul 23, 2025
80bbcaa
Merge pull request #1 from bsmth/execcommand-ex-brian
Josh-Cena Jul 24, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .gitattributes
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
* text=auto
125 changes: 125 additions & 0 deletions execcommand/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,125 @@
<!DOCTYPE html>
<html lang="en">
<head>
<script defer src="script.js"></script>
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="style.css" />
<title>execCommands supported in your browser</title>
</head>
<body>
<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, these are
not supported. <br />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
><br /><br />
<code>2018-04-17 updated:</code><br />
<em
>Forked by Chris Mills to create a version of this demo with
clean content.</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">
<img
src="https://mdn.github.io/shared-assets/images/examples/mdn.svg"
alt="abstract dinosaur head"
class="img-responsive" />
</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>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Praesent semper in nunc at mattis. Suspendisse metus augue,
pellentesque finibus luctus dictum, tempor id nunc. Phasellus
semper magna ac interdum scelerisque. Vestibulum laoreet
sapien a nisi ullamcorper, nec luctus neque eleifend. Aliquam
vel tortor justo. Nam aliquam dapibus mi ut volutpat. Donec
eros turpis, gravida et neque nec, interdum pulvinar nibh. Ut
vel sodales nulla, a tempus sem. Nunc facilisis pretium
aliquam. Proin nulla ante, congue at purus sit amet, commodo
placerat erat. Sed malesuada eros nulla, in cursus urna
elementum finibus. Suspendisse posuere purus pellentesque
rutrum tempor. Nunc nec tincidunt est. Sed convallis ligula
quis dui laoreet maximus. Nulla pharetra placerat quam ut
rutrum. Nullam sit amet vehicula nisi.
</p>
</div>

<div class="col-md-8">
<p>
Pellentesque feugiat posuere fermentum. In ut varius odio, nec
venenatis lorem. Pellentesque interdum odio tortor, ac
hendrerit mauris venenatis nec. Maecenas finibus dapibus
eleifend. Nulla rhoncus metus non nisi rutrum tempor. Cras
luctus lacinia eros sed volutpat. Duis accumsan quam libero,
non accumsan nisl faucibus sit amet.
</p>
</div>

<div class="col-md-4">
<p>
Cras tincidunt magna malesuada maximus tristique. Sed a
fringilla ipsum. Nam malesuada gravida commodo. In ut
convallis neque. Nulla ut consequat nisi, a imperdiet ante.
</p>
</div>
</div>
<div class="row" contenteditable="true">
<div class="col-md-12">
Pellentesque feugiat posuere fermentum. In ut varius odio, nec
venenatis lorem. Pellentesque interdum odio tortor, ac hendrerit
mauris venenatis nec. Maecenas finibus dapibus eleifend. Nulla
rhoncus metus non nisi rutrum tempor. Cras luctus lacinia eros
sed volutpat. Duis accumsan quam libero, non accumsan nisl
faucibus sit amet.
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
257 changes: 257 additions & 0 deletions execcommand/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,257 @@
const commands = [
{
name: "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.",
},
{
name: "bold",
icon: "bold",
desc: "Toggles bold on/off for the selection or at the insertion point.",
},
{
name: "contentReadOnly",
desc: "Makes the content document either read-only or editable. This requires a boolean true/false as the value argument.",
},
{
name: "copy",
icon: "clipboard",
desc: "Copies the current selection to the clipboard. Conditions of having this behavior enabled vary from one browser to another, and have evolved over time.",
},
{
name: "createLink",
val: "https://developer.mozilla.org/",
icon: "link",
desc: "Creates an hyperlink from the selection, but only if there is a selection. Requires a URI string as a value argument for the hyperlink's href. The URI must contain at least a single character, which may be whitespace.",
},
{
name: "cut",
icon: "scissors",
desc: "Removes the current selection and copies it to the clipboard. When this behavior is enabled varies between browsers, and its conditions have evolved over time.",
},
{
name: "decreaseFontSize",
desc: "Adds a <small> tag around the selection or at the insertion point.",
},
{
name: "defaultParagraphSeparator",
desc: "Changes the paragraph separator used when new paragraphs are created in editable text regions.",
},
{
name: "delete",
icon: "scissors",
desc: "Deletes the current selection.",
},
{
name: "enableAbsolutePositionEditor",
desc: "Enables or disables the grabber that allows absolutely-positioned elements to be moved around.",
},
{
name: "enableInlineTableEditing",
desc: "Enables or disables the table row/column insertion and deletion controls.",
},
{
name: "enableObjectResizing",
desc: "Enables or disables the resize handles on images, tables, and absolutely-positioned elements and other resizable objects.",
},
{
name: "fontName",
val: "'Inconsolata', monospace",
desc: 'Changes the font name for the selection or at the insertion point. This requires a font name string (like "Arial") as a value argument.',
},
{
name: "fontSize",
val: "7",
icon: "text-height",
desc: "Changes the font size for the selection or at the insertion point. This requires an integer from 1 - 7 as a value argument.",
},
{
name: "foreColor",
val: "rgba(0,0,0,.5)",
desc: "Changes a font color for the selection or at the insertion point. This requires a hexadecimal color value string as a value argument.",
},
{
name: "formatBlock",
val: "<blockquote>",
desc: "Adds an HTML block-level element 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 as a value argument. Virtually all block-level elements can be used.",
},
{
name: "forwardDelete",
desc: "Deletes the character ahead of the cursor's position, identical to hitting the Delete key on a Windows keyboard.",
},
{
name: "heading",
val: "h3",
icon: "header",
desc: 'Adds a heading element around a selection or insertion point line. Requires the tag-name string as a value argument (i.e., "H1", "H6").',
},
{
name: "hiliteColor",
val: "Orange",
desc: "Changes the background color for the selection or at the insertion point. Requires a color value string as a value argument. useCSS must be true for this to function.",
},
{
name: "increaseFontSize",
desc: "Adds a <big> tag around the selection or at the insertion point.",
},
{
name: "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.",
},
{
name: "insertBrOnReturn",
desc: "Controls whether the Enter key inserts a <br> element, or splits the current block element into two.",
},
{
name: "insertHorizontalRule",
desc: "Inserts a <hr> element at the insertion point, or replaces the selection with it.",
},
{
name: "insertHTML",
val: "&lt;h3&gt;Life is great!&lt;/h3&gt;",
icon: "code",
desc: "Inserts an HTML string at the insertion point (deletes selection). Requires a valid HTML string as a value argument.",
},
{
name: "insertImage",
val: "http://dummyimage.com/160x90",
icon: "picture-o",
desc: "Inserts an image at the insertion point (deletes selection). Requires a URL string for the image's src as a value argument. The requirements for this string are the same as createLink.",
},
{
name: "insertOrderedList",
icon: "list-ol",
desc: "Creates a numbered ordered list for the selection or at the insertion point.",
},
{
name: "insertUnorderedList",
icon: "list-ul",
desc: "Creates a bulleted unordered list for the selection or at the insertion point.",
},
{
name: "insertParagraph",
icon: "paragraph",
desc: "Inserts a paragraph around the selection or the current line.",
},
{
name: "insertText",
val: new Date().toString(),
icon: "file-text-o",
desc: "Inserts the given plain text at the insertion point (deletes selection).",
},
{
name: "italic",
icon: "italic",
desc: "Toggles italics on/off for the selection or at the insertion point.",
},
{
name: "justifyCenter",
icon: "align-center",
desc: "Centers the selection or insertion point.",
},
{
name: "justifyFull",
icon: "align-justify",
desc: "Justifies the selection or insertion point.",
},
{
name: "justifyLeft",
icon: "align-left",
desc: "Justifies the selection or insertion point to the left.",
},
{
name: "justifyRight",
icon: "align-right",
desc: "Right-justifies the selection or the insertion point.",
},
{
name: "outdent",
icon: "outdent",
desc: "Outdents the line containing the selection or insertion point.",
},
{
name: "paste",
icon: "clipboard",
desc: "Pastes the clipboard contents at the insertion point (replaces current selection). Disabled for web content.",
},
{
name: "redo",
icon: "repeat",
desc: "Redoes the previous undo command.",
},
{
name: "removeFormat",
desc: "Removes all formatting from the current selection.",
},
{
name: "selectAll",
desc: "Selects all of the content of the editable region.",
},
{
name: "strikeThrough",
icon: "strikethrough",
desc: "Toggles strikethrough on/off for the selection or at the insertion point.",
},
{
name: "subscript",
icon: "subscript",
desc: "Toggles subscript on/off for the selection or at the insertion point.",
},
{
name: "superscript",
icon: "superscript",
desc: "Toggles superscript on/off for the selection or at the insertion point.",
},
{
name: "underline",
icon: "underline",
desc: "Toggles underline on/off for the selection or at the insertion point.",
},
{
name: "undo",
icon: "undo",
desc: "Undoes the last executed command.",
},
{
name: "unlink",
icon: "chain-broken",
desc: "Removes the anchor tag from a selected anchor link.",
},
{
name: "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). This has been deprecated in favor of styleWithCSS.",
},
{
name: "styleWithCSS",
desc: "Replaces the useCSS command. true modifies/generates style attributes in markup, false generates presentational elements.",
},
{
name: "AutoUrlDetect",
desc: "Changes the browser auto-link behavior.",
},
];

const buttons = document.querySelector(".buttons");

commands.forEach((command) => {
const button = document.createElement("button");
const supported = document.queryCommandSupported(command.name);
button.className = `btn btn-xs btn-${supported ? "success" : "error"}`;

button.addEventListener("mousedown", (e) => e.preventDefault());
if (supported) {
button.addEventListener("click", () => {
const val = command.val
? prompt(`Value for ${command.name}?`, command.val) || ""
: "";
document.execCommand(command.name, false, val);
});
} else {
button.setAttribute("disabled", "true");
}
button.innerHTML = `<i class="${
command.icon ? `fa fa-${command.icon}` : ""
}"></i> ${command.name}`;
buttons.appendChild(button);
});
Loading