ホームページ > 記事 > CMS チュートリアル > Squire の再訪: 効率的な HTML5 リッチテキストエディター

Squire の再訪: 効率的な HTML5 リッチテキストエディター

WBOYオリジナル: 2023-09-16 14:57:021464ブラウズ

重温 Squire：高效的 HTML5 富文本编辑器

スクワイアとは何ですか?

Squire は非常に軽量な HTML5 リッチテキストエディターであり、アプリケーションのリッチな入力フォームやシンプルなドキュメントの作成に最適です。クロスブラウザーのサポートを提供しますが、古いブラウザーのサポートに伴う複雑さを意図的に回避しています。 Opera 10、Firefox 3.5、Safari 4、Chrome 9、IE8 で最適に動作します。

Squire は、WYSIWYG Web サイトページの作成および編集には適していません。ただし、多くのリッチテキスト入力や Web アプリケーションでは、Squire がまさに必要なものかもしれません。膨張することなくパワーを提供します。また、柔軟な再利用のために MIT からライセンスを受けています。

このチュートリアルでは、Squire をダウンロードし、それを使用してサンプル入力フォームを作成する方法を説明します。 Squire の動作を確認したい場合は、デモにアクセスしてください。

従者はどこから来たのですか?

FastMail チームは、Web メールエディタの要件を簡素化するために Squire を構築しました。 FastMail は、Gmail に代わる優れたクラウドベースの電子メールです。私は毎日 FastMail を使用しています。 FastMail はオーストラリアに拠点を置き、米国とは異なる法律に基づいて運営されているため、FastMail ユーザーのプライバシー保護は若干強化されています。詳細については、ここで読むことができます: FastMail は、NSA の監視の対象ではないと述べています。

FastMail チームがブログで書いているように、彼らは以前に CKeditor を使用したことがあります:

悪い選択ではありませんが、他のほとんどのエディタと同様に、電子メールを書くのではなく、Web サイトを作成するために設計されています。そのため、デフォルトでは、画像を挿入するだけで、3 つのタブと想像以上に多くのオプションを備えたダイアログが表示されます...また、必要な独自の UI ツールキットとフレームワークも付属しています。残りの部分に適合させるには、多くのカスタマイズが必要でした。新しい UI を構築していたため、メンテナンスが大変でした。

速度とパフォーマンスを重視するため、コードサイズも重視します。以前の (クラシック) UI に使用した CKEditor のバージョンには、必要なプラグインのみが含まれており、ダウンロードは 159 KB (gzip 圧縮、非圧縮では 441 KB) でした。これはコードのみであり、スタイルや画像は含まれません。

彼らは Squire をゼロから構築することにしました。圧縮および gzip 圧縮された JavaScript のサイズはわずか 11.5 KB (非圧縮時は 34.7 KB) で、依存関係がないため、Squire は非常に軽量です。

結果は素晴らしいものでした。作成画面全体、ベースライブラリ、メールおよび連絡先モデルコード、および画面全体をレンダリングするためのすべての UI コードをロードするために必要な合計コード重量は、わずか 149.4 KB (非圧縮では 459.7 KB) となり、CKEditor 単体よりも小さくなります。

Squire には依存関係がありません。 XHR ラッパー、ウィジェットライブラリ、ライトボックスオーバーレイはありません。ツールバーにはユーザーインターフェイスがないため、2 つの UI ツールキットのロードに伴う肥大化が解消されます。これは、JavaScript 経由で操作できる単純な 4750256ae76b6b9d804861d8f69e79d3 コンポーネントです。

Squireの仕組み

Squire は選択 API と範囲 API を使用して DOM を操作します。これにより、一般的なブラウザ間の非互換性が排除されます。再び FastMail ブログから:

リッチテキストエディターの作成は、ブラウザーによってこの点で非常に一貫性がないため、非常に難しいことで知られています。これらの API はすべて、IE の全盛期に Microsoft によって導入され、その後、互換性のないさまざまな方法で他のベンダーによってコピーされました。ほとんどのリッチテキストエディターはコマンドを実行し、ブラウザーが作成した混乱をクリーンアップしようとします。 Squire を使用すると、この問題をうまく回避できます。

Squire の一般的な考え方は、ブラウザーにできる限りのこと (残念ながら多くはありません) を許可しますが、必要な機能から逸脱するものや、ブラウザー間で大きな違いがある場合は制御することです。

Squire のインストール
2 番目に、build/ ディレクトリの内容をアプリケーションにコピーします。 p>

3 番目に、document.html の c9ccee2e6ea535a969eb3f532ad9fe89 ブロックを編集して、エディターで使用する (または外部スタイルシートにリンクする) デフォルトのスタイルを追加します。

従者を使用する

Squire に付属するデモアプリケーションを見てみましょう。 Squire を使用する場合、4750256ae76b6b9d804861d8f69e79d3 要素の代わりに 99d78fe265c29dea40d4f5b20d97044c を使用できます。

