Nodejs 后台在线编辑器推荐

Nodejs 后台在线编辑器推荐

在开发基于 Node.js 的后台管理系统时，一个强大的在线编辑器可以极大地提升用户体验。本文将介绍一些流行的 Node.js 在线编辑器插件，并提供简单的使用示例。

1. TinyMCE

TinyMCE 是一个功能丰富的在线文本编辑器，支持多种插件和自定义配置。它不仅适用于前端，也可以集成到 Node.js 后端系统中。

安装

npm install @tinymce/tinymce-react

使用示例

import React from 'react';
import { Editor } from '@tinymce/tinymce-react';

function App() {
  return (
    <Editor
      initialValue="<p>初始内容</p>"
      init={{
        height: 500,
        menubar: false,
        plugins: [
          'advlist autolink lists link image charmap print preview anchor',
          'searchreplace visualblocks code fullscreen',
          'insertdatetime media table paste code help wordcount'
        ],
        toolbar:
          'undo redo | formatselect | bold italic backcolor | \
          alignleft aligncenter alignright alignjustify | \
          bullist numlist outdent indent | removeformat | help'
      }}
    />
  );
}

export default App;

2. Quill

Quill 是另一个轻量级但功能强大的富文本编辑器。它的 API 设计简洁，易于集成。

安装

npm install react-quill

使用示例

import React, { useState } from 'react';
import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css';

function App() {
  const [content, setContent] = useState('<p>初始内容</p>');

  return (
    <ReactQuill
      theme="snow"
      value={content}
      onChange={(value) => setContent(value)}
    />
  );
}

export default App;

3. CKEditor 5

CKEditor 5 提供了现代的富文本编辑体验，支持多种扩展和插件。它是 CKEditor 4 的升级版，具有更好的性能和更丰富的功能。

安装

npm install @ckeditor/ckeditor5-react @ckeditor/ckeditor5-build-classic

使用示例

import React from 'react';
import CKEditor from '@ckeditor/ckeditor5-react';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';

function App() {
  return (
    <CKEditor
      editor={ClassicEditor}
      data="<p>初始内容</p>"
      onReady={editor => {
        console.log('Editor is ready to use!', editor);
      }}
      onChange={(event, editor) => {
        const data = editor.getData();
        console.log({ event, editor, data });
      }}
      onBlur={(event, editor) => {
        console.log('Blur.', editor);
      }}
      onFocus={(event, editor) => {
        console.log('Focus.', editor);
      }}
    />
  );
}

export default App;

以上是三种流行的 Node.js 后台在线编辑器插件及其简单使用示例。选择合适的编辑器可以根据具体项目需求和团队熟悉度来决定。希望这些示例能够帮助你快速上手！