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

집

CMS 튜토리얼

Word누르다

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 16, 2023 pm 02:57 PM

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

스콰이어의 작동 방식

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

서식 있는 텍스트 편집기를 만드는 것은 매우 어려운 일로 악명 높습니다. 이 점에 있어서 브라우저마다 일관성이 매우 없기 때문입니다. 이러한 API는 모두 IE 전성기에 Microsoft에서 도입한 후 다른 공급업체에서 호환되지 않는 다양한 방식으로 복사했습니다. 대부분의 서식 있는 텍스트 편집기는 명령을 실행한 다음 브라우저에서 생성된 혼란을 정리하려고 합니다. Squire를 사용하면 이 문제를 깔끔하게 우회할 수 있습니다.

Squire의 일반적인 아이디어는 브라우저가 가능한 한 많은 작업을 수행할 수 있도록 허용하지만(안타깝게도 많지는 않음) 필요한 작업에서 벗어나거나 브라우저 간 상당한 차이가 있는 모든 작업을 제어하는 것입니다.

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

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

Squire를 사용하세요

Squire와 함께 제공되는 데모 앱을 살펴보겠습니다. Squire를 사용할 때 <iframe src="path/to/document.html"></iframe>，而不是 <textarea></textarea> 요소 대신 <iframe src="path/to/document.html"></iframe>
을 사용할 수 있습니다.

데모에서:
으아아아 Document.html
은 Squire를 로드하는 기본 스타일이 있는 빈 캔버스입니다.
으아아아 Squire를 사용할 때 iframe의 로드 이벤트에 이벤트 리스너를 연결할 수 있습니다. 이 이벤트가 발생하면 iframe.contentWindow.editor
를 통해 편집기 개체에 대한 참조를 얻을 수 있습니다. 예를 들어 데모 iframe에는 다음이 포함됩니다.
onload="top.editor=this.contentWindow.editor"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으로 문의하세요.

관련 기사

3 일 후에 WordPress를 배울 수 있습니까?Apr 09, 2025 am 12:16 AM

3 일 이내에 WordPress를 배울 수 있습니다. 1. 테마, 플러그인 등과 같은 마스터 기본 지식 2. 설치 및 작업 원칙을 포함한 핵심 기능을 이해하십시오. 3. 예제를 통해 기본 및 고급 사용법을 배우십시오. 4. 디버깅 기술 및 성능 최적화 제안을 이해하십시오.

WordPress는 CMS입니까?Apr 08, 2025 am 12:02 AM

WordPress는 CMS (Content Management System)입니다. 웹 사이트 콘텐츠의 생성 및 관리를 지원하기 위해 컨텐츠 관리, 사용자 관리, 테마 및 플러그인 기능을 제공합니다. 작업 원칙에는 데이터베이스 관리, 템플릿 시스템 및 플러그인 아키텍처가 포함되며 블로그에서 회사 웹 사이트에 이르기까지 다양한 요구에 적합합니다.

WordPress는 무엇에 좋은가?Apr 07, 2025 am 12:06 AM

WordPressIsGoodForVirtSallyWebProjectDueToitsAcms.itexcelsin : 1) 사용자 친화적 인, easywebsiteseSetup; 2) 유연성 및 커스텀 화를 허용합니다

Wix 또는 WordPress를 사용해야합니까?Apr 06, 2025 am 12:11 AM

WIX는 프로그래밍 경험이없는 사용자에게 적합하며 WordPress는 더 많은 제어 및 확장 기능을 원하는 사용자에게 적합합니다. 1) Wix는 드래그 앤 드롭 편집자와 풍부한 템플릿을 제공하여 웹 사이트를 신속하게 구축 할 수 있습니다. 2) 오픈 소스 CMS로서 WordPress는 거대한 커뮤니티 및 플러그인 생태계를 보유하고 있으며 심층적 인 사용자 정의 및 확장을 지원합니다.

WordPress 비용은 얼마입니까?Apr 05, 2025 am 12:13 AM

WordPress 자체는 무료이지만 사용 비용은 추가 비용이 필요합니다. 1. WordPress.com은 무료에서 유료에 이르는 패키지를 제공하며, 한 달에 몇 달러에서 수십 달러에 이르는 가격으로 가격이 제공됩니다. 2. WordPress.org는 도메인 이름 (연간 10-20 달러)과 호스팅 서비스 (월 5-50 달러)를 구매해야합니다. 3. 대부분의 플러그인과 테마는 무료이며 유급 가격은 수십에서 수백 달러 사이입니다. 플러그인과 테마를 합리적으로 사용하고 정기적으로 유지하고 최적화하는 올바른 호스팅 서비스를 선택함으로써 WordPress의 비용은 효과적으로 제어되고 최적화 될 수 있습니다.

WordPress는 여전히 무료입니까?Apr 04, 2025 am 12:06 AM

WordPress의 핵심 버전은 무료이지만 사용 중에 다른 요금이 발생할 수 있습니다. 1. 도메인 이름과 호스팅 서비스에는 지불이 필요합니다. 2. 고급 테마 및 플러그인이 충전 될 수 있습니다. 3. 전문 서비스 및 고급 기능이 청구될 수 있습니다.

WordPress는 초보자에게 쉽습니까?Apr 03, 2025 am 12:02 AM

WordPress는 초보자가 쉽게 시작할 수 있습니다. 1. 백그라운드에 로그인 한 후 사용자 인터페이스는 직관적이며 간단한 대시 보드는 필요한 모든 기능 링크를 제공합니다. 2. 기본 작업에는 컨텐츠 작성 및 편집이 포함됩니다. Wysiwyg 편집기는 컨텐츠 생성을 단순화합니다. 3. 초보자는 플러그인 및 테마를 통해 웹 사이트 기능을 확장 할 수 있으며 학습 곡선은 존재하지만 연습을 통해 마스터 할 수 있습니다.

왜 WordPress를 사용합니까?Apr 02, 2025 pm 02:57 PM

사람들은 힘과 유연성 때문에 WordPress를 사용하기로 선택합니다. 1) WordPress는 다양한 웹 사이트 요구에 적합한 사용 편의성 및 확장 성을 가진 오픈 소스 CM입니다. 2) 풍부한 주제와 플러그인, 거대한 생태계 및 강력한 지역 사회 지원이 있습니다. 3) WordPress의 작동 원리는 테마, 플러그인 및 핵심 기능을 기반으로하며 PHP 및 MySQL을 사용하여 데이터를 처리하며 성능 최적화를 지원합니다.

See all articles