デモの場合:
リーリー
Document.html は、Squire をロードするデフォルトのスタイルを備えた空のキャンバスです:
リーリー
Squire を使用する場合、iframe のロードイベントにイベントリスナーをアタッチできます。このイベントが発生すると、iframe.contentWindow.editor を介してエディターオブジェクトへの参照を取得できます。たとえば、デモ iframe には次のものが含まれます:

onload="top.editor=this.contentWindow.editor"

该演示有两种类型的链接，用于在 Squire 中操作内容。可以对任何选定文本进行操作的简单命令如下所示：

6198752c71ab262db5c7ea2a620d0408Bold54bdf357c58b8a65c66d7c19c8e4d114

需要额外用户输入的复杂命令如下所示；他们添加了提示符 c:

5bd9f17dd3b368543cade77b644988c2字体大小54bdf357c58b8a65c66d7c19c8e4d114

演示应用程序如下所示：

演示页面顶部的 JavaScript 侦听对这些 span 命令的任何点击。如果提示类存在，它会从用户收集更多信息：
<script type="text/javascript" charset="utf-8">
var editor;
document.addEventListener( 'click', function ( e ) {
  var id = e.target.id,
      value;
  if ( id && editor && editor[ id ] ) {
    if ( e.target.className === 'prompt' ) {
      value = prompt( 'Value:' );
    }
    editor[ id ]( value );
  }
}, false );
</script>
然后，它使用命令和任何用户提供的值调用 Squire 编辑器。然后，Squire 将命令应用于当前选定的文本：

编辑器[ id ]( value );

您可以了解有关 Squire 的更多信息，并在自述文件中查看其完整的 API 文档。

扩展演示

作为示例，让我们添加两个读取 Squire 编辑器状态的命令。我们将在演示命令标题的底部添加两个链接：
  <p>
  <a href="#" onclick="alert(editor['getSelectedText']());">get selection</a> | 
  <a href="#" onclick="alert(editor['getDocument']());">get doc</a>
  </p>
</header>
当您选择某些文本并单击它时，所选内容将在警报中弹出，如下所示。

让我们来看看更美观的演示及其工具栏：

此页面的头块集成了 Bootstrap 的样式表和名为 Squire-UI 的样式表。它还为此 Squire-UI 提供 JavaScript。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta charset="UTF-8">
    <title>Squire</title>
    
    <link href='//fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>

    <link href="build/Squire-UI.css" rel="stylesheet" type="text/css" />
    <link href="build/bootstrap/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <script src="build/jQuery/jQuery.js" type="text/javascript"></script>
    <script src="build/squire-raw.js" type="text/javascript"></script>
    <script src="build/Squire-UI.js" type="text/javascript"></script>

It also offers static html for a textarea in the body
<div class="container">
    <div class="row">
        <div class="col-centered">
           <textarea id="foo"></textarea>
        </div>
    </div>
但在加载时，其 JQuery $(document).ready 函数将静态 #foo 文本区域替换为其 SquireUI。
    <script>
    $(document).ready(function () {
      UI = new SquireUI({replace: 'textarea#foo', height: 300});
    });
    </script>
工具栏配置是通过相当复杂的 JQuery、AJAX、HTML5 和 CSS 配置来实现的。它正在加载此 HTML 页面以显示大部分工具栏：http://neilj.github.io/Squire/build/Squire-UI.html。
$(div).load(options.buildPath + 'Squire-UI.html', function() {
      this.linkDrop = new Drop({
        target: $('#makeLink').first()[0],
        content: $('#drop-link').html(),
        position: 'bottom center',
        openOn: 'click'
      });
以下是 Squire-UI.html 源代码的子集，以便您可以查看正在加载的内容：
<div class="menu" contenteditable="false">
    <div class="group">
        <div data-action="bold"  class="item"><i class="fa fa-bold"></i></div>
        <div data-action="italic"  class="item"><i  class="fa fa-italic"></i></div>
        <div data-action="underline"  class="item"><i class="fa fa-underline"></i></div>
        <div id="selectFont" data-action="selectFont"  class="item">
            <i class="fa fa-font"></i>
        </div>
    </div>
    <div class="group">
        <div id="makeLink" data-action="makeLink" class="item"><i class="fa fa-link"></i></div>
        <div data-action="makeOrderedList"  class="item"><i class="fa fa-list"></i></div>
        <div id="insertImage" data-action="insertImage"  class="item">
            <i class="fa fa-picture-o"></i>
        </div>
        <div data-action="increaseQuoteLevel"  class="item"><i class="fa fa-quote-right"></i></div>
    </div>
...
如果他们在分发代码中提供简化的 Bootstrap 工具栏作为附加组件，那就太好了，但您当然可以从他们在上面自己的演示中所做的事情中学习。

我希望您发现 Squire 对您自己的应用程序很有用。请随时在下面发表更正、问题或评论。您还可以通过 Twitter @reifman 联系我或直接向我发送电子邮件。

相关链接

Squire：FastMail 的富文本编辑器

Squire演示页面

Github 上的 Squire 代码库