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>。您可以创建一个隐藏的输入字段，并以与上面类似的方式将其值设置为编辑器数据。

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

1 个答案: