我可以在表单提交中使用 CKEditor 5 内联或气球编辑器吗？

Question

我想在表单提交中使用 CKEditor 5 内联或气球编辑器，但我遇到了困难。

我可以使用 Classic Editor 完美地提交内容，但内联编辑器阻止我在字段中输入。

这是我的代码：

<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 内联或气球编辑器吗？

Can I use CKEditor 5 Inline or Balloon Editor on a form submission?

ckeditor

ckeditor5