2017-06-05 43 views
1

我正在使用prosemirror構建協作編輯器,其中多個人可以編輯一個文檔。我寫了下面的代碼,基於這裏給出的例子 - http://prosemirror.net/docs/guides/collab/無法使用Prosemirror進行協作編輯工作

這裏是代碼 -

const { EditorState } = require('prosemirror-state'); 
const { EditorView } = require('prosemirror-view'); 
const { DOMParser } = require("prosemirror-model"); 
const {schema} = require("./schema"); 
var collab = require("prosemirror-collab"); 


function Authority(doc) { 
    this.doc = doc 
    this.steps = [] 
    this.stepClientIDs = [] 
    this.onNewSteps = [] 
} 

Authority.prototype.receiveSteps = function(version, steps, clientID) { 
    if (version != this.steps.length) return 

    var self = this 
    // Apply and accumulate new steps 
    steps.forEach(function(step) { 
    self.doc = step.apply(self.doc).doc 
    self.steps.push(step) 
    self.stepClientIDs.push(clientID) 
    }) 
    // Signal listeners 
    this.onNewSteps.forEach(function(f) { f() }) 
} 

Authority.prototype.stepsSince = function(version) { 
    return { 
    steps: this.steps.slice(version), 
    clientIDs: this.stepClientIDs.slice(version) 
    } 
} 

var auth = new Authority(''); 
collabEditor(auth) 

function collabEditor(authority) { 
    var view = new EditorView(document.querySelector("#editor"), { 
    state: EditorState.create({schema: schema, plugins: [collab.collab()]}), 
    dispatchTransaction: function(transaction) { 
     var newState = view.state.apply(transaction) 
     view.updateState(newState) 
     var sendable = collab.sendableSteps(newState) 
     if (sendable) 
     authority.receiveSteps(sendable.version, sendable.steps, 
           sendable.clientID) 
    } 
    }) 
    authority.onNewSteps.push(function() { 
    var newData = authority.stepsSince(collab.getVersion(view.state)) 
    view.dispatch(
     collab.receiveTransaction(view.state, newData.steps, newData.clientIDs)) 
    }) 

    return view 
} 

當我運行這段代碼(安裝所有的依賴關係,並建立在一個的NodeJS簡單的服務器後)我基本上可以編輯一個文本框,但我無法在Chrome中打開兩個選項卡,並看到協作發生。我究竟做錯了什麼?

會喜歡一些反饋。

回答

0

這是簡單的單頁無外部通信設置的示例代碼。因此,不,它不會與其他標籤進行通信。爲此,您必須將權限移至其他位置,並設置頁面以通過HTTP或Websockets與其實現通信。 (例如參見this demo。)