Need help with suneditor-react?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

mkhstar
243 Stars 65 Forks 150 Commits 15 Opened issues

Description

A React Component for SunEditor (WYSIWYG editor)

Services available

!
?

Need anything else?

Contributors list

suneditor-react

A React Component for SunEditor

NPM JavaScript Style Guide

WYSIWYG HTML Editor

Install

npm

$ npm install --save suneditor suneditor-react # make sure to install suneditor yourself

Getting Started

import React from 'react';
import SunEditor from 'suneditor-react';
import 'suneditor/dist/css/suneditor.min.css'; // Import Sun Editor's CSS File

const MyComponent = props => { return (

My Other Contents

); }; export default MyComponent;

Next.js

To use suneditor-react with Next.js, please use the dynamic import syntax like below:

import React from 'react';
import dynamic from "next/dynamic";
import 'suneditor/dist/css/suneditor.min.css'; // Import Sun Editor's CSS File

const SunEditor = dynamic(() => import("suneditor-react"), { ssr: false, });

const MyComponent = props => { return (

My Other Contents

); }; export default MyComponent;

Props

About Core

Note:

suneditor-react
doesn't expose the core object in the callback functions such as
onScroll
etc. This is because it can be easily retrieved by using the
getSunEditorInstance
like below.
// Javascript Version

import React, { useRef, useEffect } from "react"; import SunEditor from 'suneditor-react'; import 'suneditor/dist/css/suneditor.min.css'; // Import Sun Editor's CSS File

const MyComponent = props => { /**

  • @type {React.MutableRefObject} get type definitions for editor

  • / const editor = useRef();

    // The sunEditor parameter will be set to the core suneditor instance when this function is called const getSunEditorInstance = (sunEditor) => {

    editor.current = sunEditor;

    };

    return (

    <div>
        <p> My Other Contents </p>
        <suneditor getsuneditorinstance="{getSunEditorInstance}"></suneditor>
    </div>

    ); }; export default MyComponent;

// Typescript Version

import React, { useRef, useEffect } from "react"; import SunEditor from 'suneditor-react'; import SunEditorCore from "suneditor/src/lib/core"; import 'suneditor/dist/css/suneditor.min.css'; // Import Sun Editor's CSS File

const MyComponent = props => { const editor = useRef();

// The sunEditor parameter will be set to the core suneditor instance when this function is called
 const getSunEditorInstance = (sunEditor: SunEditorCore) =&gt; {
    editor.current = sunEditor;
};
return (
    <div>
        <p> My Other Contents </p>
        <suneditor getsuneditorinstance="{getSunEditorInstance}"></suneditor>
    </div>
);

}; export default MyComponent;

Basic Settings

lang

Language of editor

//...
render() {
    return 
    // Default is en
    // lang prop can be one of the strings provided in this array ["en", "da", "de", "es", "fr", "ja", "ko", "pt_br", "ru", "zh_cn", "ro", "pl", "ckb", "lv", "se", "ua", "he", "it"]
    // Alternatively, an object of your language can be passed to this prop. To learn how to do it refer to the bottom of the page
}

name

HTML form name of editor

This is used to set the HTML form name of the editor. This means on HTML form submission, it will be submitted together with contents of the editor by the name provided.

//...
render() {
    return 
}

defaultValue

Set Editor's default value

//...
// Sets the default value of the editor.
// This is useful if you don't want the onChange method to be called on render.
// If you want the onChange method to be called on render please use the setContents prop
render() {
    return 
}

width

Set Editor's width

//...
// px and percentage values are accepted
// eg width="100%" or width="500px"
// default is 100%
render() {
    return 
}

height

Set Editor's height

//...
// px and percentage values are accepted
// eg height="100%" or height="100px"
render() {
    return 
}

placeholder

Set Editor's placeholder

//...
render() {
    return 
}

autoFocus

Should editor focus when initialized

//...
render() {
    return 
}

setOptions

Set Options (Settings) for the editor Click to see all options available

Important Note: Some toolbar buttons in

suneditor
require specific plugins to make them work properly. For example when you specify 'font' in the button list, you will need to import the required plugin from
suneditor
.
suneditor-react
by default loads all plugins. To change this behaviour, you can pass a plugin list of only the plugins you would like to load to the plugin option. This will override the default behaviour. To disable the loading of all plugins, set the
setAllPlugins
prop to false. Read More by clicking this
import SunEditor,{buttonList} from "suneditor-react";
/*
    buttonList.basic = basic buttons for wordprocessing
    buttonList.formatting = most tools used for formatting - This is the default option
    buttonList.complex = contains most of the buttons
*/
//...
render() {
    return 
}

setAllPlugins

Sets all plugins used by buttons. Default value is true

import SunEditor,{buttonList} from "suneditor-react";

//... render() { return // When set to false, you must explicitly set required plugins }

setContents

Set Editor's Content

Note: To set the initial contents of the editor without calling the

onChange
event please use the
defaultValue
prop.
setContents
is used to set the contents of the editor programmatically.
//...
render() {
    return 
}

appendContents

Append Editor Content

//...
render() {
    return 
}

setDefaultStyle

Set the default style of the editor's edit area

//...
render() {
    return 
}

Editor Status

disable

Disable Editor

//...
render() {
    // set to false to enable, default value is false
    return 
}

hide

Hide Editor

//...
render() {
    // set to false to hide, default value is false
    return 
}

hideToolbar

Hide Editor Toolbar

//...
render() {

// set to false to hide toolbar, default value is false
return <suneditor hidetoolbar="{true}"></suneditor>

}

disableToolbar

Disable Editor Toolbar

//...
render() {
    // set to false to enable toolbar, default value is false
    return 
}

Events

Note that you need to bind the function passed to the event in the constructor if you are using a class Component, or use arrow functions instead. This is just how react works. Otherwise it won't work. This documentation assumes you bind all your class component methods to the constructor. Eg below:

constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this)
}

