0

我在项目中使用 angular 6 和 firebase。目标是使用 firepad 代码编辑器，因为它具有实时协作功能，开源也我正在使用有帮助的 firebase 后端。

https://firepad.io/docs/#headless中的示例没有关于如何导入 firepad 和 codemirror 的具体信息。如果有人有任何集成 firepad、codemirror 和 angular 5 + 的经验，请发表评论。

来自 Firepad 代码镜像编辑器的示例 https://github.com/FirebaseExtended/firepad/blob/master/examples/code.html

还添加了 stackblitz 链接 https://stackblitz.com/edit/angular-qt6v3c

转换成角度

import * as Firepad from 'firepad';
import { CodeMirror } from 'codemirror';
import * as firebase from 'firebase/app';

@Component({
  selector: 'app-web-project-editor-editor',
  templateUrl: './web-project-editor-editor.component.html',
  styleUrls: ['./web-project-editor-editor.component.css']
})
export class WebProjectEditorEditorComponent implements OnInit {
  constructor() { }

  ngOnInit() {

    //// Get Firebase Database reference.
    const firepadRef = firebase.database().ref();

    //// Create CodeMirror (with line numbers and the JavaScript mode).
    const codeMirror = CodeMirror(document.getElementById('firepad- 
     container'), {
      lineNumbers: true,
      mode: 'javascript'
    });

    //// Create Firepad.
    const firepad = Firepad.fromCodeMirror(firepadRef, codeMirror, {
      defaultText: '// JavaScript Editing with Firepad!\nfunction go() 
    {\n  var message = "Hello, world.";\n  console.log(message);\n}'
    });

  }
}

组件 web-project-editor-editor.component.html 代码

需要有关如何导入 codemirror、firepad 的帮助。

4

0 回答 0