我正在尝试为我的网页开发一个简单的CMS。我希望它能够编辑并删除用户单击按钮时的回复。我完成了删除功能,所以我想要使用CKeditor的回复功能。我正在努力的是无法禁用自动在线功能。我仍然可以在加载页面时选择我的div
,而不是单击按钮启用内联功能,但我不知道我做错了什么?
我已尝试直接在我的index.html文件,自定义js脚本文件和config.js
ckeditor文件中设置该功能,但都没有。我正在使用Ckeditor 4。
这是我试图用来禁用我的div元素内联的代码的snippit,但它不起作用,我不知道为什么,我目前把它放在一个custom.js
脚本文件中,我从我的index.html
文件中调用它
CKEDITOR.disableAutoInline = true;
以下是我的回复页面的代码:
import React from 'react';
import CKEditor from 'react-ckeditor-component';
import ForumpageService from '../../services/forumService';
import appController from '../../controllers/appController';
class Forumreplies extends React.Component {
constructor(props){
super(props);
this.elementName = "editor_" + this.props.id;
this.editReply = this.editReply.bind(this);
this.state = {
reply: '',
errorMsg: '',
isLoggedin: false,
// Ck Editor State
reply: '',
}
}
async componentDidMount(){
const topicId = this.props.match.params.topicid
const postDetails = await ForumpageService.replyDetails({topicId: topicId})
this.setState({
postDetails: postDetails[0],
topicId: topicId
})
await this.postReplies();
}
// Edit the reply
async editReply(id, e){
//CKEDITOR.inline(this.elementName);
}
async postReplies(){
const repliesData = await ForumpageService.postreplyDetails({topicId: this.state.topicId})
await this.setState({repliesData});
}
render(){
const repliesData = currentReply.map((row, index) => {
return (
<div className="row" id="reply-messages" key={index}>
<div className="col-md-8" suppressContentEditableWarning contentEditable="true" id={this.elementName}>
<p dangerouslySetInnerHTML={{__html: row.reply_message }} />
</div>
<div className="col-md-2">
{this.state.isloggedinuserId == row.reply_user_id && this.state.isLoggedin == true ? <i className="far fa-edit" onClick={this.editReply.bind(this, row.reply_id)} title="Edit this reply?"></i> : null }
</div>
</div>
})
return (
<div className="container" id="forum-replies">
<div className="row">
{repliesData}
</div>
</div>
)
}
}
export default Forumreplies;
答案 0 :(得分:1)
您应该尝试使用react-ckeditor-component
作为自己的方式(而不是内联编辑器),而不是创建div并调用CKEDITOR.inline。
您可以执行以下操作:如果未按下按钮,则使用文本内容呈现div,但在按下按钮后,呈现the documentation
<CKEditor />组件>没有记录的方法可以将编辑器设置为您正在使用的此包中的内联。
编辑:
我可以看到你没有使用react-ckeditor-component功能,但是按照你目前所做的,你可以只在按下按钮时设置div的contentEditable="true"
属性:
<div className="col-md-8" suppressContentEditableWarning contentEditable={this.state.isEditing} id={this.elementName}>
<p dangerouslySetInnerHTML={{__html: row.reply_message }} />
</div>
然后在onClick处理程序上将isEditing设置为true。您的组件将更新,然后在contentEditable
属性设置为true的情况下重新呈现