Squire 재검토: 효율적인 HTML5 리치 텍스트 편집기-Word누르다-php.cn

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

스콰이어란 무엇인가요?

Squire는 애플리케이션을 위한 풍부한 입력 양식과 간단한 문서 생성에 가장 적합한 매우 가벼운 HTML5 서식 있는 텍스트 편집기입니다. 크로스 브라우저 지원을 제공하지만 의도적으로 이전 브라우저 지원의 복잡성을 피합니다. Opera 10, Firefox 3.5, Safari 4, Chrome 9 및 IE8에서 가장 잘 작동합니다.

Squire는 WYSIWYG 웹사이트 페이지 생성 및 편집에 적합하지 않습니다. 그러나 많은 서식 있는 텍스트 입력 및 웹 응용 프로그램의 경우 Squire가 꼭 필요한 것일 수 있습니다. 부풀어 오르지 않는 힘을 제공합니다. 또한 유연한 재사용을 위해 MIT로부터 라이센스를 받았습니다.

이 튜토리얼에서는 Squire를 다운로드하고 이를 사용하여 샘플 입력 양식을 작성하는 방법을 보여 드리겠습니다. Squire의 실제 작동 모습을 보려면 데모를 방문하세요.

종주님은 어디서 오셨나요?

FastMail 팀은 웹메일 편집기 요구 사항을 단순화하기 위해 Squire를 구축했습니다. FastMail은 Gmail을 대체하는 탁월한 클라우드 기반 이메일입니다. 저는 매일 FastMail을 사용하고 있습니다. FastMail은 호주에 기반을 두고 미국과는 다른 법률에 따라 운영되기 때문에 FastMail 사용자의 개인 정보 보호 기능이 약간 향상되었습니다. 여기에서 자세한 내용을 읽을 수 있습니다. FastMail에서는 NSA 감시 대상이 아니라고 말합니다.

FastMail 팀은 블로그에 이전에 CKeditor를 사용한 적이 있다고 썼습니다.

나쁜 선택은 아니지만 대부분의 다른 편집기와 마찬가지로 이메일 작성보다는 웹사이트 제작을 위해 설계되었습니다. 따라서 기본적으로 이미지를 삽입하기만 하면 탭 세 개와 상상보다 더 많은 옵션이 포함된 대화 상자가 나타납니다... 또한 자체 UI 도구 키트와 프레임워크가 함께 제공되므로 나머지 부분에 맞게 사용자 정의하는 데 많은 시간이 걸렸습니다. 우리가 만들고 있던 새로운 UI는 유지하기가 힘들었습니다.

우리는 속도와 성능을 중요하게 생각하기 때문에 코드 크기도 중요하게 생각합니다. 이전(클래식) UI에 사용한 CKEditor 버전에는 필요한 플러그인만 포함되어 있었고 다운로드 크기는 159KB(gzip 압축, 압축 해제 시 441KB)였습니다. 이것은 코드일 뿐이며 스타일과 이미지는 포함되어 있지 않습니다.

그들은 Squire를 처음부터 새로 만들기로 결정했습니다. 압축 및 gzip된 JavaScript 크기가 11.5KB(압축되지 않은 경우 34.7KB)에 불과하고 종속성이 없는 Squire는 매우 가볍습니다.

결과는 인상적입니다. 전체 작성 화면, 기본 라이브러리, 메일 및 연락처 모델 코드, 전체 화면을 렌더링하기 위한 모든 UI 코드를 로드하는 데 필요한 결합 코드 가중치는 이제 CKEditor 단독보다 작은 149.4KB(압축되지 않은 경우 459.7KB)에 불과합니다.

Squire에는 종속성이 없습니다. XHR 래퍼, 위젯 라이브러리 또는 라이트박스 오버레이가 없습니다. 도구 모음에는 사용자 인터페이스가 없으므로 두 개의 UI 도구 키트를 로드할 때 발생하는 부풀림 현상이 제거됩니다. 이것은 JavaScript를 통해 조작할 수 있는 단순한</code>구성 요소입니다.</p> <h2>스콰이어의 작동 방식</h2> <p>Squire는 선택 및 범위 API를 사용하여 DOM을 조작합니다. 이는 일반적인 브라우저 간 비호환성을 제거합니다. 다시 FastMail 블로그에서:</p> <blockquote> 서식 있는 텍스트 편집기를 만드는 것은 매우 어려운 일로 악명 높습니다. 이 점에 있어서 브라우저마다 일관성이 매우 없기 때문입니다. 이러한 API는 모두 IE 전성기에 Microsoft에서 도입한 후 다른 공급업체에서 호환되지 않는 다양한 방식으로 복사했습니다. 대부분의 서식 있는 텍스트 편집기는 명령을 실행한 다음 브라우저에서 생성된 혼란을 정리하려고 합니다. Squire를 사용하면 이 문제를 깔끔하게 우회할 수 있습니다. </blockquote> <blockquote> Squire의 일반적인 아이디어는 브라우저가 가능한 한 많은 작업을 수행할 수 있도록 허용하지만(안타깝게도 많지는 않음) 필요한 작업에서 벗어나거나 브라우저 간 상당한 차이가 있는 모든 작업을 제어하는 것입니다. <p></p> </blockquote> <blockquote> Install Squire <img src="https://img.php.cn/upload/article/000/887/227/169484742447176.jpg" alt="重温 Squire：高效的 HTML5 富文本编辑器"> <p>둘째,<code class="inline">build/</code>디렉터리의 내용을 애플리케이션에 복사합니다. p></p> <p>셋째,<code class="inline">document.html</code>中的<code class="inline"><style></code>블록을 편집하여 편집기에서 사용할 기본 스타일을 추가합니다(또는 외부 스타일시트에 대한 링크).</p> <h2>Squire를 사용하세요</h2> <p>Squire와 함께 제공되는 데모 앱을 살펴보겠습니다. Squire를 사용할 때<code class="inline"><iframe src="path/to/document.html"></code>，而不是<code class="inline"><textarea></code>요소 대신<code class="inline"><iframe src="path/to/document.html"></code></p>을 사용할 수 있습니다. <p></p>데모에서: <p>으아아아<code class="inline">Document.html</code></p>은 Squire를 로드하는 기본 스타일이 있는 빈 캔버스입니다. <p>으아아아 Squire를 사용할 때 iframe의 로드 이벤트에 이벤트 리스너를 연결할 수 있습니다. 이 이벤트가 발생하면 iframe.contentWindow.editor</p>를 통해 편집기 개체에 대한 참조를 얻을 수 있습니다. 예를 들어 데모 iframe에는 다음이 포함됩니다. <p><code class="inline">onload="top.editor=this.contentWindow.editor"</code><code class="inline">onload="top.editor=this.contentWindow.editor"</code></p> <p></p> <p>该演示有两种类型的链接，用于在 Squire 中操作内容。可以对任何选定文本进行操作的简单命令如下所示：</p> <p><code class="inline"><span id="bold">Bold</span></code></p> <p></p> <p>需要额外用户输入的复杂命令如下所示；他们添加了提示符 c:</p> <p><code class="inline"><span id="setFontSize" class="prompt">字体大小</span></code></p> <p>演示应用程序如下所示：</p> <p><img src="https://img.php.cn/upload/article/000/887/227/169484742482207.jpg" alt="重温 Squire：高效的 HTML5 富文本编辑器"></p> <p>演示页面顶部的 JavaScript 侦听对这些 span 命令的任何点击。如果提示类存在，它会从用户收集更多信息：</p> <div class="code" style="position:relative; padding:0px; margin:0px;"> <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> <div class="contentsignin"> 로그인 후 복사 </div> </div> <p>然后，它使用命令和任何用户提供的值调用 Squire 编辑器。然后，Squire 将命令应用于当前选定的文本：</p> <p><code class="inline">编辑器[ id ]( value );</code></p> <p>您可以了解有关 Squire 的更多信息，并在自述文件中查看其完整的 API 文档。</p> <h2>扩展演示</h2> <p>作为示例，让我们添加两个读取 Squire 编辑器状态的命令。我们将在演示命令标题的底部添加两个链接：</p> <div class="code" style="position:relative; padding:0px; margin:0px;"> <pre class="brush:html;toolbal:false;"><p> <a href="#" onclick="alert(editor['getSelectedText']());">get selection</a> | <a href="#" onclick="alert(editor['getDocument']());">get doc</a> </p> </header></pre> <div class="contentsignin"> 로그인 후 복사 </div> </div> <p>当您选择某些文本并单击它时，所选内容将在警报中弹出，如下所示。</p> <p><img src="https://img.php.cn/upload/article/000/887/227/169484742487711.jpg" alt="重温 Squire：高效的 HTML5 富文本编辑器"></p> <p>让我们来看看更美观的演示及其工具栏：</p> <p><img src="https://img.php.cn/upload/article/000/887/227/169484742419165.jpg" alt="重温 Squire：高效的 HTML5 富文本编辑器"></p> <p>此页面的头块集成了 Bootstrap 的样式表和名为<code class="inline">Squire-UI</code>的样式表。它还为此<code class="inline">Squire-UI</code>提供 JavaScript。</p> <div class="code" style="position:relative; padding:0px; margin:0px;"> <pre class="brush:html;toolbal:false;"><!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">

$(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' });