Rumah >Tutorial CMS >WordTekan >Meninjau Semula Squire: editor teks kaya HTML5 yang cekap
Meninjau Semula Squire: editor teks kaya HTML5 yang cekap
- WBOYasal
- 2023-09-16 14:57:021558semak imbas
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 4750256ae76b6b9d804861d8f69e79d3 mudah yang boleh dimanipulasi melalui JavaScript. 4750256ae76b6b9d804861d8f69e79d3 组件，可以通过 JavaScript 进行操作。
Squire 的工作原理
Squire 使用选择和范围 API 来操作 DOM。这消除了常见的跨浏览器不兼容性。再次来自 FastMail 博客：
制作富文本编辑器是出了名的困难，因为不同的浏览器在这方面极其不一致。这些 API 都是 Microsoft 在 IE 全盛时期引入的，然后被其他供应商以各种不兼容的方式复制......大多数富文本编辑器执行命令，然后尝试清理浏览器创建的混乱。有了 Squire，我们就巧妙地绕过了这个问题。
Squire 的总体理念是允许浏览器做尽可能多的事情（不幸的是不是很多），但在任何偏离要求的地方进行控制，或者存在显着的跨浏览器差异。
安装 Squire其次，将
build/目录的内容复制到您的应用程序中。 p>第三，编辑
document.html中的c9ccee2e6ea535a969eb3f532ad9fe89块以添加您希望编辑器使用的默认样式（或链接到外部样式表）。使用 Squire
让我们看一下 Squire 附带的演示应用程序。使用 Squire 时，您可以使用
99d78fe265c29dea40d4f5b20d97044c，而不是4750256ae76b6b9d804861d8f69e79d3元素。在演示中：
<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 包括：
Cara Squire berfungsi
onload="top.editor=this.contentWindow.editor"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 blokc9ccee2e6ea535a969eb3f532ad9fe89dalamdocument.htmluntuk 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 menggunakan99d78fe265c29dea40d4f5b20d97044cdan bukannya4750256ae76b6b9d804861d8f69e79d3 /kod> elemen. 🎜 🎜Dalam demo:🎜 <pre class="brush:javascript;toolbal: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.htmlialah 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 中操作内容。可以对任何选定文本进行操作的简单命令如下所示：
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> <!--[if IE 8]> <script type="text/javascript" src="build/ie8.js"></script> <![endif]--> <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!