Question

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

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

firepad codemirror编辑器中的示例 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}'
    });

  }
}

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

需要有关如何导入Codemirror，firepad的帮助。

Firepad和Codemirror的角度示例代码

0 个答案: