0

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

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 中“ 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("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)

但是，问题是由于某种原因，我在控制台浏览器中收到以下错误：

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

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

4

1 回答 1

0

以下引自 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。这就是绑定不起作用的原因，您可以设置编辑器的初始值。

于 2020-01-15T23:06:37.020 回答