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

少し前にリッチ テキスト エディターについての情報を探していたところ、Pell というプロジェクトを発見しました。これは、非常にシンプルな機能ですが、驚くべきものです。問題は、そのサイズがわずか 1kb であるということです。プロジェクトのコアファイルである pell.js は 130 行しかありません。他の部分を追加しても、js の総数は 200 行未満です。この記事では主に 200 行未満の JavaScript コードでリッチ テキスト エディタを実装する方法を紹介します。必要な方はぜひ参考にしてください。

プロジェクトのメインコードは pell.js ファイルにあり、その構造は非常に単純です。主要な関数の実装は次の部分に依存します

• actions object

• function

• 。

  init() 関数
  

Document.execCommand()

最も単純な部分から始めましょう。 exec() 関数には次の 3 行しかありません:

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

document.execCommand() の単純なラッパーを作成します。 , Document.execCommand() はこのエディターの中核です。その構文は次のとおりです

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

• aCommandName は、太字 'bold'、リンクの作成 'createLink'、などの文字列です。フォント サイズ 'fontSize' などを変更します。待機します

• aShowDefaultUI デフォルトのユーザー インターフェイスを表示するかどうか

• aValueArgument 一部のコマンドでは、画像やリンクの挿入などの追加入力が必要で、アドレスを指定する必要があります
  

注: 私の実験の後、Chrome では変更されました。aShowDefaultUI の値には影響は見つかりませんでした。この stackoverflow の質問では、これは古いバージョンの IE のパラメーターであるため、ここではデフォルトの false に設定できると述べられています。 。

actions オブジェクト

actions という名前のオブジェクトがファイル内に定義されています。これは、以下の図のツールバーのボタンの行に対応しており、アクションの各サブオブジェクトはボタンのプロパティを保存します。

コードの一部:

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

このコードは、太字、斜体、および下線という名前の 3 つのオブジェクト プロパティを示しています。これらは、ツールバーの前面にある太字、斜体、および下線のボタンに対応しています。同じで、すべて次の 3 つの属性があります:

• icon: 表示方法

• title: タイトルです

• result: クリックイベントとしてボタンに割り当てられる関数で、前へ 前述の exec() 関数は text を操作するために使用されます
  

アクションオブジェクトができたので、それをどのように使用するのでしょうか?これは init() 関数に依存し、特定のルールに従ってアクション オブジェクトから要素を選択し、配列内の各項目がボタンを生成します。以下のコードの settings.actions はこの配列であり、その各要素はツールバーに表示されるボタンに対応します。 settings.actionsの生成規則については後述する。

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

このようにして、配列内の各要素がツールバーにボタンを生成します。

init() 初期化関数

ペルエディタを使用したい場合は、init() 関数を呼び出してエディタを初期化するだけです。パラメーターとして設定オブジェクトを受け取ります。これには、次のようないくつかのプロパティが含まれます:

• element: エディターの DOM 要素

• styleWithCSS: true に設定すると、

アクション配列には次の要素を含めることができます:
文字列
name属性を持つオブジェクト

• 
  

  name属性を持たないが、ボタン、結果を生成するために必要な属性アイコンを持つオブジェクトなど。

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

プロセス構成

最後に、「リンクの挿入」を例としてエディタプロセス全体を整理します:

1. init()関数を呼び出すときに、パラメータオブジェクトのアクション配列に次の項目を追加します

// 创建编辑区域的元素
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)

2. init() の実行プロセス中に、定義されたアクション オブジェクトにリンク属性があるかどうかがチェックされます。チェックした結果、属性は存在します

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

受信パラメータには結果項目が含まれているため、受信結果を使用してリンク オブジェクトのデフォルト値が置き換えられ、変更されたリンク オブジェクトが settings.actions 配列に配置されます。

3. settings.actions 配列を反復処理してツールバーを生成します。リンク オブジェクトは、「リンクの挿入」ボタンを生成するための項目の 1 つとして使用されます。 result プロパティはそのクリック イベントになります。

4. [リンクの挿入] ボタンをクリックすると、URL を入力するよう求められ、exec('createLink', url) を呼び出して編集領域にリンクを挿入します。

エディターの他のボタンの機能プロセスも同様です。

このようにして、Pell エディターの内容のほとんどは説明されましたが、残りの部分についてはソース コードを参照する必要があります。結局のところ、プロジェクトのコードは長くないので、テキスト エディターの入門としては適しています。

関連する推奨事項: 画像透かし機能を追加する Baidu エディタ

4 つの使いやすい無料オンライン HTML エディタ

アイデアとコードの詳細を強調表示する入力ボックス エディタ構文の JavaScript 実装

以上がJavaScript リッチ テキスト エディターを実装する簡単な方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。