我可以在表单提交中使用CKEditor 5 Inline或Balloon Editor吗？

Question

我想在表单提交时使用CKEditor 5 Inline或Balloon编辑器,但我遇到了困难.

我可以使用经典编辑器完美地提交提交,但内联编辑器阻止我在字段中输入.

这是我的代码:

<script type="text/javascript">
    InlineEditor.create( document.querySelector( '#ck' ) );
</script>

这是HTML:

<div class="form-group">
    <label>Comment</label>
    <textarea cols="80" rows="10" name="comment" class="form-control" id="ck">foo
</div>

在页面上,编辑器显示,但我无法在Safari(Mac)上键入它.

我认为这在CKEditor 4中是可能的,它有可能在5？

Answer 1

不幸的是,InlineEditor而BalloonEditor不是要取代<textarea>的元素.ClassicEditor在这种情况下工作,因为它只是用自己的容器替换整个元素,但对于其他编辑器则不是这样.

CKEditor 4是一种满足所有需求的解决方案.引擎盖下发生了很多事情.使用CKEditor 5,我们为您提供构建和API,但集成需要由外部开发人员完成.我不是说这永远不会改变,虽然这是现在的状态.

此外,目前,两个编辑器都不会<textarea>在您键入时替换值.

如果要使用ClassicEditor,可能需要<textarea>在表单提交时将值替换为编辑器数据.

const textarea = document.querySelector( '#ck' );

ClassicEditor
    .create( textarea )
    .then( editor => { window.editor = editor } );

document.getElementById( 'submit' ).onclick = () => {
    textarea.value = editor.getData();
}

如果您想使用InlineEditor或BalloonEditor,则需要使用<div>而不是<textarea>.您可以创建隐藏的输入字段,并以与上面类似的方式将其值设置为编辑器数据.