Meninjau Semula Squire: editor teks kaya HTML5 yang cekap-WordTekan-php.cn

Rumah

Tutorial CMS

WordTekan

Meninjau Semula Squire: editor teks kaya HTML5 yang cekap

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 16, 2023 pm 02:57 PM

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

Apa itu Squire?

Squire ialah editor teks kaya HTML5 yang sangat ringan, paling sesuai untuk borang input yang kaya dan penciptaan dokumen ringkas untuk aplikasi anda. Ia menyediakan sokongan silang pelayar tetapi sengaja mengelakkan kerumitan menyokong pelayar lama. Ia berfungsi paling baik pada Opera 10, Firefox 3.5, Safari 4, Chrome 9 dan IE8.

Squire tidak sesuai untuk mencipta dan mengedit halaman laman web WYSIWYG. Walau bagaimanapun, untuk banyak input teks yang kaya dan aplikasi web, Squire mungkin hanya apa yang anda perlukan. Ia memberikan kuasa tanpa kembung. Ia juga dilesenkan daripada MIT untuk kegunaan semula yang fleksibel.

Dalam tutorial ini, saya akan menunjukkan kepada anda cara memuat turun Squire dan menggunakannya untuk membina borang input sampel. Jika anda ingin melihat Squire beraksi, lawati demo.

Dari mana datangnya squire?

Pasukan FastMail membina Squire untuk memudahkan keperluan editor mel web mereka. FastMail ialah alternatif e-mel berasaskan awan yang sangat baik untuk Gmail — saya pengguna FastMail setiap hari. Memandangkan ia berpangkalan di Australia dan beroperasi di bawah undang-undang yang berbeza daripada Amerika Syarikat, perlindungan privasi pengguna FastMail dipertingkatkan sedikit. Anda boleh membaca lebih lanjut mengenainya di sini: FastMail mengatakan ia tidak tertakluk kepada pengawasan NSA.

Semasa pasukan FastMail menulis dalam blog mereka, mereka telah menggunakan CKeditor sebelum ini:

Walaupun bukan pilihan yang buruk, seperti kebanyakan editor lain, ia direka untuk membuat tapak web dan bukannya menulis e-mel. Jadi secara lalai, hanya dengan memasukkan imej memaparkan dialog dengan tiga tab dan lebih banyak pilihan daripada yang anda bayangkan... Ia juga dilengkapi dengan kit alat dan rangka kerja UI sendiri yang kita perlu. UI baharu yang kami bina;

Memandangkan kami mementingkan kelajuan dan prestasi, kami juga mengambil berat tentang saiz kod. Versi CKEditor yang kami gunakan untuk UI (klasik) sebelumnya hanya menyertakan pemalam yang kami perlukan dan merupakan muat turun 159 KB (gzip; 441 KB tidak dimampatkan). Ini adalah kod sahaja, gaya dan imej tidak disertakan.

Mereka memutuskan untuk membina Squire dari awal. Dengan saiz JavaScript yang dimampatkan dan digzip hanya 11.5 KB (34.7 KB tidak dimampatkan) dan tiada kebergantungan, Squire sangat ringan.

Hasilnya sangat mengagumkan. Berat kod gabungan yang diperlukan untuk memuatkan keseluruhan skrin karang, perpustakaan asas, mel dan kod model kenalan, dan semua kod UI untuk memaparkan keseluruhan skrin kini hanya 149.4 KB (459.7 KB tidak dimampatkan), yang lebih kecil daripada CKEditor sahaja.

Squire tidak mempunyai kebergantungan. Tiada pembungkus XHR, perpustakaan widget atau tindanan peti cahaya. Bar alat tidak mempunyai antara muka pengguna, yang menghilangkan kelebihan yang datang dengan memuatkan dua kit alat UI. Ini hanyalah komponen <textarea></textarea> mudah yang boleh dimanipulasi melalui JavaScript. <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"
Cara Squire berfungsi

Squire menggunakan API pemilihan dan julat untuk memanipulasi DOM. Ini menghapuskan ketidakserasian silang pelayar biasa. Sekali lagi dari Blog FastMail: 🎜 🎜Membuat editor teks yang kaya amat sukar, kerana pelayar yang berbeza sangat tidak konsisten dalam hal ini. Semua API ini telah diperkenalkan oleh Microsoft semasa zaman kegemilangan IE dan kemudian disalin oleh vendor lain dalam pelbagai cara yang tidak serasi... Kebanyakan editor teks kaya melaksanakan arahan dan kemudian cuba membersihkan kucar-kacir yang dibuat oleh penyemak imbas. Dengan Squire, kami memintas masalah ini dengan kemas. 🎜 🎜Idea umum Squire adalah untuk membenarkan penyemak imbas melakukan sebanyak mungkin (malangnya tidak banyak), tetapi mengawal apa-apa yang menyimpang daripada apa yang diperlukan, atau di mana terdapat perbezaan merentas pelayar yang ketara. 🎜 🎜 🎜Pasang Squire🎜 🎜Kedua , salin kandungan direktori build/ ke dalam aplikasi anda. 🎜Ketiga, edit blok <style></style> dalam document.html untuk menambah gaya lalai yang anda mahu editor gunakan ( atau pautan ke helaian gaya luaran). 🎜 🎜Gunakan Squire🎜 🎜Mari kita lihat apl demo yang disertakan dengan Squire. Apabila menggunakan Squire, anda boleh menggunakan <iframe src="path/to/document.html"></iframe> dan bukannya <textarea> /kod> elemen. 🎜 🎜Dalam demo:🎜 <pre class='brush:php;toolbar:false;'><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> </pre> 🎜<code class="inline">Document.html ialah kanvas kosong dengan gaya lalai yang memuatkan Squire: 🎜
  <p>
  <a href="#" onclick="alert(editor['getSelectedText']());">get selection</a> | 
  <a href="#" onclick="alert(editor['getDocument']());">get doc</a>
  </p>
