如何解决如何在React JS上安装ckeditor完整软件包?
我还安装了ckeditor npm install ckeditor4-react
,此软件包是标准版本。我想在reactjs中使用ckeditor full package。我还下载了ckeditor ckeditor_4.14.1_full.zip
的完整软件包。但我不知道如何在reactjs中安装此软件包...?
有人可以告诉我如何在Reactjs中安装完整的软件包吗?
createForm.js
import React,{ Component } from 'react';
import CKEditor from 'ckeditor4-react';
class App extends Component {
render() {
return (
<div className="App">
<h2>Using CKEditor 4 in React</h2>
<CKEditor
data="<p>Hello from CKEditor 4!</p>"
/>
</div>
);
}
}
export default App;
解决方法
我用过ckeditor-5不用担心4也能用
import React,{ Component } from 'react';
import CKEditor from "@ckeditor/ckeditor5-react";
import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';
import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic';
import Underline from '@ckeditor/ckeditor5-basic-styles/src/underline';
import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
import Clipboard from "@ckeditor/ckeditor5-clipboard/src/clipboard";
import LinkPlugin from '@ckeditor/ckeditor5-link/src/link';
import ListPlugin from '@ckeditor/ckeditor5-list/src/list';
import Table from '@ckeditor/ckeditor5-table/src/table';
import PasteFromOffice from '@ckeditor/ckeditor5-paste-from-office/src/pastefromoffice';
import Alignment from '@ckeditor/ckeditor5-alignment/src/alignment';
import Indent from '@ckeditor/ckeditor5-indent/src/indent';
import Highlight from '@ckeditor/ckeditor5-highlight/src/highlight';
const editorConfig = {
fontFamily: {
options: [
"default","Ubuntu,Arial,sans-serif","Ubuntu Mono,Courier New,Courier,monospace"
]
},toolbar:{
items: [
"heading","|","bold","italic","underline",'alignment',"link",'outdent','indent',"undo","redo","bulletedList","numberedList","highlight:yellowMarker",'removeHighlight'
// "blockQuote",// "undo",// "redo"
]},plugins: [
Essentials,Bold,Italic,Paragraph,Underline,Alignment,Clipboard,LinkPlugin,ListPlugin,Table,PasteFromOffice,Highlight,Indent,// InlineHighlighters
],highlight: {
options: [
{
model: 'yellowMarker',class: 'marker-yellow',title: 'Yellow marker',color: 'yellow',type: 'marker',styles: {
'background-color': 'yellow'
}
},{
model: 'redPen',class: 'pen-red',title: 'Red pen',color: 'red',type: 'pen',styles: {
color: 'red'
}
}
]
},};
class App extends Component {
state={
editorContent:""
}
getCKEditor(event,editor){
this.setState this.setState({
editorContent: this.editor.getData(),});
}
render() {
return (
<div className="App">
<CKEditor
editor={ClassicEditor}
data={this.state.editorContent}
config={editorConfig}
onChange={(event,editor) => this.getCKEditor(event,editor)}
/>
</div>
);
}
}
export default App;
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。