JavaScript リッチ テキスト エディターを実装する簡単な方法

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

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

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

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

actions: [
 'bold',
 'underline',
 'italic',
 {
  name: 'image',
  result: ()=> {
   const url = window.prompt('Enter the image URL')
   if (url) window.pell.exec('insertImage', ensureHTTP(url))
  }
 },
 // ...
]</p>
<p> は、このアクション パラメーターを init() 関数の pell.js で定義されたアクション オブジェクトと組み合わせます。アクション オブジェクトをデフォルト設定として使用できます。次のコードを参照してください。パラメータ オブジェクト設定にアクション配列が含まれていない場合、以前に定義されたアクション オブジェクトを使用してデフォルトで初期化されます。 </p>
<ul class=" list-paddingleft-2"> init() 関数の重要な部分は、編集可能領域を作成することです。ここでは、p 要素が作成され、その contentEditable 属性が true に設定されているため、前述の document.execCommand() がここで使用できるようになります。 <li>
<pre class="brush:php;toolbar:false">// 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])