Угловой пример кода для Firepad и Codemirror - PullRequest
Новая
       31

Угловой пример кода для Firepad и Codemirror

0 голосов
/ 13 февраля 2019

Я использую Angular 6 и Firebase для проекта.Цель состоит в том, чтобы использовать редактор кода Firepad, так как он имеет совместную работу с открытым исходным кодом, а также я использую Firebase Backend, который помогает.

Пример в https://firepad.io/docs/#headless не содержит конкретной информации о том, как импортировать firepad и codemirror.Если у кого-то был опыт интеграции firepad, codemirror с угловым 5 +, пожалуйста, прокомментируйте.

Пример из редактора firemap codemirror https://github.com/FirebaseExtended/firepad/blob/master/examples/code.html

Также добавлена ​​ссылка на stackblitz https://stackblitz.com/edit/angular-qt6v3c

Преобразование в Angular 

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.com editorent.html Код

Нужна помощь по импорту codemirror, firepad.

...