React + CKEditor 4 사용하기

- npm 레지스트리에서 설치

npm install ckeditor4-react // 라이트 버전

 

npm install ckeditor4-react-advanced // 풀패키지

 

 

- 페이지 내에 CKEditor4 추가

import CKEditor from 'ckeditor4-react';

 

 

 

<CKEditor data="This is an example CKEditor 4 WYSIWYG editor instance." type="classic"

   config={{height:750},{width:700}, {allowedContent:true} }

/>

 

 

- 자동크기 조절 : config={extraPlugins:['autogrow']}

- Editor 안에서 CSS사용 가능 : {allowedContent:true}

 

 

“파트너스 활동을 통해 일정액의 수수료를 제공받을 수 있음"

- 참고

github.com/ckeditor/ckeditor4-react

ckeditor/ckeditor4-react

ckeditor.com/docs/ckeditor4/latest/guide/dev_react.html

React Integration - CKEditor 4 Documentation

ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html#cfg-contentsCss

Class Config (CKEDITOR.config) - CKEditor 4 API docs

codesandbox.io/s/pensive-tesla-lhxrq?file=/src/App.js:329-497

 

import React from "react";

import FormCKEditor from "./FormCKEditor";

import "./styles.css";

 

class App extends React.Component {

constructor(props) {

super(props);

this.state = {

data: "

Lorem ipsum dolor sit amet

"

};

this.handleChange = (...args) => {

console.log(args + "test");

};

this.changeState = () => {

this.setState(

{

data: `

${Date.now()}

`

},

(...args) => console.log(this.state)

);

};

}

 

render() {

return (

<>

<p>

<button onClick={this.changeState}>Update statebutton>

p>

<FormCKEditor

name="editor"

data={this.state.data}

handleChange={this.handleChange}

/>

 

);

}

}

 

export default App;

 

pensive-tesla-lhxrq - CodeSandbox

풀패키지

developer.aliyun.com/mirror/npm/package/ckeditor4-react-advanced

Package - ckeditor4-react-advanced