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

Question

我正在尝试为我的页面开发一个简单的 CMS。我希望它可以通过单击按钮编辑和删除用户回复。我完成了删除功能，所以我想出了我会使用 CKeditor 的回复功能。我正在努力解决的问题是无法禁用自动内联功能。我仍然可以在加载页面时 select 我的 div 而不是单击按钮来启用内联功能，但我不知道我做错了什么？

我尝试直接在我的 index.html 文件、自定义 js 脚本文件和 config.js ckeditor 文件中设置该功能，但 none 有效。我正在使用 Ckeditor 4.

这是我试图用来在我的 div 元素上禁用内联的代码片段，但它不起作用，我不知道为什么，我目前将它放在 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;

Answer 1

与其创建 div 并调用 CKEDITOR.inline，不如尝试以自己的方式使用 react-ckeditor-component（而不是作为内联编辑器）。

你可以这样做：如果没有按下按钮，渲染一个带有文本内容的 div，但是在按下按钮之后，渲染一个 <CKEditor /> 组件，如 the documentation

在您使用的这个包中，没有记录的方法可以将编辑器设置为内联。

编辑：我可以看到你没有使用 react-ckeditor-component 功能，但是按照你到目前为止所做的，你可以设置 contentEditable="true" 属性的 div 只有当按钮被按下：

<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

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

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

reactjs

ckeditor4.x