不到200行 JavaScript 代码如何实现富文本编辑器

1
2
3

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

1

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14

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

1
2
3
4
5
6
7
8
9
10
11
12
13

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14

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

1
2
3
4
5
6
7
8
9
10

// 创建编辑区域的元素
settings.element.content = document.createElement('div')
// 让 div 成为可编辑状态
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)

1
2
3
4
5
6
7

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

1
2
3
4
5
6
7
8

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