A simple way to implement a JavaScript rich text editor-JS Tutorial-php.cn

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);
};

Copy after login

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)

Copy after login

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')
  },
  // …
}

Copy after login

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)
})

Copy after login

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 actions array can have the following elements:

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

Copy after login

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])

Copy after login

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)

Copy after login

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))
  }
}

Copy after login

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)
  }
}

Copy after login

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!