JS - 인라인 편집 요소

인라인 편집은 텍스트 필드나 모든 종류의 HTML 요소들을 편집할 수 있는데, 이 말은 텍스트를 입력할 수 있는 형태로 바꾸어서 사용자가  HTML 형식의 문자열을 입력할 수 있다는 뜻입니다.

인라인 편집을 흔히 위지윅이라 부르며, 다음 속성을 사용할 수 있습니다.

속 성	설 명
contenteditable	선택한 요소를 편집 가능하게 하는 속성 true | false 중 하나 true 이면 요소를 편집 가능하게 함.
isContentEditable	선택한 요소의 내용을 편집할 수 있는지의 여부 true | false 중 하나 편집 가능하면 true 를 반환
designmode	문서 전체를 편집 가능하게 하는 속성 on | off 중 하나 on 이면 문서를 편집 가능하게 함.
execCommand(command, UI, value)	선택한 요소의 편집 구간에 실행할 명령어를 지정 명령어를 지원하지 않거나 활성화되어 있지 않으면 false 를 반환 command: 실행할 명령어. 필수항목 UI: true | false 중 하나. 기본값 false   true 는 사용자 인터페이스를 표시 value: 입력 값이 필요한 경우에 사용

contenteditable

다음은 <div>요소를 편집 가능하게 합니다.

<h3>인라인 편집</h3>

<div contenteditable="true" style="width:200px; height: 200px; 
      background-color: yellow;border: 1px solid;"></div>

인라인 편집

designmode

designmode 를 이용하면 문서 전체를 편집 모드로 변경할 수 있습니다. 아래는 iframe 을 편집 모드로 변경합니다.

<iframe id="editor" style="width:200px; height: 200px; 
    background: yellow; border: 1px solid;"></iframe>

<script>
  var iframe = document.getElementById("editor");
  iframe.contentDocument.designMode = "on";
</script>

execCommand

인라인 편집 요소의 편집 구간에 실행할 명령어를 지정할 수 있습니다. 예를 들어 글자를 굵게 한다든지, 색상을 줄 수 있습니다.

아래 예제는 iframe 의 선택한 구간에 글자를 굵게 표시합니다.

<button id="user_bold">글자를 굵게</button>
<iframe id="editor" style="width:200px; height: 200px; 
      background: yellow; border: 1px solid;">
</iframe>

<script>
  var iframe = document.getElementById("editor");
  iframe.contentDocument.designMode = "on";

  var btn = document.getElementById("user_bold");
  btn.addEventListener("click", design);

  function design(){
    iframe.contentDocument.execCommand("bold");
  }
</script>

다음은 선택한 요소의 선택 구간에 글자를 굵게 표시합니다.

<button id="user_bold">글자를 굵게</button>
<div id="editor" contenteditable="true" style="width:200px;
      height: 200px; background: yellow; border: 1px solid;">
</div>

<script>
  var btn = document.getElementById("user_bold");
  btn.addEventListener("click", design);

  function design(){
    document.execCommand("bold");
  }
</script>