Loading...
Loading...
Configure options, test the editor, and share your setup via URL.
Enable multiple editable regions
// npm i suneditor@3.0.0
import suneditor, { plugins } from "suneditor";
import "suneditor/css/editor";
import "suneditor/css/contents";
import CodeMirror from "codemirror";
import "codemirror/lib/codemirror.css";
import "codemirror/mode/htmlmixed/htmlmixed";
const editor = suneditor.create(document.getElementById("editor"), {
plugins,
externalLibs: {
codeMirror: { src: CodeMirror },
},
buttonList: [
["undo", "redo"],
"|",
["blockStyle", "font", "fontSize"],
"|",
["bold", "italic", "underline", "strike"],
"|",
["fontColor", "backgroundColor"],
"|",
["removeFormat"],
"|",
["outdent", "indent", "align", "list"],
"|",
["table", "link", "image"],
"|",
["fullScreen", "codeView"],
[
"%768",
[
["undo", "redo"],
"|",
[":Format-default.more_paragraph", "blockStyle", "font", "fontSize"],
[":Text-default.more_text", "bold", "italic", "underline", "strike", "|", "fontColor", "backgroundColor", "|", "removeFormat"],
["outdent", "indent", "align", "list"],
"|",
[":Insert-default.more_plus", "table", "link", "image"],
"|",
["fullScreen", "codeView"]
]
],
[
"%576",
[
["undo", "redo"],
[":Format-default.more_paragraph", "blockStyle", "font", "fontSize"],
[":Text-default.more_text", "bold", "italic", "underline", "strike", "|", "fontColor", "backgroundColor", "|", "removeFormat"],
[":Insert-default.more_plus", "outdent", "indent", "align", "list", "|", "table", "link", "image"],
["-right", ":View-default.more_view", "fullScreen", "codeView"]
]
]
],
});