テキストリッチテキストエディタを取得

簡単な紹介

リッチテキストエディタは、有効webページを、のようなword、のような、通常はいくつかのより多くのテキスト処理システムで使用されるテキストの編集を実現します。今、業界では、このようなフル機能のAHとして成熟したリッチテキストエディタ、多くの持っているのTinyMCE、軽量かつ効率的wangEditorを、Baiduは生産UEditorをというように。多くのリッチテキストエディタが、リッチテキストエディタを達成するために、ゼロからスタートする方法についていくつか考えてみてください。最初からこの紙簡潔には、単純なリッチテキストエディタを実装する方法。

基本的な使用

一般的なHTMLラベルは、コンテンツのフォーマットせずに、一般的にのみ形成されている入力、フォーム入力プレーンテキストであってもよいです。フォームにリッチテキストに対しては、....太字、フォント色、背景として、入力されたテキストに、いくつかのカスタムコンテンツのスタイルを追加することができますリッチテキストは、主のようなHTMLタグにdiv追加するcontenteditableプロパティを、プロパティの所有HTMLラベルは、ラベルは、コンテンツにもカスタムの編集を実装することができます。最も単純なリッチテキストエディタは次のとおりです。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
     
</head>
<body>
    <div id="app" style="width: 200px;height: 200px;background-color: antiquewhite;" contenteditable='true'></div>
</body>
</html>

基本操作

Wordに似たリッチテキスト、太字テキストなどのテキストを、操作するための多くのオプションは、段落のインデントは、背景色を追加し、そこにある、使用が不可欠、実行するだけ必要であるdocument.execCommand(aCommandName, aShowDefaultUI, aValueArgument)、aCommandNameあるコマンド名、、ユーザーインターフェイスを表示するかどうか、一般的。Mozillaは具体化しませんでした。、追加のパラメータ、通常は。aShowDefaultUI
BooleanfalseaValueArgumentnull

基本操作コマンド

以下は、簡単な操作リッチテキストコマンドのいくつかの例であり、いくつかの例は、単純なを使用して以下に示します。

コマンド	値	説明
背景色	色文字列	文書の背景色を設定します。
大胆な	ヌル	太字選択したテキスト
CREATELINK	URL文字列	指定されたURLへのリンクに、選択したテキストを変換するには
インデント	ヌル	インデントテキスト
コピー	ヌル	クリップボードに選択したテキストをコピーします
切る	ヌル	クリップボードに切り取り選択したテキスト
inserthorizontalrule	ヌル	挿入要素の文字の挿入時間

