릴리즈 3.1.0 이상 릴리즈 2.19.0 이상

저장된 문서들의 추가/삭제된 이력을 비교할 수 있는 플러그인입니다.

문서 이력 비교 플러그인 사용 시에 데이터베이스에 에디터의 작성 내용을 에디터 문서 모델 JSON 데이터로 저장하고 가져와 문서의 변경 이력을 비교합니다.

작성 내용을 HTML이 아닌 에디터 문서 모델(JSON)로 저장해야 합니다.

(고객사 정책에 따라 HTML 별도 저장)

주의사항

문서 변경 이력을 관리할 수 있는 DB가 필요합니다.

사용방법

플러그인 파일 불러오기

<!-- SynapEditor 객체가 존재해야 적용할 수 있기 때문에 에디터 스크립트 파일 아래에 include 해야 합니다 -->

<script src="documentComparison.min.js의 url"></script>
<link rel="stylesheet" href="documentComparison.min.css의 url"></link>

UI

플러그인 이름인 'documentComparison'을 사용하여 툴바 영역에 버튼을 추가할 수 있습니다.

툴바에 추가

에디터 설정

//...
'editor.toolbar': [
    //...,
    'documentComparison',
    //...
],
// ...

메뉴에 추가

에디터 설정

//...
'editor.menu.definition': {
	//...,
	'tools': [
		//...,
		'documentComparison',
		//...
	],
	//...
},
//...

플러그인 설정하기

사용 가능한 키

Key		Type	필수	설명
list	url	string	O	요청을 보낼 URL을 설정합니다. 저장된 문서 목록 리스트를 가져오는 API 주소 설정이 되지 않으면 문서 이력 플러그인이 동작하지 않습니다.
	headers	string		요청을 보낼 헤더를 설정합니다.
	params	string		요청을 보낼 때 함께 보낼 기본 파라미터를 설정합니다.
data	url	string	O	요청을 보낼 URL을 설정합니다. 저장된 문서 목록 리스트 중 하나의 데이터를 가져오는 API 주소 설정이 되지 않으면 문서 이력 플러그인이 동작하지 않습니다.
	headers	string		요청을 보낼 헤더를 설정합니다.
	params	string		요청을 보낼 때 함께 보낼 기본 파라미터를 설정합니다.
	paramKey	string		요청을 보낼 때 함께 보낼 파라미터의 Key 값을 설정합니다.

플러그인 설정 예시

에디터 설정

/**
* 문서 이력 비교 API 설정합니다.
*/
'documentComparison.config': {
      'list': { // 저장된 문서 목록 리스트에 대한 config 설정입니다.
          'url': '/getDocumentVersionList', // 조회(POST)
          'headers': {
							"Content-Type": "application/json"
					},
		      'params': {
					}
      },
      'data': { // 저장된 문서 목록 중 하나의 데이터에 대한 config 설정입니다.
          'url': '/getDocumentVersionData', // 조회(POST) 및 삭제(DELETE)
          'headers': {
							"Content-Type": "application/json"
					},
          'paramKey': 'id' // 각 doc_id(문서 번호)에 해당하는 이력 id
      }
  }

API 설정 예제

문서 이력 비교 시에 SEModel(JSON 타입)으로 에디터 작성 내용을 저장하고 불러와야 합니다. (HTML 별도 저장 필요, 해당 예제는 HTML 저장은 포함하지 않고 있습니다.)

기존 HTML 저장 시 사용하던 getPublishingHtml()과 openHTML()이 아닌, getBodyModelJSON()과 openSEModel()을 사용해야 합니다.

저장하기 : getBodyModelJSON()
불러오기 : openSEModel()

에디터 설정

// SEModel(json 타입)로 에디터 열기
window.editor = new SynapEditor(editorId, that.editorConfig);
window.editor.openSEModel(json); // db에서 꺼내온 json
var documentComparisonPlugin = window.editor.plugins.documentComparison;
if (documentComparisonPlugin) {
    documentComparisonPlugin.addListParam('docId', docId); // addListParam: 문서이력 목록조회 API(ex:'/getDocumentVersionList')의 param을 추가합니다.
}

// 모델로 저장하기
var json = window.editor.getBodyModelJSON(true);
// 문서 이력 데이터 저장 API(ex:/saveDocumentVersionData)로 json(SEModel: 에디터모델)을 전송

DB 스키마 설정 예시

DB 스키마 설정은 예시로 제공되며 고객사에서 원하는 형태로 구성하는 것을 권장 드립니다.

컬럼 이름	필수 여부	타입	속성	기본값	설명
id	Y	BIGINT(20) 또는 VARCHAR(100)	Not Null	-	각 문서 버전 기록의 고유 식별자(ex: 게시글 이력)
user_name	Y	VARCHAR(255)	Not Null	-	문서 버전을 생성한 사용자의 이름
doc_id	Y	BIGINT(20) 또는 VARCHAR(255)	Not Null	-	문서 번호(ex: 게시글 번호)
json	Y	LONGTEXT	Not Null	-	문서 모델 JSON 데이터 - getBodyModelJSON() 로 추출한 JSON 데이터
created_at	Y	DATETIME	Not Null	CURRENT_TIMESTAMP()	버전 생성 시각

