如何初始化CodeMirror绑定到yjs的值？

Question

我的主要问题是在我的网站上初始化代码编辑器(CodeMirror)的文本/值，而不会影响我将POST请求保存/发送到后端的方式。下面是用于POST请求的pug代码：

p
  form(id='form' method='POST', action='/docs/edit/'+docs._id)
    textarea(name="doo" id="content" style="display: none;")=docs.content
    textarea(name="foo" id="editortext" style="display: none;")
    input.btn.btn-primary(type='submit' value='Save Doc')

这里我要做的是将docs.content发送到具有id " content“的textarea，这样我就可以使用它来初始化代码编辑器的值，并在单击submit按钮后将代码编辑器中的内容放在文本区域"editortext”中。因此，POST请求将从两个文本区域获取数据，然后我可以将"editortext“文本区域的内容保存到我的数据库中。代码编辑器的逻辑在同一个pug文件中被引用到一个javascript文件中。以下是预编译代码的一部分：

/* eslint-env browser */

import * as Y from 'yjs'
import { WebsocketProvider } from 'y-websocket'
import { CodeMirrorBinding } from 'y-codemirror'
import CodeMirror from 'codemirror'
import 'codemirror/mode/clike/clike.js'

window.addEventListener('load', () => {
  const ydoc = new Y.Doc()
  const provider = new WebsocketProvider(
    `${location.protocol === 'http:' ? 'ws:' : 'wss:'}${location.host}`,
    'codemirror',
    ydoc
  )
  const yText = ydoc.getText('codemirror')
  const editorContainer = document.createElement('div')
  editorContainer.setAttribute('id', 'editor')
  document.body.insertBefore(editorContainer, null)
  let content = document.getElementById("content").value
  const editor = CodeMirror(editorContainer, {
    mode: 'text/x-java',
    lineNumbers: true
  })

  editor.setValue(content)

  document.getElementById("form").onsubmit = function(evt){
    document.getElementById("editortext").value = editor.getValue();
  }

除了内容变量的声明、setValue方法的调用和document.getElementById(“表单”)块之外，大部分代码来自yjs演示。此代码当前所做的是向我的数据库发送正确的信息。但是，在打开文档时，初始化代码编辑器的值时遇到了问题。setValue方法不起作用，以下操作也不起作用：

  const editor = CodeMirror(editorContainer, {
    value: content,
    mode: 'text/x-java',
    lineNumbers: true
  })

即使我用某个字符串替换了content变量，前面的所有示例也会失败。唯一起作用的似乎是：

  const editor = CodeMirror(editorContainer, {
    mode: 'text/x-java',
    lineNumbers: true
  }).setValue(content)

但是，问题在于，由于某些原因，我在控制台浏览器中出现了以下错误：

TypeError: codeMirror is undefined (y-codemirror.js:160:4)
TypeError: editor is undefined (index.js:28:10)

作为参考，我在这个问题中显示的javascript全部来自index.js文件。在任何情况下，因为编辑器是未定义的，所以我不能再将我的"editortext“文本区域的值设置为CodeMirror文本区域，并且无法将写入代码编辑器的内容保存到我的数据库中。我不知道为什么会发生这种情况，我不确定这是否是来自yjs的CodeMirrorBinding特有的，但是在这方面的任何帮助都是非常感谢的。

Answer 1

以下引用的dmonad是Yjs的开发人员之一。对于有关Yjs的任何技术问题的未来参考，您可能会更幸运地询问这里，因为在StackOverflow上还没有Yjs的标记。

嗨@notemaster，

我假设您的意思是您无法设置CodeMirror编辑器的值。

CodeMirrorBinding将Y.Text类型的值绑定到CodeMirror实例。setValue方法可以工作，但是编辑器的值被绑定覆盖：

ytext.insert(0, 'ytext')
const editor = CodeMirror(..)
editor.setValue('my value')
editor.value() // => "my value"
new CodeMirrorBinding(editor, ytext)
editor.value() // => "ytext value"

我建议您在将值绑定到YText类型之后设置它。

另一个注意事项:在Yjs中没有什么比默认值更好的了。最初，Yjs文档是空的，直到它与服务器同步。因此，您可能需要等到客户端与服务器同步后才设置值。

const setDefaultVal = () => {
  if (ytext.toString() === '') {
    ytext.insert(0, 'my default value')
  }
}
if (provider.synced) {
  setDefaultVal()
} else {
  provider.once('synced', setDefaultVal)
}

 const editor = CodeMirror(editorContainer, {
  mode: 'text/x-java',
  lineNumbers: true
}).setValue(content)

我假设editor.setValue()返回undefined。这就是为什么绑定不能工作，并且您可以设置编辑器的初始值。