JS - 위지윅 에디터 예제

간단한 위지윅 에디터 예제입니다.

<h3>웹에디터</h3>

<button id="bold">굵게</button>
<button id="color">글자색</button>
<button id="bgcolor">배경색</button>
<button id="italic">이텔릭체</button>
<button id="image">이미지넣기</button>
<button id="horizontal">가로줄 넣기</button><br/>
<button id="link">링크 넣기</button>
<button id="ordered">순서있는 목록</button>
<button id="unordered">순서없는 목록</button>
<button id="blockquote">인용문 넣기</button>
<button id="heading">제목 넣기</button>
<button id="fontname">글꼴</button>

<div contenteditable="true" style="overflow: auto; 
  width:400px; height: 200px; border: 1px solid;"></div>

<script>
  document.getElementById("bold").
    addEventListener("click", function(){design("bold")});
  document.getElementById("color").
    addEventListener("click", function(){designColor()});
  document.getElementById("bgcolor").
    addEventListener("click", function(){designBgColor()});
  document.getElementById("italic").
    addEventListener("click", function(){design("italic")});
  document.getElementById("image").
    addEventListener("click", function(){designImage()});
  document.getElementById("horizontal").
    addEventListener("click", function(){design("insertHorizontalRule")});
  document.getElementById("link").
    addEventListener("click", function(){designLink()});
  document.getElementById("ordered").
    addEventListener("click", function(){design("insertOrderedList")});
  document.getElementById("unordered").
    addEventListener("click", function(){design("insertUnorderedList")});
  document.getElementById("blockquote").
    addEventListener("click", function(){designBlockQuote()});
  document.getElementById("heading").
    addEventListener("click", function(){designHeading()});
  document.getElementById("fontname").
    addEventListener("click", function(){designFontName()});

  // 글자색
  function designColor() {
    var val = prompt("색상을 넣으세요. Ex.) red", '');
    if(val != null){
      design("foreColor", val);
    }
  }
  // 배경색
  function designBgColor() {
    var val = prompt("색상을 넣으세요. Ex.) red", '');
    if(val != null){
      design("hiliteColor", val);
    }
  }
  // 이미지 삽입
  function designImage() {
    var val = prompt("이미지 URL을 입력하세요.", '');
    if(val != null){
      design("insertImage", val);
    }
  }
  // 링크 삽입
  function designLink() {
    var val = prompt("URL을 입력하세요.", '');
    if(val != null){
      design("createLink", val);
    }
  }
  // 인용문 넣기
  function designBlockQuote() {
    design("formatBlock", "blockquote");
  }
  // 제목 넣기
  function designHeading() {
    design("formatBlock", "h1");
  }
  // 글꼴 설정
  function designFontName() {
    var val = prompt("글꼴을 입력하세요. Ex.) 궁서체", '');
    if(val != null){
      design("fontName", val);
    }
  }


  function design(command, value = null){
    document.execCommand(command, false, value);
  }
</script>

웹에디터