onChange

Has the content inside the editor been changed?

handleChange(content){
    console.log(content); //Get Content Inside Editor
}
render() {
    return 
}

onScroll

Has the editor been scrolled?

handleScroll(event){
    console.log(event); //Get the scroll event
}
render() {
    return 
}

onClick

Has the editor been clicked?

handleClick(event){
    console.log(event); //Get the click event
}
render() {
    return 
}

onMouseDown

Has the mouse is pressed and not yet released?

handleMouseDown(event){
    console.log(event); //Get the click event
}
render() {
    return 
}

onInput

Has the editor received input?

handleInput(event){
    console.log(event); //Get the click event
}
render() {
    return 
}

onKeyUp

Has the key been released up in the editor?

handleKeyUp(event){
    console.log(event); //Get the keyup event
}
render() {
    return 
}

onFocus

Has the editor been focused?

handleFocus(event){
    console.log(event); //Get the focus event
}
render() {
    return 
}

onBlur

Has the editor been blurred?

From the second parameter you can get the contents of the editor.

handleBlur(event, editorContents){
    console.log(event, editorContents); //Get the blur event
}
render() {
    return 
}

onLoad

Has the editor been reloaded with setOptions?

handleLoad(reload){
    console.log(reload); //Boolean
}
render() {
    return 
}

onKeyDown

Has the key been pressed down in the editor?

handleKeyDown(event){
    console.log(event); //Get the keydown event
}
render() {
    return 
}

onDrop

Has something been dropped into the editor?

handleDrop(event){
    console.log(event); //Get the drop event
}
render() {
    return 
}

onImageUploadBefore

Before an image is uploaded into the editor

handleImageUploadBefore(files, info, uploadHandler){
    // uploadHandler is a function
    console.log(files, info)
}
render() {
    return 
}

onImageUpload

Has an image been uploaded into the editor?

handleImageUpload(targetImgElement, index, state, imageInfo, remainingFilesCount){
    console.log(targetImgElement, index, state, imageInfo, remainingFilesCount)
}
render() {
    return 
}

onImageUploadError

Has an image uploaded to the editor resulted in an error?

handleImageUploadError(errorMessage, result){
    console.log(errorMessage, result)
}
render() {
    return 
}

onVideoUploadBefore

Before a video is uploaded to the editor

handleVideoUploadBefore(files, info, uploadHandler){
    // uploadHandler is a function
    console.log(files, info)
}
render() {
    return 
}

onVideoUpload

Has an image been uploaded into the editor?

handleVideoUpload(targetElement, index, state, info, remainingFilesCount){
    console.log(targetElement, index, state, info, remainingFilesCount)
}
render() {
    return 
}

onVideoUploadError

Has a video uploaded to the editor resulted in an error?

handleVideoUploadError(errorMessage, result){
    console.log(errorMessage, result)
}
render() {
    return 
}

onAudioUploadBefore

Before an audio is uploaded to the editor

handleAudioUploadBefore(files, info, uploadHandler){
    // uploadHandler is a function
    console.log(files, info)
}
render() {
    return 
}

onAudioUpload

Has an audio been uploaded into the editor?

handleAudioUpload(targetElement, index, state, info, remainingFilesCount){
    console.log(targetElement, index, state, info, remainingFilesCount)
}
render() {
    return 
}

onAudioUploadError

Has an audio uploaded to the editor resulted in an error?

handleAudioUploadError(errorMessage, result){
    console.log(errorMessage, result)
}
render() {
    return 
}

onResizeEditor

Has the editor been resized?

handleOnResizeEditor(height, prevHeight){
    console.log(height, prevHeight)
}
render() {
    return 
}

