we-editool

light-weight, tagless and simple text edit tool!
Explore the docs »

Report Bug · Request Feature

Table of Contents

1. About we-editool
2. Getting Started
   • Installation
3. Usage
4. API
5. Contributing
6. License
7. Contact
8. Acknowledgments

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.

(back to top)

Getting Started

Installation

Use the package manager npm to install we-editool.

npm install we-editool

yarn add we-editool

(back to top)

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} />
    </>
  );
}

(back to top)

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

(back to top)

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

(back to top)

License

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

(back to top)

Contact

JaeJun Jo - @jtree03 - [email protected]

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

(back to top)