읽기 전용

결재 문서, 마감된 글, 권한이 없는 사람에게 보여 주는 화면처럼 같은 에디터 모양으로 보여 주되 고치지는 못하게 할 때 씁니다. readOnly: true 로 시작하거나 editor.setReadOnly(true) 로 바꿉니다.

createEditor('#editor', {
  toolbar: 'heading | bold italic | link | preview fullscreen',
  readOnly: true,
  onReady: (ed) => {
    const btn = document.createElement('button');
    btn.type = 'button';
    btn.textContent = '편집하기';
    btn.onclick = () => {
      ed.setReadOnly(!ed.readOnly);
      btn.textContent = ed.readOnly ? '편집하기' : '읽기 전용으로';
    };
    ed.statusEl.prepend(btn);
  },
});

읽기 전용에서 달라지는 것

• 글자를 쓰거나 붙여 넣을 수 없고 커서도 보이지 않습니다.
• 툴바 버튼은 대부분 꺼집니다. 켜진 채 남는 것은 findReplace(찾기), preview, print, fullscreen, help 입니다.
• 체크리스트를 눌러도 체크가 바뀌지 않고, 사진·표·상자를 눌러도 편집 막대가 뜨지 않습니다.
• 접힌 섹션(접기)은 저장된 대로 접혀 보이고, 읽는 사람이 눌러 펼칠 수 있습니다. 편집으로 돌아오면 다시 펼쳐집니다.
• 에디터에 is-readonly 클래스가 붙습니다. CSS로 모양을 바꿀 때 쓰세요.

const editor = createEditor('#editor', { readOnly: !canEdit });

editButton.addEventListener('click', () => editor.setReadOnly(false));
console.log(editor.readOnly); // 지금 상태

글 보기 화면만 필요하다면 에디터를 띄우지 않고 저장한 HTML을 페이지에 그대로 넣는 편이 가볍습니다.

옵션