사이냅 에디터 문서
Space shortcuts
Page tree
Skip to end of metadata
Go to start of metadata

릴리즈 2.18.2406, 3.0.2406 이상

두 에디터 Body 모델을 비교하여 차이점이 표시된 HTML을 반환합니다.

Body모델은 getBodyModelJSON 을 통해 가져올 수 있습니다.


Parameters:

Name

Type

Description

beforeBodyModel

Object | StringBody 모델 JSON Object 또는 JSON String.
currentBodyModelObject | StringBody 모델 JSON Object 또는 JSON String.
options

Object

릴리즈 2.18.2409, 3.0.2409 이상 옵션을 설정합니다.

example
{
    /*
     * 차이점을 표시하는 색상을 설정합니다.
     */
    style: {
        // 변경이 일어난 부분에 표시할 색과 테두리 색
        edit: { color: {string}, borderColor: {string} },
        // 제거가 일어난 부분에 표시할 색과 테두리 색
        delete: { color: {string}, borderColor: {string} }
    }
}

Return:

TypeDescription
String두 모델의 차이점이 표시된 HTML



Example1:

이전 모델이후 모델

결과


// 안녕하세요.
var beforeBodyModel = editor.getBodyModelJSON();
// 안녕하세요. 
// 사이냅 에디터입니다.
var currentBodyModel= editor.getBodyModelJSON();
var result = editor.getModelDiffHTML(beforeBodyModel, currentBodyModel);
결과
'<div class="se-contents" role="textbox" style="box-sizing: content-box; font-family: "맑은 고딕"; font-size: 11pt; line-height: 1.2;" data-document-padding-top="18" data-document-padding-bottom="18" data-document-padding-left="23" data-document-padding-right="23"><style>a:not(#se-t #se-tt) { pointer-events: auto !important; } .se-diff { position: relative; } .se-diff:not(a):not(.se-div):after { content: ''; position: absolute; width: 100%; height: 100%; top: 0; left: 0; } .se-diff.se-diff-edited:after { background-color: rgba(221, 255, 221, 0.70); } .se-diff.se-diff-deleted:after { background-color: rgba(255, 221, 221, 0.70); } .se-diff.se-diff-deleted:not(a) { text-decoration: line-through; } .se-div.se-diff.se-collabo-edited { background-color: rgba(221, 255, 221, 0.70) !important; } .se-div.se-diff.se-collabo-deleted { background-color: rgba(255, 221, 221, 0.70) !important; }</style><p style="margin: 16px 0px; display: block; overflow-wrap: break-word;"><span>안녕하세요.</span></p><p class="se-diff se-diff-edited" style="margin: 16px 0px; display: block; overflow-wrap: break-word;"><span>사이냅 에디터입니다.</span></p></div>'

    

    

    

Example2:

var beforeBodyModel = editor.getBodyModelJSON();
// 편집 동작 수행
var currentBodyModel= editor.getBodyModelJSON();

var options = {
    style: {
        edit: { 
            color: 'rgba(144, 213, 235, 0.7)', // 기본 값: 'rgba(221, 255, 221, 0.7)'
            borderColor: 'rgb(93, 181, 209)'   // 기본 값: 'rgba(0, 246, 0, 0.7)'
        },
        delete: { 
            color: 'rgba(211, 117, 124, 0.7)', // 기본 값: 'rgba(255, 221, 221, 0.7)'
            borderColor: 'rgb(182, 80, 88)'    // 기본 값: 'rgba(239, 24, 24, 0.7)'
        }
    }
};

var result = editor.getModelDiffHTML(beforeBodyModel, currentBodyModel, options);


이전 모델이후 모델

style option 설정 전 (기본 값)style option 설정 후



  • No labels