重溫 Squire：高效率的 HTML5 富文本編輯器-＆＃＆按-PHP中文網

首頁

CMS教程

＆＃＆按

重溫 Squire：高效率的 HTML5 富文本編輯器

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 16, 2023 pm 02:57 PM

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

什麼是 Squire？

Squire 是一款極其輕量級的 HTML5 富文本編輯器，最適合您應用程式的豐富輸入表單和簡單的文件建立。它提供跨瀏覽器支持，但刻意避免支援舊版瀏覽器的複雜性。它在 Opera 10、Firefox 3.5、Safari 4、Chrome 9 和 IE8 上運行效果最佳。

Squire 不適用於建立和編輯所見即所得的網站頁面。然而，對於許多富文本輸入和網頁應用程式來說，Squire 可能正是您所需要的。它提供了不臃腫的力量。它還獲得了麻省理工學院的許可，可以靈活重複使用。

在本教學中，我將向您展示如何下載 Squire 並使用它建立範例輸入表單。如果您想了解 Squire 的實際應用，請造訪示範。

鄉紳從哪裡來？

FastMail 團隊建立了 Squire 來簡化他們的網頁郵件編輯器要求。 FastMail 是 Gmail 的優秀基於雲端的電子郵件替代方案 — 我是 FastMail 的日常用戶。由於它的總部位於澳大利亞，並且根據與美國不同的法律運營，因此 FastMail 用戶的隱私保護略有改善。您可以在這裡閱讀更多相關資訊：FastMail 稱其不受 NSA 監視。

正如 FastMail 團隊在他們的部落格中所寫，他們之前使用過 CKeditor：

雖然不是一個糟糕的選擇，但像大多數其他編輯器一樣，它是為創建網站而不是編寫電子郵件而設計的。因此，預設情況下，簡單地插入圖像就會出現一個包含三個選項卡和比您想像的更多選項的對話框...它還附帶了自己的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 包裝器、小部件庫或燈箱覆蓋層。工具列沒有使用者介面，這消除了載入兩個 UI 工具包帶來的臃腫。這只是一個簡單的 <textarea></textarea> 元件，可以透過 JavaScript 來操作。

Squire 的工作原理

Squire 使用選擇和範圍 API 來操作 DOM。這消除了常見的跨瀏覽器不相容性。再次來自 FastMail 部落格：

製作富文本編輯器是出了名的困難，因為不同的瀏覽器在這方面極不一致。這些 API 都是 Microsoft 在 IE 全盛時期引入的，然後被其他供應商以各種不相容的方式複製......大多數富文本編輯器執行命令，然後嘗試清理瀏覽器創建的混亂。有了 Squire，我們就巧妙地繞過了這個問題。

Squire 的整體理念是允許瀏覽器做盡可能多的事情（不幸的是不是很多），但在任何偏離要求的地方進行控制，或者存在顯著的跨瀏覽器差異。

安裝 Squire
其次，將 build/ 目錄的內容複製到您的應用程式中。 p>

第三，編輯 document.html 中的 <style></style> 區塊以新增您希望編輯器使用的預設樣式（或連結到外部樣式表）。

使用 Squire

讓我們來看看 Squire 附帶的演示應用程式。使用 Squire 時，您可以使用 <iframe src="path/to/document.html"></iframe>，而不是 <textarea></textarea> 元素。

在示範中：
<iframe src="build/document.html" onload="top.editor=this.contentWindow.editor" width="500" height="500"></iframe>
Document.html 是一個具有預設樣式的空白畫布，它會載入 Squire：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<style type="text/css">
...
  a {
    text-decoration: underline;
  }
  h1 {
    font-size: 138.5%;
  }
...
  blockquote {
    border-left: 2px solid blue;
    margin: 0;
    padding: 0 10px;
  }
</style>
</head>
<body>
<script type="text/javascript" src="squire.js"></script>
</body>
</html>
使用 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中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

WordPress是否需要編碼知識作為CMS？Apr 30, 2025 am 12:03 AM

你不需要編程知識就能使用WordPress，但掌握編程可以提升體驗。 1)使用CSS和HTML可以調整主題樣式。 2)PHP知識能編輯主題文件，添加功能。 3)自定義插件和元標籤可優化SEO。 4)注意備份和使用子主題以防更新問題。

使用WordPress時的安全考慮是什麼？Apr 29, 2025 am 12:01 AM

TosecureaWordPresssite,followthesesteps:1)RegularlyupdateWordPresscore,themes,andpluginstopatchvulnerabilities.2)Usestrong,uniquepasswordsandenabletwo-factorauthentication.3)OptformanagedWordPresshostingorsecuresharedhostingwithawebapplicationfirewal

WordPress與其他網站構建者相比如何？Apr 28, 2025 am 12:04 AM

WordPressExcelSoverotherWeberSiteBuilderSduetoItsflexible，可伸縮性，andopen-sourcenature.1）它'saversatilecmswithExtEnsextEnsexenSiveCustomizedOptionsVIATHEMESANDPLUGINS.2）它的alllearbutoffersbutoffersbutoffersbutoffersbutefersbuterbutfulcontrololoncemastered.3）

5個WordPress插件，供開發人員在2025年使用Apr 27, 2025 am 08:25 AM

2025年網站開發的七個必備WordPress插件在2025年建立頂級WordPress網站需要速度，響應能力和可擴展性。實現這種有效的實現通常取決於戰略插件的選擇。這篇文章Highlig

您將使用WordPress做什麼？Apr 27, 2025 am 12:14 AM

WordPresscanbeusedforvariouspurposesbeyondblogging.1)E-commerce:WithWooCommerce,itcanbecomeafullonlinestore.2)Membershipsites:PluginslikeMemberPressenableexclusivecontentareas.3)Portfoliosites:ThemeslikeAstraallowstunninglayouts.Ensuretomanageplugins

WordPress適合創建投資組合網站嗎？Apr 26, 2025 am 12:05 AM

是的，wordpressisisexcellentforcortingaportfoliowebsite.1）itoffersnumeroversnumeroverportfolio-spificthemeslike'astra'astra'astra'astra'astra'astra'astra'astra'astra'elementor'Enelementor'enableIntiviveSiveSign，Thoughtemanycanslowthesite.3）

使用WordPress而不是從頭開始編碼網站的優點是什麼？Apr 25, 2025 am 12:16 AM

WordPressisadvantageousovercodingawebsitefromscratchdueto:1)easeofuseandfasterdevelopment,2)flexibilityandscalability,3)strongcommunitysupport,4)built-inSEOandmarketingtools,5)cost-effectiveness,and6)regularsecurityupdates.Thesefeaturesallowforquicke

是什麼使WordPress成為內容管理系統？Apr 24, 2025 pm 05:25 PM

WordPressIsAcmsDuetoItseAsofuse，自定義，USERMANAMECTION，SEO和COMMUNITYSUPPORT.1）ITSIMPLIFIESCONTENTMANGAMEWITHANINTUISIDERFEEFFECE.2）提供extentensiveCustomizationThroughThroughTheMesandPlugins.3）supportrobustuserrolesandplugins.4）supportrobustuserrolesandpermissions.4）增強

See all articles