</header>
🎜Apabila menggunakan Squire, anda boleh melampirkan pendengar acara pada acara pemuatan iframe. Apabila acara ini berlaku, anda boleh mendapatkan rujukan kepada objek editor melalui iframe.contentWindow.editor. Contohnya, iframe demo termasuk: 🎜 🎜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 代码库

Atas ialah kandungan terperinci Meninjau Semula Squire: editor teks kaya HTML5 yang cekap. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel Berkaitan

Bolehkah saya belajar WordPress dalam 3 hari?Apr 09, 2025 am 12:16 AM

Boleh belajar WordPress dalam masa tiga hari. 1. Menguasai pengetahuan asas, seperti tema, pemalam, dan lain-lain. 2. Memahami fungsi teras, termasuk prinsip pemasangan dan kerja. 3. Belajar penggunaan asas dan lanjutan melalui contoh. 4. Memahami teknik debugging dan cadangan pengoptimuman prestasi.

Adakah WordPress CMS?Apr 08, 2025 am 12:02 AM

WordPress adalah sistem pengurusan kandungan (CMS). Ia menyediakan pengurusan kandungan, pengurusan pengguna, tema dan keupayaan pemalam untuk menyokong penciptaan dan pengurusan kandungan laman web. Prinsip kerja termasuk pengurusan pangkalan data, sistem templat dan seni bina pemalam, sesuai untuk pelbagai keperluan dari blog ke laman web korporat.

Apa yang baik untuk WordPress?Apr 07, 2025 am 12:06 AM

WordpressisgoodforvirtualyWebprojectduetoitsversatilityasacms.itexcelsin: 1) keramahan pengguna, membolehkan mudah

Sekiranya saya menggunakan Wix atau WordPress?Apr 06, 2025 am 12:11 AM

Wix sesuai untuk pengguna yang tidak mempunyai pengalaman pengaturcaraan, dan WordPress sesuai untuk pengguna yang mahukan lebih banyak keupayaan kawalan dan pengembangan. 1) Wix menyediakan editor drag-and-drop dan templat yang kaya, menjadikannya mudah untuk membina sebuah laman web dengan cepat. 2) Sebagai CMS sumber terbuka, WordPress mempunyai ekosistem komuniti dan plug-in yang besar, menyokong penyesuaian dan pengembangan yang mendalam.

Berapakah kos WordPress?Apr 05, 2025 am 12:13 AM

WordPress sendiri adalah percuma, tetapi kos tambahan untuk digunakan: 1. WordPress.com menawarkan pakej dari percuma hingga dibayar, dengan harga dari beberapa dolar sebulan hingga berpuluh -puluh dolar; 2. WordPress.org memerlukan membeli nama domain (10-20 dolar AS setahun) dan perkhidmatan hosting (5-50 dolar AS sebulan); 3. Kebanyakan pemalam dan tema adalah percuma, dan harga berbayar adalah antara berpuluh-puluh dan beratus-ratus dolar; Dengan memilih perkhidmatan hosting yang betul, menggunakan plug-in dan tema yang munasabah, dan mengekalkan dan mengoptimumkan secara teratur, kos WordPress dapat dikawal dan dioptimumkan dengan berkesan.

Adakah WordPress masih percuma?Apr 04, 2025 am 12:06 AM

Versi teras WordPress adalah percuma, tetapi yuran lain mungkin ditanggung semasa penggunaan. 1. Nama domain dan perkhidmatan hosting memerlukan pembayaran. 2. Tema lanjutan dan pemalam boleh dikenakan. 3. Perkhidmatan profesional dan ciri -ciri canggih boleh dikenakan.

Adakah WordPress mudah untuk pemula?Apr 03, 2025 am 12:02 AM

WordPress mudah untuk pemula bermula. 1. Selepas log masuk ke latar belakang, antara muka pengguna adalah intuitif dan papan pemuka mudah menyediakan semua pautan fungsi yang diperlukan. 2. Operasi asas termasuk mencipta dan mengedit kandungan. Editor WYSIWYG memudahkan penciptaan kandungan. 3. Pemula boleh mengembangkan fungsi laman web melalui pemalam dan tema, dan lengkung pembelajaran wujud tetapi boleh dikuasai melalui amalan.

Mengapa ada yang menggunakan WordPress?Apr 02, 2025 pm 02:57 PM

Orang memilih untuk menggunakan WordPress kerana kuasa dan fleksibiliti. 1) WordPress adalah CMS sumber terbuka dengan kemudahan penggunaan dan skalabiliti yang kuat, sesuai untuk pelbagai keperluan laman web. 2) Ia mempunyai tema dan plugin yang kaya, ekosistem yang besar dan sokongan komuniti yang kuat. 3) Prinsip kerja WordPress adalah berdasarkan tema, pemalam dan fungsi teras, dan menggunakan PHP dan MySQL untuk memproses data, dan menyokong pengoptimuman prestasi.

See all articles