Table of Contents
Document.execCommand()
Command without value parameter
Commands with value parameters
Command to add block style tag
Create toolbar
向编辑器添加功能
跨浏览器差异
最终想法
Home Web Front-end HTML Tutorial Create a WYSIWYG editor using the contentEditable property

Create a WYSIWYG editor using the contentEditable property

Sep 08, 2023 pm 04:33 PM
content editor wysiwygeditor Editable properties

WYSIWYG editors are very popular. You've probably also used one of these at some point. There are many libraries available to help you set up your own editor. Although they are quick to set up, there are drawbacks to using these libraries. First, they are bloated. Most of them have fancy features that you probably won't use. Additionally, customizing the appearance of these editors can be a headache.

In this tutorial, we will build our own lightweight WYSIWYG editor. By the end of this tutorial, you will have an editor with basic formatting capabilities that you can style to your liking.

We first introduce execCommand. We will use this command to implement our editor extensively.

Document.execCommand()

execCommand is a method of the document object. It allows us to manipulate the contents of the editable area. When used with contentEditable, it can help us create rich text editors. There are many commands available, such as adding links, setting the selection to Bold or Italic, and changing the font size or color. The method follows the following syntax:

document.execCommand(CommandName, ShowDefaultUI, ValueArgument);
Copy after login

CommandName is a string specifying the name of the command to be executed. ShowDefaultUI is a Boolean value indicating whether the support interface should be displayed. This option is not fully implemented yet and is best set to false. ValueArgument is a string that provides information such as an image URL or foreColor. This parameter is set to null when the command does not require a value to take effect.

We need to use different versions of this method to achieve various functions. In the next few paragraphs I will review them one by one.

Command without value parameter

Commands such as bold, align, undo and redo do not require a ValueArgument. In this case we use the following syntax:

document.execCommand(commandName, false, null);
Copy after login

CommandName is just the name of the command, such as justifyCenter, justifyRight, bold, etc.

Commands with value parameters

Commands like insertImage, createLink and foreColor require a third argument to work properly. For these commands you need the following syntax:

document.execCommand(commandName, false, value);
Copy after login

For insertImage, the value is the URL of the image to be inserted. For foreColor, it will be a color value like #FF9966 or a name like blue.

Command to add block style tag

Adding HTML block style tags requires using formatBlock as commandName and the tag name as valueArgument. The syntax is similar to:

document.execCommand('formatBlock', false, tagName);
Copy after login

This method will add HTML block style tags around the row containing the current selection. It will also replace any tags that are already there. tagName can be any title tag (h1-h6), p, or blockquote.

I have discussed the most commonly used commands here. You can visit Mozilla for a list of all available commands.

Create toolbar

After the basics are completed, it’s time to create the toolbar. I will use Font Awesome icon for the button. You may have noticed that, aside from a few differences, all execCommand have a similar structure. We can take advantage of this by using the following markup for the toolbar buttons:

<a href="#" data-command='commandName'><i class='fa fa-icon'></i></a>
Copy after login

This way, whenever the user clicks the button, we can determine which version of execCommand to use based on the value of the data-command attribute. Here are a few buttons for reference:

<a href="#" data-command='h2'>H2</a>
<a href="#" data-command='undo'><i class='fa fa-undo'></i></a>
<a href="#" data-command='createlink'><i class='fa fa-link'></i></a>
<a href="#" data-command='justifyLeft'><i class='fa fa-align-left'></i></a>
<a href="#" data-command='superscript'><i class='fa fa-superscript'></i></a>
Copy after login

The data-command attribute value of the first button is h2. After checking this value in JavaScript, we will use the formatBlock version of the execCommand method. Likewise, for the last button, superscript recommends that we use the execCommand version without the valueArgument.

Creating the foreColor and backColor buttons is another story. They pose two problems. Depending on the number of colors we offer the user to choose from, writing so much code can be annoying and error-prone. To solve this problem, we can use the following JavaScript code:

var colorPalette = ['000000', 'FF9966', '6699FF', '99FF66','CC0000', '00CC00', '0000CC', '333333', '0066FF', 'FFFFFF'];
                    
var forePalette = $('.fore-palette');

for (var i = 0; i < colorPalette.length; i++) {
  forePalette.append('<a href="#" data-command="forecolor" data-value="' + '#' + colorPalette[i] + '" style="background-color:' + '#' + colorPalette[i] + ';" class="palette-item"></a>');
}
Copy after login

请注意,我还为每种颜色设置了一个 data-value 属性。稍后它将在 execCommand 方法中用作 valueArgument

第二个问题是我们不能一直显示那么多颜色,因为这会占用大量空间并导致糟糕的用户体验。使用一点CSS,我们可以确保只有当用户将鼠标悬停在相应按钮上时才会出现调色板。这些按钮的标记也需要更改为以下内容:

<div class="fore-wrapper"><i class='fa fa-font'></i>
  <div class="fore-palette">
  </div>
</div>
Copy after login

要仅在 hover 上显示调色板,我们需要以下 CSS:

.fore-palette,
.back-palette {
  display: none;
}

.fore-wrapper:hover .fore-palette,
.back-wrapper:hover .back-palette {
  display: block;
  float: left;
  position: absolute;
}
Copy after login

CodePen 演示中还有许多其他 CSS 规则可以使工具栏更漂亮,但这就是核心功能所需的全部。

向编辑器添加功能

现在,是时候让我们的编辑器发挥作用了。这样做所需的代码非常小。

