Ckeditor禁用自动内联不会禁止在页面加载时选择内联

时间:2018-06-04 23:44:19

标签: reactjs ckeditor4.x

我正在尝试为我的网页开发一个简单的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;

1 个答案:

答案 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的情况下重新呈现