서식 있는 텍스트 편집기: 선택 방법

React-rich 텍스트 편집기를 사용하면 웹 앱의 콘텐츠를 쉽게 수정할 수 있습니다. 그러나 재발명해야 하는 상황이 있습니다.

예를 들어 부팅 속도가 느리고 모바일 장치에서 잘 보이지 않습니다. 그렇다면 문제를 해결하기 위해 React-rich 텍스트 편집기를 어떻게 재창조할 수 있습니까? 이 게시물에서 모든 세부 정보를 찾을 수 있습니다.

React-Rich 텍스트 편집기란?

React-rich 텍스트 편집기는 JavaScript 웹 애플리케이션에 풍부한 편집 기능을 제공하는 도구입니다. 블로그 게시물이나 포럼 게시물을 작성하는 데 사용할 수 있습니다. 풍부한 도구 세트를 사용하여 콘텐츠를 쉽게 편집할 수 있습니다.

텍스트의 형식과 정렬을 변경할 수 있습니다.

또한 이미지, 비디오 및 링크를 삽입할 수 있습니다. 그러나 HTML 또는 CSS 코드를 작성할 필요는 없습니다. 그러나 시각적으로 모든 것을 할 수 있습니다.

React Rich Text Editor의 재창조를 고려해야 하는 이유는 무엇입니까?

초고속 리치 텍스트 편집기가 필요합니까?

텍스트 편집기가 부팅될 때까지 오래 기다리기를 원하지 않습니다. 사용자 경험에 영향을 미칠 수 있습니다. 밀리초 안에 초기화할 수 있는 초고속 React-rich 텍스트 편집기가 있다면 도움이 될 것입니다. 웹 앱 사용자가 도구를 빠르게 사용할 수 있습니다.

결과적으로 콘텐츠를 즉시 편집할 수 있습니다. 예를 들어 Froala는 초고속 편집자입니다. 40밀리초 이내에 초기화할 수 있습니다. 즉, 눈 깜짝할 사이보다 6배 빠르다. 따라서 웹 애플리케이션 사용자는 그것을 사용하는 것을 좋아할 것입니다.

모바일을 지원하는 텍스트 편집기가 필요합니까?

모바일 지원은 또 다른 중요한 요소입니다. 사람들은 더 이상 PC와 노트북에서만 콘텐츠를 편집하지 않습니다. 스마트폰과 태블릿도 사용합니다. 그렇기 때문에 모바일 지원을 제공하는 React 텍스트 편집기가 필요합니다. 사용자가 이동 중에도 콘텐츠를 편집할 수 있습니다.

Froala는 완전한 모바일 지원을 제공합니다. 포맷 컨트롤은 데스크톱, 노트북, 스마트폰을 포함한 모든 기기에서 동일하게 나타납니다. 또한 모바일 장치에서 이미지와 비디오의 크기를 조정할 수 있습니다. 이러한 기능을 지원하는 최초의 React 텍스트 편집기입니다.

RTL을 지원하는 React 텍스트 편집기가 필요합니까?

아랍어나 히브리어와 같은 일부 언어는 오른쪽에서 왼쪽으로 읽습니다. 반대 방향으로 읽는 영어와는 상당히 다릅니다.

예를 들어 React 앱이 해당 언어 중 하나를 지원하는 경우 RTL 기능을 제공하는 편집기를 가져와야 합니다. 사용자가 오른쪽에서 왼쪽으로 입력할 수 있습니다.

Froala는 RTL 기능을 지원합니다. 아랍어를 선택할 때마다 도구 모음이 자동으로 이동하고 조정됩니다. 결과적으로 자연스럽게 오른쪽에서 왼쪽으로 입력할 수 있습니다.

입력 방향이 RTL로 설정된 경우 Froala는 다음과 같습니다.

서식 있는 텍스트 편집기의 기능을 확장해야 합니까?

편집기에 고급 기능을 추가해야 하는 경우가 있습니다. 예를 들어 웹 앱 사용자는 수학 및 화학 방정식을 삽입해야 합니다.

그러나 서식 있는 텍스트 편집기는 유사한 기능을 제공하지 않습니다. 기능을 처음부터 개발하고 싶지는 않습니다. 많은 시간과 비용이 소요됩니다.

매우 효과적인 플러그인을 지원하는 React-rich 텍스트 편집기가 필요합니다. 고급 기능을 빠르게 통합할 수 있습니다. 예를 들어, Froala는 Mathtype, Embedly, 특수 문자 등과 같은 30개의 기본 플러그인을 지원합니다. 이를 활용하여 손쉽게 기능을 확장할 수 있습니다.

Froala를 React 애플리케이션에 어떻게 통합할 수 있습니까?

implementing Froala into React web apps의 프로세스는 간단합니다. 다음 단계를 따라야 합니다.

1) 먼저 Froala의 CSS 파일을 가져와야 합니다. 또한 편집기 구성 요소를 가져와야 합니다.

import React from 'react';
import ReactDOM from 'react-dom';

// Require Editor CSS files.
import 'froala-editor/css/froala_style.min.css';
import 'froala-editor/css/froala_editor.pkgd.min.css';

import FroalaEditorComponent from 'react-froala-wysiwyg';

2) 다음 줄을 사용하여 Froala Editor 구성 요소를 렌더링할 수 있습니다.

ReactDOM.render(<FroalaEditorComponent tag='textarea'/>, document.getElementById('editor'));

3) 이제 HTML 파일로 이동할 수 있습니다. HTML 요소에 ID를 전달하여 UI에 편집기를 추가할 수 있습니다.

<div  id="editor">
</div>

이것이 Froala를 React 웹 애플리케이션에 통합하는 방법입니다. 보시다시피 프로세스는 간단합니다. 몇 줄의 코드만 작성하면 됩니다. 번거로움이 없습니다.

그러나 CSS 파일을 로드하기 위한 올바른 Webpack 설정이 있는지 확인하십시오. Webpack 4를 사용하는 경우 설정은 다음과 같습니다.

var webpack = require("webpack");

module.exports = {
  module: {
    rules: [
      {
        test: /\.jsx$/,
        use: {
          loader: 'babel-loader',
          options: {
            cacheDirectory: true,
            presets: ['react','es2015', 'stage-2']
          }
        }
      }, {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      },
      {
        test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
        use: "url-loader?limit=10000&mimetype=application/font-woff"
      }, {
        test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
        use: "url-loader?limit=10000&mimetype=application/font-woff"
      }, {
        test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
        use: "url-loader?limit=10000&mimetype=application/octet-stream"
      }, {
        test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
        use: "file-loader"
      }, {
        test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
        use: "url-loader?limit=10000&mimetype=image/svg+xml"
      }
    ]
  },
  resolve: {
    modules: ['node_modules']
  }
};

소스 코드:

소스 코드right here를 얻을 수 있습니다.

사진 제공: Maayan Nemanov on Unsplash