Aurelia에서 Quil 가져오기

Aurelia를 사용한 사내용 시스템 개발에서 Quil을 가져왔기 때문에 프로그램과 샘플을 게재해 보았다.
Quill는
Your powerful, rich text editor.
어쨌든 WYSIWYG 편집기.
스타일리시하고 느낌이 좋아 보이기 때문에 Aurelia 앱에 넣는다.
TL;DR

Quil은 스타일리시하고 가져오기도 편리합니다.

간단한 설치 전 단계 기록

나도 실용적인'문장'의 표시와 편집 견본을 썼다

독자 대상
Aurelia에서 Quil을 가져올 사람을 고려합니다.
전제 조건

Aurelia 1.1.2

jspm 0.16.53

가져온 물건

Quill 1.3.2

가져오기 단계
jspm 설치 사용
하나만 넣으면 되니까 편해요.

$ jspm install npm:quill

package.json에 다음과 같은 내용이 추가되면 설치가 완료됩니다.
package.json

{
  "jspm": {
    "dependencies": {
      "quill": "npm:quill@^1.3.2",
    }
  }
}

Aurelia에 편입
Aurelia Pluginmain.js이 아니기 때문에 설정할 필요가 없습니다.
먼저 ""측면에서 css를 읽고 EDITOr에 포함된 라벨을 만듭니다.
전용 탭 등이 필요하지 않습니다. 나중에 자바스크립트 측면에서 선택기를 지정할 수 있습니다.이번div#editor.
editor.html

<require from="quill/dist/quill.snow.css"></require>

<div id="editor"></div>

그런 다음 Javascript 측면에서 처리를 로드합니다.
DOM 생성 후 삽입attached()을 원하기 때문에 적절합니다.
editor.js

import Quill from 'quill/dist/quill.min.js';

export class Editor {
  attached() {
    this.quill = new Quill('#editor', {
      theme: 'snow',
    });
  }
}

화면을 열고 다음과 같이 설치가 완료되었습니다.

Quill은 주제 설정을 할 수 있으며 상기 예에서 적용snow.
또 다른 bubble가 있기 때문에 바꾸고 싶으면 snow를 모두 bubble로 바꿀 수 있다.
다른 옵션 설정도 다양할 수 있고 상세한 내용은 공식Configuration을 볼 수 있다.
좀 더 실용적으로 만들어 보도록 하겠습니다.
설정 이상이면
확실히 이렇게 되면 실용성이 없어진다. 좀 더 실용적인'보도'의 표시와 편집을 고려해 보자.
나는 새 투고와 편집된 화면이 매우 비슷하다고 생각하기 때문에 다음은 편집화면만 제작한다.
새로운 투고 화면을 만들려면 편집 화면을 수정하면 된다.
또한 모양새를 간단하게 정리하기 위해 부츠트랩을 자주 사용하므로 주의하시기 바랍니다.
디렉토리 구조

article

index.html

index.js

edit.html

edit.js

대략적인 탁자

article

id: int(11)

title: varchar(255)

body: text

이루어지다
index: 투고한 글 보이기
) 한 쪽이 여러 개의 표시에 대응한다.ql-container 클래스 등 사전 준비 요소를 사용하면 편집과 동등한 미관을 확보할 수 있다.
index.html

<require from="quill/dist/quill.snow.css"></require>

<div class="card" repeat.for="article of articles">
  <div class="card-block">
    <h2 class="card-title">${article.title}</h2>
    <p class="card-text">
      <div class="ql-container ql-snow">
        <div class="ql-editor" innerhtml.bind="article.body"></div>
      </div>
    </p>
    <a href="article/edit/${article.id}" class="btn btn-primary" for="articleEdit">Edit</a>
  </div>
</div>

Javascript 측에서는
API 액세스 사용https://github.com/SpoonX/aurelia-api.
index.js

import {inject} from "aurelia-framework";
import {Endpoint} from 'aurelia-api';

@inject(Endpoint.of('api'))

export class Index {
  constructor(endpoint) {
    this.endpoint = endpoint;
  }

  activate() {
    this.endpoint.find('article')
    .then(response => {
      this.articles = response;
    })
    .catch(error => {
    });
  }

화면을 켜면 완성입니다.
데이터는 적당히 넣는 전제 조건이다.

기사 편집
한쪽은 이런 느낌.
바디가 bind가 되지 않기 때문에 Javascript 측면에서 대응합니다.
edit.html

<require from="quill/dist/quill.snow.css"></require>

<div class="form-group">
  <label for="articleTitle">Title</label>
  <input type="text" class="form-control" placeholder="title" value.bind="article.title">
</div>
<div class="form-group">
  <label for="articleBody">Body</label>
  <div id="article-body"></div>
</div>
<div class="form-group">
  <button type="button" class="btn btn-primary" for="articleSubmit" click.trigger="submit()">Submit</button>
</div>

Javascript 쪽은 이런 느낌이에요.
바디가 bindquill.root.innerHTML를 할 수 없기 때문에 설정, 획득을 통해 얻을 수 있습니다.
edit.js

import {inject} from "aurelia-framework";
import {Endpoint} from 'aurelia-api';
import Quill from 'quill/dist/quill.min.js';

@inject(Endpoint.of('api'))

export class Edit {
  constructor(endpoint) {
    this.endpoint = endpoint;
  }

  attached() {
    this.quill = new Quill('#article-body', {
      theme: 'snow',
      placeholder: 'body',
    });
  }

  activate(params) {
    this.endpoint.find('article/' + params.id)
    .then(response => {
      this.article = response;
      this.quill.root.innerHTML = this.article.body;
    })
    .catch(error => {
    });
  }

  submit() {
    let params = {
      article: {
        title: this.article.title,
        body: this.quill.root.innerHTML,
      }
    };

    this.endpoint.update('article', this.article.id, params)
    .then((response) => {
      this.successSubmit();
    })
    .catch(error => {
    });
  }

  successSubmit() {
    location.href = 'article/index';
  }
}

화면을 켜면 완성입니다.

끝말
설치가 간단하고 필요한 스타일은 css에 읽으면 끝나며 도입 원가가 낮고 가볍습니다.
주제는 snow과bubble로 외관이 트렌디하고 약간 트렌디한 것이 좋은 인상이다.
어쨌든 WYSIWYG에 합류하는 게 더 이상 어울리지 않을 것 같아서요.
다만, 외부 플러그인을 통해 이루어지면 js로 돌봐야 하는 고통이 있다.
innerHTML 속성 같은 걸 써야 하니까 Aurelia에서 하는 느낌이 약해져서 싫어할 수도 있어요.
template 호출을 위해 Aurelia Plugin으로 보내면 더 간단하게 쓸 수 있습니다.
하지만 그건 언젠가.