kbsnd3 v0.0.5

English | 简体中文

Brilliant Editor-EN

A web editor of rich text and markdown based on the draft-js. Be suitable for React framework, compatible with the mainstream of modern browsing. Following the input real-time preview.

• Online Demo

Features

• :gem: Elegant and beautiful
• :triangular_ruler: Quick developmentAdvocate zero-configuration or less-configuration construction to achieve rapid introduction in the project.
• :rocket: Support Markdown syntax
• :star: Support shortcut keys Supporting more than 20 kinds of shortcut keys instead of mouse clicks to improve input efficiency
• :iphone: ResponsiveSupport WYSIWYG
• :art: Customization code themeConfigurable code themes meet diverse brand demands
• :white_check_mark: Multi-format exportMultiple export formats are available

installation

# Install using yarn
yarn add brilliant-editor
# Install using npm
npm install brilliant-editor --save

1. Zero configuration to quick start

• Default editor component and .css are only required.

import Brilliant from 'brilliant-editor';
import React from 'react';
import 'brilliant-editor/dist/index.css';

const App = () => {
  return (
    <div>
      <Brilliant />
    </div>
  );
};

export default App;

2. Data management (import, export)

(1). Import

• The initial value of the editor is provided in four initial formats: 'HTML', 'Markdown', 'Raw', 'EditorState'.
• You can import the default value you need in your project through 'createFrom'.

import Brilliant, { createFrom } from 'brilliant-editor';
import React, { useRef, useState } from 'react';
import 'brilliant-editor/dist/index.css'

const App = () => {
  return (
    <div>
      <Brilliant value={editorState} />
    </div>
  );
};

export default App;

2. Export

Also, the editor value provides four export formats, 'HTML', 'Markdown', 'Raw', 'EditorState'. You can export the values you need to save in your project through the 'useRef()' method provided by Hooks.

import Brilliant, { createFrom, editorFunction } from 'brilliant-editor';
import React, { useRef, useState } from 'react';
import 'brilliant-editor/dist/index.css'

const App = () => {
  const [editorState, setEditorState] = useState(() =>
    createFrom(`<h1>Brilliant Editor </h1>`, 'HTML')
  );

  const editorFC = useRef();
  const editor: editorFunction = editorFC.current;

  const outValue = () => {
    if (editor) {
      //console.log(editorState); // `EditorState`
      //console.log(editor.getMarkdownValue()); // `Markdown`
      //console.log(editor.getRawValue()); // `Raw`
      console.log(editor.getHtmlValue()); // `HTML`
    }
  };
  return (
    <div>
      <Brilliant editorRef={editorFC} value={editorState} />
      <button onClick={outValue}>Log Data</button>
    </div>
  );
};

export default App;

Since Markdow and HTML data formats are not fully adapted, some styles may be lost. It is recommended to save data in RAW or EditorState formats

2. Image uploading configuration

• Support clipboard picture paste and manual upload and Markdown syntax upload three ways.
• If not configured by default, base64 local image scheme will be used.
• If you need to configure remote image links, please pass in 'handleImgupload' method for management, according to the following example, custom processing image upload.
• An image uploading service project based on Node.js

import Brilliant from 'brilliant-editor';
import React from 'react';
import 'brilliant-editor/dist/index.css'

const App = () => {
  const handleImgUpload = async (
    data: FormData
  ): Promise<{ url: string, id: any }> => {
    const url = 'http://orime.top:3232/upload';
    let res: any = {};
    try {
      res = await axios.post(url, data, {
        headers: {
          'Content-Type': 'multipart/form-data',
        },
      });
    } catch (error) {
      alert('The pic upload api is not available.');
    }
    return { url: res.data.url, id: res.data.id };
  };

  return (
    <div>
      <Brilliant
        handleImgUpload={handle}
        imgControls={true}
      />
    </div>
  );
};

export default App;

3. Control configuration

• In the zero-configuration scheme, controls are present by default
• There are two kinds of controls
  • Fixed Controls
  • Float Controls
• The properties to change controls display or hidden is disableFixedControls（FixedControls）and disableFloatControls（FloatControls）
  • Default is false, which means not only is used
  • Passing true disables the associated control
• The properties to configure the control items is excludeFixedControls and excludeFloatControls
  • Note: Passing in this property and specifying an exclusion item excludes a portion of the control
  • If not configured, all control items will be displayed.

import Brilliant from 'brilliant-editor';
import React from 'react';
import 'brilliant-editor/dist/index.css'

const App = () => {
  const excludeFixedControls: ControlItems = [
    'BOLD',
    'header-five',
    'header-six',
  ];
  const excludeFloatControls: ControlItems = ['ordered-list-item', 'center'];

  return (
    <div>
      <Brilliant
        excludeFixedControls={excludeFixedControls}
        excludeFloatControls={excludeFloatControls}
        disableFixedControls
        disableFloatControls
      />
    </div>
  );
};

export default App;

4. Customize and modify the theme scheme

• Support for importing topic schemas supported by prism-themes.

import Brilliant from 'brilliant-editor';
import React from 'react';
import 'brilliant-editor/dist/index.css'
import 'brilliant-editor/dist/prism-themes/prism-atom-dark.css'; // * use other code highlight theme

const App = () => {
  return (
    <div>
      <Brilliant />
    </div>
  );
};

Thanks

• Thanks to Draftjs-utils developed by Jyoti Puri for help and react-draft-wysiwyg References, Thanks!
• Thanks to draft-js-plugins-editor for offer base component, Thanks!
• Thanks to draft-js-prism for offer code highlight, Thanks!