例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
    <!-- https://electronjs.org/docs/tutorial/security#csp-meta-tag -->
    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
    <style>
      html, body{
          width: 100%;
          height: 100%;
          padding: 0;
          margin: 0;
      }
      #app{
          display: flex;
          flex-direction: column;
          justify-content: flex-start;
          width: calc(100% - 100px);
          height: calc(100% - 100px);
          padding: 50px;
      }

      .operator-menu{
          display: flex;
          justify-content: flex-start;
          align-items: center;
          width: 100%;
          min-height: 50px;
          background-color: beige;
          padding: 0 10px;
      }
      .edit-area{
          width: 100%;
          min-height: 600px;
          background-color: blanchedalmond;
          padding: 20px;
      }
      .operator-menu-item{
          padding: 5px 10px;
          background-color: cyan;
          border-radius: 10px;
          cursor: pointer;
          margin: 0 5px;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div class="operator-menu">
        <div class="operator-menu-item" data-fun='fontBold'>加粗</div>
        <div class="operator-menu-item" data-fun='textIndent'>缩进</div>
        <div class="operator-menu-item" data-fun='inserthorizontalrule'>插入分隔符</div>
        <div class="operator-menu-item" data-fun='linkUrl'>链接百度</div>
      </div>
      <div class="edit-area" contenteditable="true"></div>
    </div>
    <script>
      let operationItems = document.querySelector('.operator-menu')
      // 事件监听采用mousedown,click事件会导致富文本编辑框失去焦点
      operationItems.addEventListener('mousedown', function(e) {
        let target = e.target
        let funName = target.getAttribute('data-fun')
        if (!window[funName]) return
        window[funName]()
        // 要阻止默认事件，否则富文本编辑框的选中区域会消失
        e.preventDefault()
      })

      function fontBold () {
        document.execCommand('bold')
      }
      function textIndent () {
        document.execCommand('indent')
      }
      function inserthorizontalrule () {
        document.execCommand('inserthorizontalrule')
      }
      function linkUrl () {
        document.execCommand('createlink', null, 'www.baidu.com')
      }
    </script>
  </body>
</html>

テキストの選択範囲

リッチテキスト、テキストの選択範囲とテキスト選択の非常に強力な手段である、我々は選択したテキストのためにいくつかのカスタム設定を行うことができます。コアは、2つのオブジェクトであるSelectionとRangeオブジェクト。公式声明との比較がされているSelectionオブジェクトが表されるテキストカーソルの現在の位置又は範囲ユーザ選択、Rangeオブジェクトが表すノードとテキストノードを含む文書フラグメントの部分を。簡単に言えば、Selectionページを参照して、我々を選択するためにマウスのすべての領域は、Range多くの関係に属し、単一の領域を選択するために、私たちのマウスでページを参照してください。たとえば、私たちは現在のページの選択オブジェクトを取得したい、あなたが呼び出すことができvar selection = window.getSelection()ますが、最初のテキスト選択情報を取得したい場合、あなたが呼び出すことができ、var rang = selection.getRangeAt(0)情報の使用を取得するには、テキストの選択をrange.toString()。
テキストの選択や範囲、より古典的な、の使用であるフィルタを貼り付けるリッチテキスト形式で。私たちは、リッチテキストエディタにテキストをコピーする場合、これは元の形式を保持します、我々はプレーンテキストのみを残して、デフォルトの書式のコピーを削除するのであれば、どのように動作しますか？
この問題に対処するブロガーは、最初に考えたのは、あなたがイベントを貼り付けるために聞くことができ(paste)ますが、テキストを貼り付けると、クリップボードの内容を置き換えます。それは、ピット内でも、クリップボードの貼り付け操作は力ではありません。機能要件、初期の用途の実装では、通常の試合を、HTMLタグを削除します。しかし、テキスト形式は、奇妙な文字の多くの場合、すべての種類の、より多くの問題点を変化させますが、大きなテキスト、ページのパフォーマンスの問題をコピーするとき、これは良い方法ではないので、本当に後になるまで理解してテキスト範囲と選択、この設定、おいしいを見つけるためにのみ。
次のように一般的なアイデアのリッチテキスト選択処理ロジックは次のとおりです。

テキストイベントリスナーを貼り付け
デフォルトのイベントを防ぐ（ブラウザのデフォルトのコピー操作を防止するために）
コピー平文を取得します。
ページのテキストの選択を取得します。
削除選択したテキストの選択
テキストノードを作成します。
選挙へのTextノード
コピーしたテキストの末尾にフォーカスを移動

次のようにサンプルコードは次のとおりです。

let $editArea = document.querySelector('.edit-area')
$editArea.addEventListener('paste', e => {
    // 阻止默认的复制事件
    e.preventDefault()
    let txt = ''
    let range = null
    // 获取复制的文本
    txt = e.clipboardData.getData('text/plain')
    // 获取页面文本选区
    range = window.getSelection().getRangeAt(0)
    // 删除默认选中文本
    range.deleteContents()
    // 创建一个文本节点，用于替换选区文本
    let pasteTxt = document.createTextNode(txt)
    // 插入文本节点
    range.insertNode(pasteTxt)
    // 将焦点移动到复制文本结尾
    range.collapse(false)
})

参考資料

may_walkaway

184元記事公開・ウォンの賞賛141 ・ビューに35万+を

プライベートの手紙の懸念