$('.toolbar a').click(function(e) {
    
  var command = $(this).data('command');
  
  if (command == 'h1' || command == 'h2' || command == 'p') {
    document.execCommand('formatBlock', false, command);
  }
  
  if (command == 'forecolor' || command == 'backcolor') {
    document.execCommand($(this).data('command'), false, $(this).data('value'));
  }
  
  if (command == 'createlink' || command == 'insertimage') {
    url = prompt('Enter the link here: ','http:\/\/');
    document.execCommand($(this).data('command'), false, url);
  }
  
  else document.execCommand($(this).data('command'), false, null);
  
});
Copy after login

我们首先将单击事件附加到所有工具栏按钮。每当单击工具栏按钮时,我们都会将相应按钮的 data-command 属性的值存储在变量 command 中。稍后将用于调用 execCommand 方法的适当版本。它有助于编写简洁的代码并避免重复。

设置 foreColorbackColor 时,我使用 data-value 属性作为第三个参数。 createLinkinsertImage 没有常量 url 值,因此我们使用提示从用户获取值。您可能还想执行其他检查以确保 url 有效。如果command变量不满足任何if块,我们运行第一个版本的execCommand。

这就是我们所见即所得编辑器的样子。

Create a WYSIWYG editor using the contentEditable property

您还可以使用我在上次讨论的 localStorage 来实现自动保存功能教程。

跨浏览器差异

各种浏览器在实现上存在细微差异。例如,请记住,使用 formatBlock 时,Internet Explorer 仅支持标题标签 h1 - h6addresspre。在指定 commandName 时,您还需要包含标记分隔符,例如 <h3></h3>

并非所有浏览器都支持所有命令。 Internet Explorer 不支持 insertHTMLhiliteColor 等命令。同样,只有 Firefox 支持 insertBrOnReturn。您可以在此 GitHub 页面上了解有关浏览器不一致的更多信息。

最终想法

创建您自己的所见即所得编辑器可以是一次很好的学习体验。在本教程中,我介绍了很多命令并使用了一些 CSS 来进行基本样式设置。作为练习,我建议您尝试实现一个工具栏按钮来设置文本选择的 font。该实现与 foreColor 按钮的实现类似。

我希望您喜欢本教程并学到一些新东西。如果您从头开始创建了自己的所见即所得编辑器,请随时在评论部分链接到它。

The above is the detailed content of Create a WYSIWYG editor using the contentEditable property. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Repo: How To Revive Teammates
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Difficulty in updating caching of official account web pages: How to avoid the old cache affecting the user experience after version update? Difficulty in updating caching of official account web pages: How to avoid the old cache affecting the user experience after version update? Mar 04, 2025 pm 12:32 PM

The official account web page update cache, this thing is simple and simple, and it is complicated enough to drink a pot of it. You worked hard to update the official account article, but the user still opened the old version. Who can bear the taste? In this article, let’s take a look at the twists and turns behind this and how to solve this problem gracefully. After reading it, you can easily deal with various caching problems, allowing your users to always experience the freshest content. Let’s talk about the basics first. To put it bluntly, in order to improve access speed, the browser or server stores some static resources (such as pictures, CSS, JS) or page content. Next time you access it, you can directly retrieve it from the cache without having to download it again, and it is naturally fast. But this thing is also a double-edged sword. The new version is online,

How do I use HTML5 form validation attributes to validate user input? How do I use HTML5 form validation attributes to validate user input? Mar 17, 2025 pm 12:27 PM

The article discusses using HTML5 form validation attributes like required, pattern, min, max, and length limits to validate user input directly in the browser.

How to efficiently add stroke effects to PNG images on web pages? How to efficiently add stroke effects to PNG images on web pages? Mar 04, 2025 pm 02:39 PM

This article demonstrates efficient PNG border addition to webpages using CSS. It argues that CSS offers superior performance compared to JavaScript or libraries, detailing how to adjust border width, style, and color for subtle or prominent effect

What are the best practices for cross-browser compatibility in HTML5? What are the best practices for cross-browser compatibility in HTML5? Mar 17, 2025 pm 12:20 PM

Article discusses best practices for ensuring HTML5 cross-browser compatibility, focusing on feature detection, progressive enhancement, and testing methods.

What is the purpose of the <datalist> element? What is the purpose of the <datalist> element? Mar 21, 2025 pm 12:33 PM

The article discusses the HTML &lt;datalist&gt; element, which enhances forms by providing autocomplete suggestions, improving user experience and reducing errors.Character count: 159

What is the purpose of the <progress> element? What is the purpose of the <progress> element? Mar 21, 2025 pm 12:34 PM

The article discusses the HTML &lt;progress&gt; element, its purpose, styling, and differences from the &lt;meter&gt; element. The main focus is on using &lt;progress&gt; for task completion and &lt;meter&gt; for stati

How do I use the HTML5 <time> element to represent dates and times semantically? How do I use the HTML5 <time> element to represent dates and times semantically? Mar 12, 2025 pm 04:05 PM

This article explains the HTML5 &lt;time&gt; element for semantic date/time representation. It emphasizes the importance of the datetime attribute for machine readability (ISO 8601 format) alongside human-readable text, boosting accessibilit

What is the purpose of the <meter> element? What is the purpose of the <meter> element? Mar 21, 2025 pm 12:35 PM

The article discusses the HTML &lt;meter&gt; element, used for displaying scalar or fractional values within a range, and its common applications in web development. It differentiates &lt;meter&gt; from &lt;progress&gt; and ex

See all articles