Question

我正在尝试使用多个文本框进行协作。例如，当在一个Chrome浏览器窗口中更改textbox1时，另一个Chrome浏览器窗口中的textbox1也必须更改。当在一个Chrome浏览器窗口中更改textbox2时，另一个Chrome浏览器窗口中的textbox2也必须更改。我修改了https://developers.google.com/drive/realtime/realtime-quickstart提供的现有代码这是我改变的代码...

的index.html

<!-- Text areas that will be used as our collaborative controls. -->
<input id="editor1" style="width:400px" placeholder="Type some text here..." autofocus><br />
<input id="editor2" style="width:400px" placeholder="Type some text here...">

function initializeModel(model) {
  var string1 = model.createString('Hello Realtime World1!');
  model.getRoot().set('text', string1);
  var string2 = model.createString('Hello Realtime World2!');
  model.getRoot().set('text', string2);
}

function onFileLoaded(doc) {
  var string1 = doc.getModel().getRoot().get('text');
  var string2 = doc.getModel().getRoot().get('text');

  // Keeping one box updated with a String binder.
  var textArea1 = document.getElementById('editor1');
  gapi.drive.realtime.databinding.bindString(string1, textArea1);

  var textArea2 = document.getElementById('editor2');
  gapi.drive.realtime.databinding.bindString(string2, textArea2);

....

当我尝试运行此应用程序并更改textbox1时，textbox2也会更改，而在其他窗口中，两个文本框都会使用相同的文本进行更改。

请告知...谢谢。

Answer 1

在initializeModel中，您创建了两个collaborationStrings，但是将它们分配给根“text”中的相同键。

稍后您将从string1和string2的根目录中获取相同的字符串“text”：

var string1 = doc.getModel（）。getRoot（）。get（'text'）; var string2 = doc.getModel（）。getRoot（）。get（'text'）;

您需要将这两个地方的其中一个“文字”更改为其他地方。

使用google-drive-realtime-api进行多个文本框协作

1 个答案: