Squire の再訪: 効率的な HTML5 リッチテキストエディター-＆＃＆プレス-php.cn

ホームページ

CMS チュートリアル

＆＃＆プレス

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 16, 2023 pm 02:57 PM

重温 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 経由で操作できる単純な <textarea></textarea> コンポーネントです。

Squireの仕組み

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

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

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

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

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

従者を使用する

Squire に付属するデモアプリケーションを見てみましょう。 Squire を使用する場合、<textarea></textarea> 要素の代わりに <iframe src="path/to/document.html"></iframe> を使用できます。

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

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

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

<span id="bold">Bold</span>

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

<span id="setFontSize" class="prompt">字体大小</span>

演示应用程序如下所示：

演示页面顶部的 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 代码库

以上がSquire の再訪: 効率的な HTML5 リッチテキストエディターの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

2025年に開発者が使用できる5つのWordPressプラグインApr 27, 2025 am 08:25 AM

2025年のウェブサイト開発のための7つの必須ワードプレスプラグイン 2025年に一流のWordPress Webサイトを構築するには、速度、応答性、およびスケーラビリティが必要です。これを効率的に達成することは、しばしば戦略的なプラグインの選択にかかっています。この記事Highlig

WordPressは何のために使用しますか？Apr 27, 2025 am 12:14 AM

wordpresscanbeusedpurposesbeyondblogging.1）e-ocommerce：withwoocommerce、itcanbecomeafulloninestore.2）メンバーシップサイト：Pluginslikememberpressenable clusivecontentareas.3）ポートフォリオソイト：ThemeslikeasieasiestraololowStunnningStunnningStunnningStunnningStuntunnneDayOutssuntunnneaTuntunnnedrayOutuntuntuntunnnedraySuts

WordPressはポートフォリオWebサイトを作成するのに適していますか？Apr 26, 2025 am 12:05 AM

はい、wordpressisexcellentforcreatingportfoliowebsite.1）itoffers numersportfolio cilems like'astra'astra'foreasycustomization.2）プラグインエレメントレメントレディングの装飾、思想的な態度環境を

Webサイトをゼロからコーディングする上でWordPressを使用することの利点は何ですか？Apr 25, 2025 am 12:16 AM

wordpressisadvasteousovercodingawebsitefromscratchdueto：1）easeofuseandfasterdevelopment、2）柔軟性と吸収性、3）strongCommunitySupport、4）組み込みインセンアンドマークティングツール、5）費用対効果、6）レシュリティアップデート

WordPressがコンテンツ管理システムになっている理由は何ですか？Apr 24, 2025 pm 05:25 PM

wordpressisacmsduetoitseaseaseofuse、customization、usermanagement、seo、andcommunitysupport.1）ofssextensiveationization throughthemesandplugins.3）ofsiscontensiveativeizationization withintentmanagement withintententmanagement with inting ustomization.3）revisustusersandpermissions.4）拡張型を提供します

WordPressにコメントボックスを追加する方法Apr 20, 2025 pm 12:15 PM

WordPress Webサイトでコメントを有効にして、訪問者にディスカッションに参加し、フィードバックを共有するプラットフォームを提供します。これを行うには、次の手順に従ってください。コメントを有効にします。ダッシュボードで、設定に移動してgt;議論し、[コメントを許可]チェックボックスを選択します。コメントフォームの作成：エディターで、[ブロックの追加]をクリックし、コメントブロックを検索してコンテンツに追加します。カスタムコメントフォーム：タイトル、ラベル、プレースホルダー、ボタンテキストを設定して、コメントブロックをカスタマイズします。変更を保存します：[更新]をクリックしてコメントボックスを保存し、ページまたは記事に追加します。