About we-editool

light-weight : The package is very light, about 24KB in compression.

tagless : Users don't need to know the tags.

simple : You can use 1 component for edit text.

Getting Started

Installation

Use the package manager npm to install we-editool.

npm install we-editool

yarn add we-editool

Usage

when use WeEditor

import React from 'react';
import { WeEditor, WeEditorRef } from 'we-editor';

function ReactComponent() {
  const editorRef = useRef<WeEditorRef>(null);

  const getHTML = () => editorRef.current?.getHTML();
  const getMarkdown = () => editorRef.current?.getMarkdown();

  return <WeEditor ref={editorRef} />;
}

use your custom editor

import React from 'react';
import { WeToolbar, htmlToMarkdown, WE_EDITOR_ID } from 'we-editor';

function CustomEditor() {
  const editorRef = useRef<HTMLDivElement>(null);

  const getHTML = () => editorRef.current?.innerHTML;
  const getMarkdown = () => htmlToMarkdown(editorRef.current?.innerHTML);

  return (
    <>
      <div contentEditable ref={editorRef} id={WE_EDITOR_ID} className="editor" />
      <WeToolbar editorRef={editorRef} />
    </>
  );
}

API

WeEditor

WeEditorProps

| name | description | type | default | | --------------- | ----------------------------- | ------- | ------- | | initialHTML | initiate with html string | string? | x | | initialMarkdown | initiate with markdown string | string? | x |

WeEditorRef

| name | description | input | output | | ----------- | ------------------- | -------- | ------ | | getHTML | get html string | no input | string | | getMarkdown | get markdown string | no input | string |

WeToolbar

WeToolbarProps

| name | description | type | default | | --------- | ----------------------- | ------------------------------- | ------- | | editorRef | editor reference object | React.RefObject | x |

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request to develop branch

License

Distributed under the MIT License. See LICENSE for more information.

Contact

JaeJun Jo - @jtree03 - [email protected]

Project Link: https://github.com/wecode-bootcamp/we-editool