CODEWITHSUNDEEP
reactjsckeditor4.x
Curious13
Curious13

Reputation: 329

Ckeditor disable auto inline won't disable inline from being selected on page load

I'm trying to develop a simple CMS for my page. I want it to where I can edit and delete a users reply on click of a button. I got the delete functionality done so I figured for the reply functionality I would use CKeditor. What I'm struggling with is not being able to disable the autoinline feature. I can still select my div on load of the page rather than clicking a button to enable the inline feature but I don't know what I am doing wrong?

I have tried setting the feature directly in my index.html file, a custom js script file and the config.js ckeditor file but none worked. I am using Ckeditor 4.

this is the snippit of code I'm trying to use to disable inline on my div element but it's not working and I don't know why, i currently have it placed in a custom.js script file and I'm calling it from my index.html file

CKEDITOR.disableAutoInline = true;

Here is my code for my replies page:

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;

Upvotes: 1

Views: 960

Answers (1)

Murilo Cruz
Murilo Cruz

Reputation: 2511

Instead of creating a div and calling CKEDITOR.inline, you should try to use the react-ckeditor-component as its own way (not as an inline editor).

You could do something like: if the button wasn't pressed, render a div with the text content, but after the button was pressed, render a <CKEditor /> component as in the documentation

There is no documented way to set the editor as inline in this package that you are using.

EDIT: I can see you are not using the react-ckeditor-component features, but following what you've done so far, you could set the contentEditable="true" property of the div only when the button is pressed:

<div className="col-md-8" suppressContentEditableWarning contentEditable={this.state.isEditing} id={this.elementName}>
    <p dangerouslySetInnerHTML={{__html: row.reply_message }} />
</div>

And then set the isEditing to true on the onClick handler. Your component will update and then re-render with the contentEditable property set to true

Upvotes: 1

Related Questions