Javascript 如何初始化代码镜像绑定到yjs的值？

我的主要问题是在我的网站上初始化代码编辑器（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，这样我就可以使用它初始化代码编辑器的值，然后将代码编辑器中的内容放在textarea中 单击“提交”按钮后，单击“编辑文本”。因此，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（“form”）块之外，这些代码大部分来自yjs codemirror演示。这段代码目前的作用是向我的数据库发送正确的信息。但是，在打开文档时，初始化代码编辑器的值时遇到问题。setValue方法不起作用，执行以下操作也不起作用：

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

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

即使我用字符串替换内容变量，前面的所有示例都会失败。唯一有效的办法是：

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

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

但是，问题在于，出于某种原因，我在console浏览器中遇到以下错误：

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

---

作为参考，我在这个问题中展示的javascript都来自index.js文件。在任何情况下，由于编辑器未定义，我无法再将“editortext”textarea的值设置为CodeMirror textarea，也无法将写入代码编辑器的内容保存到数据库中。我不确定为什么会发生这种情况，我不确定这是否是yjs的CodeMirrorBinding所特有的，但在此方面的任何帮助都将不胜感激。

以下引用yjs开发者之一dmonad的话。对于将来关于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)
}

我假设

editor.setValue（）

返回

未定义的
。这就是绑定无法工作的原因，您可以设置编辑器的初始值