본문 바로가기
텍스트 편집기 text editor/Quill.js

작성 완료 상태에서 링크 삽입?

by Mr.코딩 2023. 7. 19.

나는 JavaScript와 Quill로 텍스트 편집기를 구축 중인데, 작성 완료된 글을 수정하지 않은 채 특정 버튼을 클릭하여 글의 특정 요소(글/이미지)에 링크를 첨부하는 프로토콜을 구축할 수 있을까?

 

Bard

네, 가능합니다. JavaScript와 Quill로 텍스트 편집기를 구축하는 경우, 특정 버튼을 클릭하여 글의 특정 요소(글/이미지)에 링크를 첨부하는 프로토콜을 구축할 수 있습니다.

 

프로토콜을 구축하는 방법은 다음과 같습니다.

 

  1. 텍스트 편집기에 특정 버튼을 생성합니다.
  2. 버튼을 클릭하면 링크를 삽입할 수 있는 대화 상자를 표시합니다.
  3. 대화 상자에서 링크의 URL과 텍스트를 입력합니다.
  4. '링크 추가' 버튼을 클릭하면 링크가 삽입됩니다.

이 프로토콜을 사용하면 작성 완료된 글을 수정하지 않은 채 특정 요소에 링크를 첨부할 수 있습니다.

다음은 이 프로토콜을 구현하는 데 사용할 수 있는 코드입니다.

 

function addLink(text, url) {
  // 특정 요소에 링크를 삽입합니다.
  var link = document.createElement("a");
  link.href = url;
  link.textContent = text;
  quill.insertEmbed(text, "link", link);
}

// 특정 버튼을 클릭하면 링크를 삽입할 수 있는 대화 상자를 표시합니다.
function showLinkDialog() {
  // 대화 상자를 표시합니다.
  var dialog = new Dialog();
  dialog.setTitle("링크 추가");
  dialog.addTextField("URL", "링크의 URL을 입력하세요.");
  dialog.addTextField("텍스트", "링크의 텍스트를 입력하세요.");
  dialog.setSubmitButtonText("링크 추가");
  dialog.show();

  // 대화 상자의 '링크 추가' 버튼이 클릭되면 링크를 추가합니다.
  dialog.onSubmit = function() {
    addLink(dialog.getTextFieldValue("텍스트"), dialog.getTextFieldValue("URL"));
  };
}


이 코드를 사용하면 텍스트 편집기에 특정 버튼을 생성하고, 버튼을 클릭하면 링크를 삽입할 수 있는 대화 상자를 표시할 수 있습니다.


Test 대기