JavaScript의 문서 개정 시스템

6488 단어 documentmanagemenetjavascriptfrontendwebdev
Quill은 변경 델타를 제공하는 서식 있는 텍스트 편집기입니다. 따라서 브라우저 내에서 매우 정교한 문서 수정 시스템을 구축할 수 있습니다.

먼저 Quill을 사용하는 방법을 살펴보겠습니다.

JavaScript의 퀼





<!DOCTYPE html>
<html lang="en">
  <head>

    <!-- Include stylesheet -->
    <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">

  </head>

  <body>

    <!-- Create the editor container -->
    <div id="editor" style="height: 375px;">
      <p>Hello World!</p>
      <p>Some initial <strong>bold</strong> text</p>
      <p><br></p>
    </div>

    <!-- Include the Quill library -->
    <script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>

    <!-- Initialize Quill editor -->
    <script>
      var quill = new Quill('#editor', {
        theme: 'snow'
      });
  </script>

  <body>
</html>

도구 모음의 많은 사용자 정의가 가능합니다.

콘텐츠를 얻는 방법



일반 텍스트

quill.getText()

HTML

quill.root.innerHTML

델타

변화를 Quill Delta으로 산출,

quill.getContents()

이벤트



이벤트를 들을 수 있고, 일반적으로 원하는 것은 HTML,

텍스트 변경

  quill.on('text-change', function(delta, oldDelta, source) {     
        if (source == 'api') {
          console.log("An API call triggered this change.");
        } else if (source == 'user') {
          console.log("A user action triggered this change.");
        }
  });

선택 변경

  quill.on('selection-change', function(range, oldRange, source) {
        if (range) {
          if (range.length == 0) {
            console.log('User cursor is on', range.index);
          } else {
            var text = quill.getText(range.index, range.length);
            console.log('User has highlighted', text);
          }
        } else {
          console.log('Cursor not in the editor');
        }
  });

에디터 변경

  quill.on('editor-change', function(eventName, ...args) {
    if (eventName === 'text-change') {
      // args[0] will be delta
    } else if (eventName === 'selection-change') {
      // args[0] will be old range
    }
  });

문서 개정판 비교



다른 문서 개정 내용을 델타로 저장한 경우

quill.getContents()

그런 다음 다음을 사용하여 수정본을 비교할 수 있습니다.

  var diff = oldContent.diff(newContent);

따라서 델타를 다시 얻습니다.

차이점을 색칠하려면 다음을 사용하십시오.

  for (var i = 0; i < diff.ops.length; i++) {
    var op = diff.ops[i];
    // if the change was an insertion
    if (op.hasOwnProperty('insert')) {
      // color it green
      op.attributes = {
        background: "#cce8cc",
        color: "#003700"
      };
    }
    // if the change was a deletion 
    if (op.hasOwnProperty('delete')) {
      // keep the text
      op.retain = op.delete;
      delete op.delete;
      // but color it red and struckthrough
      op.attributes = {
        background: "#e8cccc",
        color: "#370000",
        strike: true
      };
    }
  }

색상 차이로 이전 콘텐츠를 구성합니다.

  var adjusted = oldContent.compose(diff);

추적된 변경 사항을 편집기에 표시하고

quill_diff.setContents(adjusted);



이 코드는 Codepen에서 Joe Pietruch으로 조정됩니다.

슈퍼스테이트 주립 도서관



superstate은 상태와 초안을 구분하는 작고 효율적인 상태 라이브러리입니다.

먼저 초기 상태를 정의합니다.

const text = superstate('
    <p>Hello World!</p>
    <p>Some initial <strong>bold</strong> text </p><p><br></p>
')

그런 다음 스케치로 초안을 만듭니다.

text.sketch('
    <p>Hello World!</p>
    <p>Some initial <strong>bold</strong> text </p>
    <p>And an <em>italic</em> scene</p><p><br></p>
')

그리고 publish를 사용하여 상태에 게시합니다.

text.publish()

상위 상태를 사용하여 문서 수정본을 비교하기 위한 위의 코드와 함께 문서를 수정하고 변경 사항을 추적한 다음 새 수정본을 상태에 저장할 수 있습니다.

고집



브라우저에서 작업할 때 작업 시간이 몇 분 이상인 경우 작업을 자동으로 저장해야 합니다.

localStorage 어댑터를 사용하여 superstate에서 이 작업을 수행할 수 있습니다.

import { superstate } from '@superstate/core'
import { ls } from '@superstate/adapters'

const text = superstate(').use([
  ls('doc'), // 'doc' is the localStorage key
])

이제 상태에 대한 모든 변경 사항이 로컬 저장소에 저장됩니다. 다음을 사용하여 상태를 생성하지 않는 한 초안에는 적용되지 않습니다.

const count = superstate(0).use([ls('count', { draft: true })])

전체 개정 시스템에서 누락된 것은 무엇입니까?



편집기 내에서 강조 표시된 변경 사항을 수락/거부하려면 구성 요소를 추가해야 합니다.

이 디자인은 작성 및 수정 작업 흐름이 있는 전체 문서 관리 시스템의 일부가 될 것입니다.
파이썬 부울()
파이썬으로 atcoder 하늘색까지 프로그래밍 한 소감

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage