I integrated Sun Editor in my react application. I followed the instructions which are given sun editor and integrated successfully. Application is also working good. The only problem when I select font name or font size from drop down, editor works good but selected font name or font size not changed pop up default label. It always shows font instead of selected font name or size.
import './App.css';
import SunEditor from 'suneditor-react';
import 'suneditor/dist/css/suneditor.min.css';
import React, { useRef } from 'react';
function App() {
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;
};
function handleChange(content){
//console.log(content.font.targetText);
}
return (
<div>
<SunEditor
ref={editor}
getSunEditorInstance={getSunEditorInstance}
autofocus={true}
placeholder = 'Enter the text'
width="100%"
min-height = "40rem"
onChange = {handleChange}
setOptions={{
font: [ "Arial",
"Comic Sans MS",
"Courier New",
"Impact",
"Georgia",
"Tahoma",
"Trebuchet MS",
"Verdana",
"Logical",
"Salesforce Sans",
"Garamond",
"Sans-Serif",
"Serif",
"Times New Roman",
"Helvetica"],
fontSize: [8, 10, 12, 14, 16, 18, 20, 22, 24, 26, 28, 30, 32, 36, 42, 55, 60],
popupDisplay: 'local',
buttonList:[
[
"undo",
"redo"
],
[
"font",
"fontSize",
"formatBlock",
],
[
"textStyle",
"fontColor",
"hiliteColor",
"horizontalRule"
],
[
"bold",
"underline",
"italic",
"strike"
],
[
"subscript",
"superscript",
"removeFormat",
"blockquote"
],
[
"list",
"align",
"table",
"image",
"preview"
]
],
}}
/>
</div>
);
}
export default App;
This is code what I used.
Thanks in Advance