onCopy

Has something been copied from the suneditor?

handleCopy(e, clipboardData){
    console.log(e, clipboardData)
}
render() {
    return 
}

onCut

Has something been cut from the suneditor?

handleCut(e, clipboardData){
    console.log(e, clipboardData)
}
render() {
    return 
}

onPaste

Has something been pasted into the suneditor?

handlePaste(e, cleanData, maxCharCount){
    console.log(e, cleanData, maxCharCount)
}
render() {
    return 
}

imageUploadHandler

Replaces the default callback function of the image upload

imageUploadHandler(xmlHttpRequest, info, core){
    console.log(xmlHttpRequest, info, core)
}
render() {
    return 
}

toggleCodeView

An event when toggling between code view and wysiwyg view

toggleCodeView(isCodeView){
    console.log(isCodeView)
}
render() {
    return 
}

toggleFullScreen

An event when toggling full screen

toggleFullScreen(isFullScreen){
    console.log(isFullScreen)
}
render() {
    return 
}

showInline

Called just before the inline toolbar is positioned and displayed on the screen.

showInline(toolbar, context){
    console.log(toolbar, context)
}
render() {
    return 
}

showController

Called just after the controller is positioned and displayed on the screen.

showController(name, controllers){
    console.log(name, controllers)
}
render() {
    return 
}

Editor Language Object

You can translate the object below to any other language and pass it to the lang prop to set your locale language if it is not part of the strings of array above. Note: You will be aided by your editors intellisense

{

toolbar: {

    default: 'Default',

    save: 'Save',

    font: 'Font',

    formats: 'Formats',

    fontSize: 'Size',

    bold: 'Bold',

    underline: 'Underline',

    italic: 'Italic',

    strike: 'Strike',

    subscript: 'Subscript',

    superscript: 'Superscript',

    removeFormat: 'Remove Format',

    fontColor: 'Font Color',

    hiliteColor: 'Hilite Color',

    indent: 'Indent',

    outdent: 'Outdent',

    align: 'Align',

    alignLeft: 'Align left',

    alignRight: 'Align right',

    alignCenter: 'Align center',

    alignJustify: 'Align justify',

    list: 'list',

    orderList: 'Ordered list',

    unorderList: 'Unordered list',

    horizontalRule: 'horizontal line',

    hr_solid: 'solid',

    hr_dotted: 'dotted',

    hr_dashed: 'dashed',

    table: 'Table',

    link: 'Link',

    image: 'Image',

    video: 'Video',

    fullScreen: 'Full screen',

    showBlocks: 'Show blocks',

    codeView: 'Code view',

    undo: 'Undo',

    redo: 'Redo',

    preview: 'Preview',

    print: 'print',

    tag_p: 'Paragraph',

    tag_div: 'Normal (DIV)',

    tag_h: 'Header',

    tag_blockquote: 'Quote',

    tag_pre: 'Code',

    template: 'Template'

},

dialogBox: {

    linkBox: {

        title: 'Insert Link',

        url: 'URL to link',

        text: 'Text to display',

        newWindowCheck: 'Open in new window'

    },

    imageBox: {

        title: 'Insert image',

        file: 'Select from files',

        url: 'Image URL',

        altText: 'Alternative text'

    },

    videoBox: {

        title: 'Insert Video',

        url: 'Media embed URL, YouTube'

    },

    caption: 'Insert description',

    close: 'Close',

    submitButton: 'Submit',

    revertButton: 'Revert',

    proportion: 'constrain proportions',

    width: 'Width',

    height: 'Height',

    basic: 'Basic',

    left: 'Left',

    right: 'Right',

    center: 'Center'

},

controller: {

    edit: 'Edit',

    remove: 'Remove',

    insertRowAbove: 'Insert row above',

    insertRowBelow: 'Insert row below',

    deleteRow: 'Delete row',

    insertColumnBefore: 'Insert column before',

    insertColumnAfter: 'Insert column after',

    deleteColumn: 'Delete column',

    resize100: 'Resize 100%',

    resize75: 'Resize 75%',

    resize50: 'Resize 50%',

    resize25: 'Resize 25%',

    mirrorHorizontal: 'Mirror, Horizontal',

    mirrorVertical: 'Mirror, Vertical',

    rotateLeft: 'Rotate left',

    rotateRight: 'Rotate right',

    maxSize: 'Max size',

    minSize: 'Min size',

    tableHeader: 'Table header',

    mergeCells: 'Merge cells',

    splitCells: 'Split Cells',

    HorizontalSplit: 'Horizontal split',

    VerticalSplit: 'Vertical split'

}

}

Appreciation

Special Thanks to JiHong88 for the suneditor package.

Pull Requests

Pull requests are welcome

License

Suneditor React may be freely distributed under the MIT license.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.