2

我想在提交表单时使用 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 中可能吗？

4

1 回答 1

11

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

于 2017-10-24T15:10:52.097 回答