简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
집
기사
Q&A
강의
주제
다운로드
게임
사전
최근 업데이트

집  >  기사  >  CMS 튜토리얼  >  Squire 재검토: 효율적인 HTML5 리치 텍스트 편집기

Squire 재검토: 효율적인 HTML5 리치 텍스트 편집기

WBOY
WBOY원래의
2023-09-16 14:57:021458검색

重温 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를 통해 조작할 수 있는 단순한 4750256ae76b6b9d804861d8f69e79d3 구성 요소입니다.

스콰이어의 작동 방식

Squire는 선택 및 범위 API를 사용하여 DOM을 조작합니다. 이는 일반적인 브라우저 간 비호환성을 제거합니다. 다시 FastMail 블로그에서:

서식 있는 텍스트 편집기를 만드는 것은 매우 어려운 일로 악명 높습니다. 이 점에 있어서 브라우저마다 일관성이 매우 없기 때문입니다. 이러한 API는 모두 IE 전성기에 Microsoft에서 도입한 후 다른 공급업체에서 호환되지 않는 다양한 방식으로 복사했습니다. 대부분의 서식 있는 텍스트 편집기는 명령을 실행한 다음 브라우저에서 생성된 혼란을 정리하려고 합니다. Squire를 사용하면 이 문제를 깔끔하게 우회할 수 있습니다.
Squire의 일반적인 아이디어는 브라우저가 가능한 한 많은 작업을 수행할 수 있도록 허용하지만(안타깝게도 많지는 않음) 필요한 작업에서 벗어나거나 브라우저 간 상당한 차이가 있는 모든 작업을 제어하는 ​​것입니다.

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

둘째, build/ 디렉터리의 내용을 애플리케이션에 복사합니다. p>

셋째, document.html 中的 c9ccee2e6ea535a969eb3f532ad9fe89 블록을 편집하여 편집기에서 사용할 기본 스타일을 추가합니다(또는 외부 스타일시트에 대한 링크).

Squire를 사용하세요

Squire와 함께 제공되는 데모 앱을 살펴보겠습니다. Squire를 사용할 때 99d78fe265c29dea40d4f5b20d97044c，而不是 4750256ae76b6b9d804861d8f69e79d3 요소 대신 99d78fe265c29dea40d4f5b20d97044c

을 사용할 수 있습니다.

데모에서:

으아아아 Document.html

은 Squire를 로드하는 기본 스타일이 있는 빈 캔버스입니다.

으아아아 Squire를 사용할 때 iframe의 로드 이벤트에 이벤트 리스너를 연결할 수 있습니다. 이 이벤트가 발생하면 iframe.contentWindow.editor

를 통해 편집기 개체에 대한 참조를 얻을 수 있습니다. 예를 들어 데모 iframe에는 다음이 포함됩니다.

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

🎜

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

6198752c71ab262db5c7ea2a620d0408Bold54bdf357c58b8a65c66d7c19c8e4d114

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

5bd9f17dd3b368543cade77b644988c2字体大小54bdf357c58b8a65c66d7c19c8e4d114

演示应用程序如下所示：

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

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

当您选择某些文本并单击它时，所选内容将在警报中弹出，如下所示。

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

让我们来看看更美观的演示及其工具栏：

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

此页面的头块集成了 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 代码库

위 내용은 Squire 재검토: 효율적인 HTML5 리치 텍스트 편집기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

JavaScript html5 firefox jquery css ajax chrome safari bootstrap html class 对象 事件 dom this 样式表 github http microsoft ui prompt
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：WordPress 랜딩 페이지 만들기: 단계별 가이드다음 기사：WordPress 랜딩 페이지 만들기: 단계별 가이드

관련 기사

더보기