Pure JavaScript based WYSIWYG web editor
Demo site : suneditor.com
The Suneditor is based on pure JavaScript
Suneditor is a lightweight, flexible, customizable WYSIWYG text editor for your web applications
Supported Browser -
Chrome, Opera, Firefox, Edge, IE 11, Safari(macOS, IOS), Mobile web$ npm install suneditor$ bower install suneditorDownload source and run
- sample/index.html
<link href="../dist/suneditor.min.css" rel="stylesheet" type="text/css">
<script src="../dist/suneditor.min.js"></script><textarea id="sample">Hi</textarea>/**
* ID : 'suneditor_sample'
* ClassName : 'sun-eidtor'
*/
// ID or DOM object
const suneditor = SUNEDITOR.create((document.getElementById('sample') || 'sample'),{
// All of the plugins are loaded in the "window.SUNEDITOR" object in dist/suneditor.min.js file
// insert options
});When you display a document created by suneditor
You need to include "src/assets/css/suneditor-contents.css" or "dist/css/suneditor.min.css" file.
Then add "sun-editor-editable" to the class name of the Tag element that displays the content.
In "suneditor-contents.css", you can define the style of all the tags created in suneditor.
import 'suneditor/dist/css/suneditor.min.css'
// or
// import 'suneditor/src/assets/css/suneditor.css'
// import 'suneditor/src/assets/css/suneditor-contents.css'
import suneditor from 'suneditor'
// The default button list is created.
suneditor.create('sample', {
// insert options
});import 'suneditor/dist/css/suneditor.min.css'
import suneditor from 'suneditor'
import {en, ko} from 'suneditor/src/lang'
import {align, font, fontSize, fontColor, hiliteColor,
horizontalRule, list, table, formatBlock, link, image, video} from 'suneditor/src/plugins'
suneditor.create('sample', {
plugins: [
align,
font,
fontSize,
fontColor,
hiliteColor,
horizontalRule,
list,
table,
formatBlock,
link,
image,
video
],
buttonList: [
['font', 'fontSize', 'formatBlock'],
['fontColor', 'hiliteColor'],
['align', 'horizontalRule', 'list', 'table'],
['link', 'image', 'video']
],
lang: ko
});import 'suneditor/dist/css/suneditor.min.css'
import suneditor from 'suneditor'
import plugins from 'suneditor/src/plugins'
suneditor.create('sample', {
plugins: plugins,
buttonList: [
['undo', 'redo'],
['font', 'fontSize', 'formatBlock'],
['bold', 'underline', 'italic', 'strike', 'subscript', 'superscript'],
['removeFormat'],
'/', // Line break
['fontColor', 'hiliteColor'],
['indent', 'outdent'],
['align', 'horizontalRule', 'list', 'table'],
['link', 'image', 'video'],
['fullScreen', 'showBlocks', 'codeView'],
['preview', 'print']
]
})
// You can also load what you want
suneditor.create('sample', {
plugins: [
plugins.font
plugins.fontSize,
plugins.formatBlock
],
buttonList: [
['bold', 'underline', 'italic', 'strike', 'subscript', 'superscript'],
['font', 'fontSize', 'formatBlock'],
['removeFormat']
]
})import 'suneditor/dist/css/suneditor.min.css'
import suneditor from 'suneditor'
import {align, font, fontSize, fontColor, hiliteColor,
horizontalRule, list, table, formatBlock, link, image, video} from 'suneditor/src/plugins'
suneditor.create('sample', {
buttonList: [
['undo', 'redo'],
[font, fontSize, formatBlock],
['bold', 'underline', 'italic', 'strike', 'subscript', 'superscript'],
['removeFormat'],
'/', // Line break
[fontColor, hiliteColor],
['indent', 'outdent'],
[align, horizontalRule, list, table],
[link, image, video],
['fullScreen', 'showBlocks', 'codeView'],
['preview', 'print']
],
})The init function can be used by predefining options and calling the create function on the returned object.
The value of the option argument put in the "create" function call takes precedence
import 'suneditor/dist/css/suneditor.min.css'
import suneditor from 'suneditor'
import plugins from 'suneditor/src/plugins'
// all plugins
const initEditor = suneditor.init({
plugins: plugins,
buttonList: [
['undo', 'redo'],
['font', 'fontSize', 'formatBlock'],
['bold', 'underline', 'italic', 'strike', 'subscript', 'superscript'],
['removeFormat'],
'/', // line break
['fontColor', 'hiliteColor'],
['indent', 'outdent'],
['align', 'horizontalRule', 'list', 'table'],
['link', 'image', 'video'],
['fullScreen', 'showBlocks', 'codeView'],
['preview', 'print']
]
});
initEditor.create('sample_1', {
// The value of the option argument put in the "create" function call takes precedence
});
initEditor.create('sample_2', {
// The value of the option argument put in the "create" function call takes precedence
buttonList: [
['undo', 'redo'],
['bold', 'underline', 'italic', 'strike', 'subscript', 'superscript'],
['removeFormat'],
['indent', 'outdent'],
['fullScreen', 'showBlocks', 'codeView'],
['preview', 'print']
]
});plugins: [
font,
fontSize,
formatBlock,
fontColor,
hiliteColor,
align,
horizontalRule,
list,
table,
link,
image,
video
] : Plugins array default : null
fontSize : Change default font-size List default : null
font : Change default font-family List default : null
width : The width size of the editor default : textarea.offsetHeight
height : The height size of the editor default : textarea.style.width||offsetWidth
display : The display property of suneditor default : 'block'
videoX : The default width size of the video frame default : 560
videoY : The default heigth size of the video frame default : 315
showPathLabel : Displays the current node structure to resizebar default : true
popupDisplay : Size of background area when activating dialog window ('full' || '') default : ''
lang : language object (en, ko) default : English
imageFileInput : Choose whether to create a file input tag in the image upload window default : true
imageUrlInput : Choose whether to create a image url input tag in the image upload window default : true
If the value of imageFileInput is false, it will be unconditionally true
imageSize : The default width size of the image frame default : 350
imageUploadUrl : The image upload to server mapping address default : null
ex) "/editor/uploadImage.ajax"
When not used, it enters base64 data
return type : JSONArray [{"SUNEDITOR_IMAGE_SRC":"/download/editorImg/image1.jpg"},
{"SUNEDITOR_IMAGE_SRC":"/download/editorImg/image2.jpg"}]
buttonList : Defines button list to array
default : [
['undo', 'redo'],
// ['font', 'fontSize', 'formatBlock'],
['bold', 'underline', 'italic', 'strike', 'subscript', 'superscript'],
['removeFormat'],
// '/', Line break
// ['fontColor', 'hiliteColor'],
['indent', 'outdent'],
// ['align', 'horizontalRule', 'list', 'table'],
// ['link', 'image', 'video'],
['fullScreen', 'showBlocks', 'codeView'],
['preview', 'print']
]Suneditor may be freely distributed under the MIT license.