A simple way to implement a JavaScript rich text editor

I was looking for some information about rich text editors some time ago, and then I discovered this project called Pell. It is a WYSIWYG (What You See Is What You Get) text editor. Although its function is very simple, it makes Surprisingly it is only 1kb in size. The core file of the project, pell.js, only has 130 lines. Even if other parts are added, the total number of js is less than 200 lines. This article mainly introduces the method of implementing a rich text editor with less than 200 lines of JavaScript code. Friends who need it can refer to it. I hope it can help everyone.

The main code of the project is in the pell.js file. Its structure is very simple. The implementation of the main functions depends on the following parts

• actions object

• exec() function

• init() function
  

Document.execCommand()

Let’s start with the simplest part. The exec() function only has the following three lines:

export const exec = (command, value =null) => {
  document.execCommand(command, false, value);
};

It wraps document.execCommand() in a simple way. Document.execCommand() is The core of this editor, its syntax is as follows

bool = document.execCommand(aCommandName, aShowDefaultUI, aValueArgument)

• aCommandName is a string representing the command you want to execute, such as: bold 'bold', create link 'createLink', change font size 'fontSize' etc.

• aShowDefaultUI Whether to display the default user interface

• aValueArgument Some commands require additional input, such as when inserting pictures and links The address needs to be given
  

Note: After my experiments, changing the value of aShowDefaultUI under Chrome has no impact. This stackoverflow question mentioned that this is from Parameters of the old version of IE, so set it to the default false here.

actions object

The file defines an object named actions, which corresponds to the row of buttons on the toolbar in the figure below. Each sub-object in actions saves a button. Attributes.

Part of the code:

const actions = {
  bold: {
    icon: '<b>B</b>',
    title: 'Bold',
    result: ()=> exec('bold')
  },
  italic: {
    icon: '<i>I</i>',
    title: 'Italic',
    result: ()=> exec('italic')
  },
  underline: {
    icon: '<u>U</u>',
    title: 'Underline',
    result: ()=> exec('underline')
  },
  // …
}

This code displays three object properties named bold, italic, and underline, which correspond to the bold, italic, and underline buttons in the front of the toolbar. It can be seen that their structures are the same, with the following three attributes:

• icon: How to display

• title in the toolbar : That’s the title

• #result : A function that will be assigned to the button as a click event and call the exec() function mentioned before to operate the text
  

Now that we have the actions object, how do we use it? This depends on the init() function. It will select elements from the actions object according to certain rules to form an array. Each item in the array will generate a button. settings.actions in the code below is this array, each element of which corresponds to a button displayed on the toolbar. The generation rules of settings.actions will be explained later.

// pell.js 中的 init() 函数
settings.actions.forEach(action=> {
  // 新建一个按钮元素
  const button = document.createElement('button')
  // 给按钮加上 css 样式
  button.className = settings.classes.button
  // 把 icon 属性作为内容显示出来
  button.innerHTML = action.icon
  button.title = action.title
  // 把 result 属性赋给按钮作为点击事件
  button.onclick = action.result
  // 将创建的按钮添加到工具栏上
  actionbar.appendChild(button)
})

In this way, each element in the array generates a button on the toolbar.

init() initialization function

When you want to use the pell editor, just call the init() function to initialize an editor. It receives a setting object as a parameter, which contains some properties like this:

• #element: the DOM element of the editor

• styleWithCSS: set to When true, will be used instead of

• ##actions

• onChange

• 
  

##The most important one is actions, which is an array , contains the list of buttons you want to display in the toolbar.

The actions array can have the following elements:

A string
An object with a name attribute
An object has no name attribute, but has the necessary attributes icon, result, etc. to generate a button.

• 
  ##

  actions: [
   'bold',
   'underline',
   'italic',
   {
    name: 'image',
    result: ()=> {
     const url = window.prompt('Enter the image URL')
     if (url) window.pell.exec('insertImage', ensureHTTP(url))
    }
   },
   // ...
  ]

  In init() The function will combine this actions parameter with the actions object defined in pell.js. You can use the actions object as a default setting. See the following code:

// pell.js 中的 init() 函数
settings.actions = settings.actions
  ? settings.actions.map(action=> {
    if (typeof action === 'string') return actions[action]
    // 如果参数中传入的 action 已经在默认设置中存在，用传入的参数覆盖默认设置
    else if (actions[action.name]) {
      return { ...actions[action.name], ...action }
    }
    return action
  })
  : Object.keys(actions).map(action=> actions[action])

If the parameter object setting does not contain the actions array, It will be initialized by default using the previously defined actions object.

There is another important part in the init() function, which is to create an editable area. Here a p element is created and its contentEditable attribute is set to true, so that the previously mentioned document can be used here. .execCommand() command.

// 创建编辑区域的元素
settings.element.content = document.createElement('p')
// 让 p 成为可编辑状态
settings.element.content.contentEditable = true
settings.element.content.className = settings.classes.content
// 当用户输入时，更新页面的相应部分
settings.element.content.oninput = event=> 
  settings.onChange(event.target.innerHTML)
settings.element.content.onkeydown = preventTab
settings.element.appendChild(settings.element.content)

Process Organization

Finally, take "Insert Link" as an example to sort out the entire editor process:

1. When calling the init() function, in the parameters Add the following item to the action array of the object

{
  name: 'link',
  result: ()=> {
    const url = window.prompt('Enter the link URL')
    if (url) window.pell.exec('createLink', ensureHTTP(url))
  }
}

2. During the running process of init(), it will check whether the defined actions object has the link attribute. After checking, the attribute does exist

link: {
  icon: '',
  title: 'Link',
  result: ()=> {
    const url = window.prompt('Enter the link URL')
    if (url) exec('createLink', url)
  }
}

Because the incoming parameter contains the result item, the incoming result is used to replace the default value in the link object, and then the modified link object is put into settings. in the actions array.

3. Iterate over the settings.actions array to generate the toolbar. The link object is used as one of the items to generate an "Insert Link" button. The result property becomes its click event.

4. After clicking the "Insert Link" button, you will be asked to enter a url, and then call exec('createLink', url) to insert the link in the editing area.

The functional process of other buttons in the editor is also similar.

In this way, most of the content of the Pell editor has been explained, and you still need to look at the source code for the remaining parts. After all, the project code is not long, so it is a good introduction to the text editor.

Related recommendations:

Baidu editor adds image watermark function

Four easy-to-use free online HTML editors

JavaScript implementation of input box editor syntax highlighting ideas and code details

The above is the detailed content of A simple way to implement a JavaScript rich text editor. For more information, please follow other related articles on the PHP Chinese website!