집 > 기사 > 웹 프론트엔드 > JavaScript 리치 텍스트 편집기를 구현하는 간단한 방법

JavaScript 리치 텍스트 편집기를 구현하는 간단한 방법

小云云원래의: 2018-01-05 09:34:063245검색

얼마 전 리치 텍스트 편집기에 대한 정보를 찾다가 Pell이라는 프로젝트를 발견했습니다. WYSIWYG(What You See Is What You Get) 텍스트 편집기인데 기능은 매우 간단하지만 놀랍습니다. 문제는 크기가 1kb에 불과하다는 것입니다. 프로젝트의 핵심 파일인 pell.js에는 다른 부분을 추가하더라도 총 js 수는 200줄 미만입니다. 이번 글에서는 200줄 미만의 JavaScript 코드로 리치 텍스트 편집기를 구현하는 방법을 주로 소개합니다. 도움이 필요한 친구들이 참고하면 좋겠습니다.

프로젝트의 주요 코드는 pell.js 파일에 있습니다. 주요 기능의 구현은 다음 부분에 따라 다릅니다.

actions object
exec() 함수
init() 함수

Document.execCommand()

가장 간단한 부분부터 시작해 보겠습니다. exec() 함수에는 다음 세 줄만 있습니다.

export const exec = (command, value =null) => {
  document.execCommand(command, false, value);
};

document.execCommand()를 간단한 래퍼로 래핑합니다. , Document.execCommand()는 이 편집기의 핵심입니다. 구문은 다음과 같습니다.

bool = document.execCommand(aCommandName, aShowDefaultUI, aValueArgument)

aCommandName은 다음과 같이 실행하려는 명령을 나타내는 문자열입니다. 글꼴 크기 'fontSize' 등 변경 대기
aShowDefaultUI 기본 사용자 인터페이스 표시 여부
aValueArgument 일부 명령에는 사진 및 링크 삽입과 같은 추가 입력이 필요하며 주소를 제공해야 합니다

참고: 실험 후 Chrome에서 변경되었습니다. aShowDefaultUI 값에 아무런 영향도 미치지 않았습니다. 이 스택오버플로 질문에서는 이것이 이전 버전의 IE의 매개변수이므로 여기에서 기본값인 false로 설정할 수 있다고 언급했습니다. .

actions object

actions라는 이름의 개체가 파일에 정의되어 있으며, 이는 아래 그림의 도구 모음에 있는 버튼 행에 해당합니다. 작업의 각 하위 개체는 버튼의 속성을 저장합니다.

코드 일부:

const actions = {
  bold: {
    icon: '<b>B</b>',
    title: 'Bold',
    result: ()=> exec('bold')
  },
  italic: {
    icon: '<i>I</i>',
    title: 'Italic',
    result: ()=> exec('italic')
  },
  underline: {
    icon: '<u>U</u>',
    title: 'Underline',
    result: ()=> exec('underline')
  },
  // …
}

이 코드는 굵게, 기울임꼴, 밑줄이라는 세 가지 개체 속성을 보여 주며, 이는 도구 모음 앞쪽에 있는 굵게, 기울임꼴 및 밑줄 버튼에 해당하는 구조임을 알 수 있습니다. 동일하며 모두 다음 세 가지 속성을 갖습니다.

icon: 표시 방법
title: 제목입니다.
result: 버튼에 클릭 이벤트로 할당되는 함수입니다. 이전 언급된 exec() 함수는 텍스트를 조작하는 데 사용됩니다

이제 액션 객체가 생겼으니 어떻게 사용하나요? 이는 init() 함수에 따라 달라지며 배열의 각 항목은 버튼을 생성하기 위해 특정 규칙에 따라 작업 개체에서 요소를 선택합니다. 아래 코드의 settings.actions는 이 배열이며, 각 요소는 도구 모음에 표시되는 버튼에 해당합니다. settings.actions의 생성 규칙은 나중에 설명합니다.

// pell.js 中的 init() 函数
settings.actions.forEach(action=> {
  // 新建一个按钮元素
  const button = document.createElement('button')
  // 给按钮加上 css 样式
  button.className = settings.classes.button
  // 把 icon 属性作为内容显示出来
  button.innerHTML = action.icon
  button.title = action.title
  // 把 result 属性赋给按钮作为点击事件
  button.onclick = action.result
  // 将创建的按钮添加到工具栏上
  actionbar.appendChild(button)
})

이런 방식으로 배열의 각 요소는 도구 모음에 버튼을 생성합니다.

init() 초기화 기능

Pell 편집기를 사용하려면 init() 함수를 호출하여 편집기를 초기화하면 됩니다. 다음과 같은 일부 속성을 포함하는 설정 개체를 매개변수로 받습니다.

element: 편집기의 DOM 요소
styleWithCSS: true로 설정하면
이름 속성은 없지만 버튼, 결과를 생성하는 데 필요한 속성 아이콘이 있는 객체 , etc.

actions: [
 &#39;bold&#39;,
 &#39;underline&#39;,
 &#39;italic&#39;,
 {
  name: &#39;image&#39;,
  result: ()=> {
   const url = window.prompt('Enter the image URL')
   if (url) window.pell.exec('insertImage', ensureHTTP(url))
  }
 },
 // ...
]</p>
<p>init() 함수에서 이 actions 매개변수는 pell.js에 정의된 actions 개체와 결합됩니다. actions 개체를 기본 설정으로 사용할 수 있습니다.</p>
<pre class="brush:php;toolbar:false">// pell.js 中的 init() 函数
settings.actions = settings.actions
  ? settings.actions.map(action=> {
    if (typeof action === 'string') return actions[action]
    // 如果参数中传入的 action 已经在默认设置中存在，用传入的参数覆盖默认设置
    else if (actions[action.name]) {
      return { ...actions[action.name], ...action }
    }
    return action
  })
  : Object.keys(actions).map(action=> actions[action])

init() 함수의 중요한 부분은 편집 가능한 영역을 만드는 것입니다. 여기서 p 요소가 생성되고 해당 contentEditable 속성이 true로 설정되므로 앞서 언급한 document.execCommand()를 여기에서 사용할 수 있습니다.

// 创建编辑区域的元素
settings.element.content = document.createElement('p')
// 让 p 成为可编辑状态
settings.element.content.contentEditable = true
settings.element.content.className = settings.classes.content
// 当用户输入时，更新页面的相应部分
settings.element.content.oninput = event=> 
  settings.onChange(event.target.innerHTML)
settings.element.content.onkeydown = preventTab
settings.element.appendChild(settings.element.content)

마지막으로 "링크 삽입"을 예로 들어 전체 편집기 프로세스를 정리합니다.
```
{
  name: 'link',
  result: ()=> {
    const url = window.prompt('Enter the link URL')
    if (url) window.pell.exec('createLink', ensureHTTP(url))
  }
}
```
2. init() 실행 과정에서 정의된 액션 객체에 link 속성이 있는지 확인합니다. 확인한 결과 해당 속성이 존재합니다
```
link: {
  icon: '',
  title: 'Link',
  result: ()=> {
    const url = window.prompt('Enter the link URL')
    if (url) exec('createLink', url)
  }
}
```
들어오는 매개변수에 결과 항목이 포함되어 있기 때문에 들어오는 결과를 사용하여 링크 객체의 기본값을 대체한 다음 수정된 링크 객체를 settings.actions 배열에 넣습니다.

3. settings.actions 배열을 반복하여 도구 모음을 생성합니다. 링크 개체는 "링크 삽입" 버튼을 생성하는 항목 중 하나로 사용됩니다. 결과 속성은 클릭 이벤트가 됩니다.

4. "링크 삽입" 버튼을 클릭하면 URL을 입력하라는 메시지가 표시되며, 편집 영역에 링크를 삽입하려면 exec('createLink', url)을 호출하세요.

에디터의 다른 버튼의 기능적 프로세스도 비슷합니다.

이렇게 해서 Pell Editor의 내용은 대부분 설명했고, 나머지 부분은 소스코드를 살펴봐야 합니다. 결국 프로젝트 코드가 길지 않아서 텍스트 에디터에 대한 입문용으로는 좋은 것 같습니다.

JavaScript 리치 텍스트 편집기를 구현하는 간단한 방법

관련 기사