Making the CKEditor 5 inline placeholder widget editable

user_155899 0
Viewed 586

I've added the placeholder widget to my CKEditor 5 build. However I don't like that I can't change the text after it is inserted. I tried removing isObject from the schema but that didn't do anything. I'd appreciate it if someone could show me how this can be achieved.

ckeditor5 ckeditor
2 Answers

In version 4 the edit of the text is done via popup called by double clicking on the placeholder: https://ckeditor.com/cke4/addon/placeholder

In version 5 the placeholder was not fully implemented intentionally
"We didn't decide, though to implement a ready-to-use placeholder feature as it's usually needed to work differently in various systems"
https://github.com/ckeditor/ckeditor5/issues/871

So the only thing you can do is to implement the function you are missing yourself. I suggest looking at how version 4 does and understanding if it is applicable to version 5.

user_92668040

I have implemented it just with additional HTML block and control it with state (in my case I'm using React).

const CKInlineEditorField = ({
    defaultValue = '',
    onChange,
    placeholder = '',
}) => {
    const [showPlaceholder, setShowPlaceholder] = useState(false);
    const { t } = useTranslation();
    useEffect(() => {
        if (!defaultValue) {
            setShowPlaceholder(true);
        }
    }, [defaultValue]);
    return (
        <div>
            <Paper variant="outlined" className="InlineEditor">
                <div className="InlineEditor__placeholder">
                    {showPlaceholder && `${t(placeholder)}...`}
                </div>
                <div className="InlineEditor__editor">
                    <CKEditor
                        editor={InlineEditor}
                        data={defaultValue}
                        onChange={(event, editor) => {
                            const data = editor.getData();
                            setShowPlaceholder(!data);
                        }}
                        onBlur={(event, editor) => {
                            const data = editor.getData();
                            onChange(data);
                        }}
                    />
                </div>
            </Paper>
        </div>
    );
};

And SCSS file:

.InlineEditor {
    background-color: #eee;
    position: relative;

    &__placeholder {
        position: absolute;
        top: 15px;
        left: 10px;
        z-index: 0;
    }

    &__editor {
        position: relative;
        z-index: 2;
    }
}
user_56307570
Related