문서 이력 리스트 조회

[request]

문서 이력 리스트 조회를 위해 지정된 고객 시스템의 URL로 에디터에서 조회를 요청합니다. 이 URL은 앞서 설정된 ‘documentComparison.config’ 항목의 ‘list’-’url’값에 해당합니다.

Request URL: http://hostname/getDocumentVersionList
Request Method: POST

키	설명	필수	타입
doc_id	문서 번호(ex: 게시글 번호)	O	String 또는 Int

[response]

문서의 이력 리스트 조회 시, 고객사에서는 아래와 같은 응답을 돌려주어야 합니다.

[
	{
    	"id":"1",
		"date":"2024-12-23 10:39:04",
		"author":"synap"
	},
	{
    	"id":"2",
		"date":"2024-12-23 11:21:31",
		"author":"synap"
	},
]

키	설명	타입
id	이력 번호	String 또는 Int
date	이력 생성 날짜	Date
author	이력 작성자	String

문서 개별 이력 조회

[request]

문서의 개별 이력 조회를 위해 지정된 고객 시스템의 URL로 에디터에서 조회를 요청합니다. 이 URL은 앞서 설정된 ‘documentComparison.config’ 항목의 ‘data’-’url’값에 해당합니다.

Request URL: http://hostname/getDocumentVersionData
Request Method: POST

키	설명	필수	타입
id	문서 이력 번호(ex: 게시글 히스토리 번호)	O	String 또는 Long

[response]

문서의 개별 이력 조회 시, 고객사에서는 아래와 같은 응답을 돌려주어야 합니다.

getBodyModelJSON()

{
    "id": "se_4f57d485-ef9c-4613-aa3c-1c94849b37a6",
    "type": "Body",
    "fromHTMLBuilder": false,
    "style": {},
    "children": [
        {
            "style": {},
            "children": [
                {
                    "text": "열매 생산을 자극할 뚜렷한 건기가 있는 곳에서만",
                    "isEmoji": false,
                    "style": {},
                    "id": "se_b4186c3c-04f1-4dca-910f-d60c7b419a1d",
                    "type": "TextRun"
                }
            ],
            "id": "se_70b77667-0cb9-4f6d-99ae-40da3143ea43",
            "className": "",
            "type": "Paragraph",
            "fromHTMLBuilder": false,
            "defaultStyle": {
                "margin": {
                    "top": 16,
                    "left": 0,
                    "right": 0,
                    "bottom": 16
                },
                "display": "block",
                "overflowWrap": "break-word"
            },
            "tagName": "P",
            "endRunStyle": {}
        }
    ],
    "pageInfo": {
        "fixedWidth": false,
        "padding": {
            "left": 23,
            "right": 23,
            "top": 18,
            "bottom": 18
        }
    },
    "styleSheet": "",
    "linkTagStr": "",
    "scriptStrs": []
}

키	설명	타입
json	getBodyModelJSON()으로 저장된 에디터 본문 이력 데이터	JSON Object 또는 JSON String

문서 개별 이력 삭제

[request]

문서 개별 이력 삭제를 위해 지정된 고객 시스템의 URL로 에디터에서 삭제를 요청합니다. 이 URL은 앞서 설정된 ‘documentComparison.config’ 항목의 ‘data’-’url’값에 해당합니다.

Request URL: http://hostname/getDocumentVersionData
Request Method: DELETE

키	설명	필수	타입
id	문서 이력 번호(ex: 게시글 히스토리 번호)	O	String 또는 Long

문서 이력 데이터 저장

문서 이력 데이터 저장의 경우 고객사의 서버 환경 구성에 맞게 설정을 필요로 하기에 별도의 설정 및 API를 제공하고 있지 않습니다.

아래 예시는 위의 DB 스키마 구조로 작성된 예시입니다.

[request]

키	설명	타입
doc_id	문서 번호	String 또는 Int
id	이력 번호	String 또는 Int
created_at	이력 생성 날짜	Date
user_name	이력 작성자	String
json	문서 모델 JSON 데이터 - getBodyModelJSON() 로 추출한 JSON 데이터	LONGTEXT

Space shortcuts

Page tree

사용방법

플러그인 파일 불러오기

UI

툴바에 추가

메뉴에 추가

플러그인 설정하기

플러그인 설정 예시

API 설정 예제

DB 스키마 설정 예시

문서 이력 리스트 조회

[request]

[response]

문서 개별 이력 조회

[request]

[response]

문서 개별 이력 삭제

[request]

문서 이력 데이터 저장

[request]