WYSIWYG HTML 편집기를 사용해보세요-JS 튜토리얼-php.cn

WYSIWYG HTML 편집기를 사용해보세요

WBOY

풀어 주다： 2024-08-29 12:43:23

원래의

1282명이 탐색했습니다.

Make WYSIWYG HTML Editors Work for You

프로젝트에 WYSIWYG HTML 편집기를 사용하십니까? 이러한 사용자 친화적인 도구는 원시 HTML 코드를 탐구하지 않고도 웹 콘텐츠를 제작할 수 있는 직관적인 인터페이스를 제공하여 웹 개발자와 콘텐츠 제작자 사이에서 점점 인기를 얻고 있습니다. 이러한 편집기는 기본적으로 강력하지만 사용자 정의를 통해 진정한 잠재력을 발휘하는 경우가 많습니다.

주요 시사점

WYSIWYG HTML 편집기에 새로운 기능을 추가할 수 있습니다
사용자 정의 버튼을 사용하면 콘텐츠 형식을 쉽게 지정할 수 있습니다.
편집기 모양을 변경하면 사이트 스타일에 맞출 수 있습니다

왜 WYSIWYG HTML 편집기를 변경해야 합니까?

WYSIWYG HTML 편집기를 변경하면 다음이 가능합니다.

프로젝트에 필요한 기능 추가
사용자가 더욱 쉽게 사용할 수 있도록
사이트 전체에서 동일한 형식을 유지하세요

이제 실제 예를 통해 이를 어떻게 수행할 수 있는지 살펴보겠습니다.

편리한 하이라이트 버튼 추가

우리는 종종 일부 텍스트를 돋보이게 만들고 싶습니다. 이 작업을 빠르게 수행하는 버튼을 추가해 보겠습니다. 먼저 페이지에 편집기를 추가해야 합니다.

<link href="https://cdn.jsdelivr.net/npm/froala-editor@latest/css/froala_editor.pkgd.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/froala-editor@latest/js/froala_editor.pkgd.min.js"></script>

로그인 후 복사

그런 다음 새 버튼을 추가할 수 있습니다.

// Make a new icon
FroalaEditor.DefineIcon('highlight', {NAME: 'star'});

// Create a new button
FroalaEditor.RegisterCommand('highlight', {
  title: 'Highlight',
  icon: 'highlight',
  focus: true,
  undo: true,
  refreshAfterCallback: true,
  callback: function () {
    this.html.insert('<span class="custom-highlight">' + this.selection.text() + '</span>');
  }
});

// Start the editor with our new button
new FroalaEditor('#editor', {
  toolbarButtons: ['bold', 'italic', 'underline', '|', 'highlight']
});

로그인 후 복사

이 코드는 몇 가지 작업을 수행합니다.

버튼에 대한 새 아이콘을 만듭니다
누군가 버튼을 클릭하면 편집자에게 무엇을 해야 할지 알려줍니다.
툴바에 새 버튼이 추가됩니다

강조표시된 텍스트를 보기 좋게 만들기 위해 몇 가지 스타일을 추가합니다.

.fr-view .custom-highlight {
  background-color: yellow;
  padding: 2px;
  border-radius: 2px;
}

로그인 후 복사

편집기 보기 좋게 만들기

편집기 모양을 변경할 수도 있습니다. 이를 수행하는 간단한 방법은 다음과 같습니다.

new FroalaEditor('#editor', {
  toolbarButtons: ['bold', 'italic', 'underline', '|', 'highlight'],
  toolbarButtonsSM: ['bold', 'italic', 'underline', '-', 'highlight'],
  placeholderText: 'Type here...',
  charCounterCount: false,
  toolbarSticky: false,
  theme: 'royal'
});

로그인 후 복사

이 변경으로 인해 여러 가지 작업이 수행됩니다.

다양한 화면 크기에 맞게 버튼을 설정합니다
입력할 위치를 표시하는 텍스트를 추가합니다
캐릭터 카운터가 꺼집니다
페이지와 함께 툴바를 이동하게 합니다
미리 만들어진 테마를 사용합니다

WYSIWYG HTML 편집기 변경 팁

편집자를 변경할 때는 다음 팁을 염두에 두세요.

작게 시작: 큰 변화를 시도하기 전에 먼저 작은 변화를 시도하세요.
현재 있는 내용 사용: 가능하면 편집기에 내장된 도구를 사용하세요.
많은 테스트: 변경 사항이 다른 브라우저에서도 작동하는지 확인하세요.
속도를 고려하세요: 큰 변화로 인해 속도가 느려질 수 있으므로 많은 콘텐츠로 테스트하세요.
최신 정보: 도움이 될 만한 새로운 기능을 확인하세요.

다른 프레임워크에서 변경된 편집기 사용

이러한 변경된 편집기를 많은 웹 프레임워크에서 사용할 수 있습니다. React에서 변경된 편집기를 사용하는 방법은 다음과 같습니다.

import React, { useEffect, useRef } from 'react';
import FroalaEditor from 'react-froala-wysiwyg';

const MyEditor = () => {
  const editorRef = useRef(null);

  useEffect(() => {
    if (editorRef.current) {
      FroalaEditor.DefineIcon('highlight', {NAME: 'star'});
      FroalaEditor.RegisterCommand('highlight', {
        title: 'Highlight',
        icon: 'highlight',
        focus: true,
        undo: true,
        refreshAfterCallback: true,
        callback: function () {
          this.html.insert('<span class="custom-highlight">' + this.selection.text() + '</span>');
        }
      });
    }
  }, []);

  const config = {
    toolbarButtons: ['bold', 'italic', 'underline', '|', 'highlight'],
    placeholderText: 'Type here...'
  };

  return <FroalaEditor tag='textarea' config={config} ref={editorRef} />;
};

export default MyEditor;

로그인 후 복사

이 React 구성요소는 변경된 편집기를 래핑하여 React 앱에서 쉽게 사용할 수 있도록 합니다.