0.3.0 • Published 3 years ago
Share package NgxStackblitz Embed StackBlitz editor. See https://stackblitz.com/docs for more details.
npm install @stackblitz/sdk ngx-stackblitzCreate New Project files = {
'index.html': '<h1>My Test Page</h1>',
'index.js': 'console.log("my test")'
}<ngx-stackblitz-editor
[files]="files"
title="My test project"
description="Just a test"
template="javascript"
(changed)="saveTree($event)"></ngx-stackblitz-editor>Editor API Name Description @Input() files: {[path: string]: string};List of files to add to the project @Input() title: string;Project title @Input() description: string;Project description @Input() template: 'angular-cli' / 'create-react-app' / 'typescript' / 'javascript';Type of project to create @Input() tags?: string[];Project tags @Input() dependencies?: {[name: string]: string};NPM dependencies @Input() settings?: any;Stackblitz Settings @Input() openFile: string;Path to file that should open initially @Input() view: string;(preview / editor) editor view @Input() height: string;Editor height, defaults to 100% @Input() width: string;Editor width, defaults to 100% @Input() hideExplorer: boolean;Hide the file explorer, defaults to false @Input() hideNavigation: boolean;Hide the editor nav, defaults to false @Input() fileReadInterval: number;Interval (milliseconds) to poll editor for changes, defaults to every second @Output() changed: EventEmitter<EditorChangeEvent>emitted every time the tree changes @Output() loaded: EventEmitter<EditorFile[]>emitted when the tree is loaded @Output() created: EventEmitter<EditorFile>emitted when a file is created @Output() updated: EventEmitter<EditorFile>emitted when a file is updated @Output() deleted: EventEmitter<EditorFile>emitted when a file is deleted
REQUIRED FILES FOR TEMPLATES Template Files angular-cli Requires index.html and main.ts to be present create-react-app Requires index.html and index.js to be present typescript Requires index.html and index.ts to be present javascript Requires index.html and index.js to be present
Embed GithubProject <ngx-stackblitz-editor
repo="dig-platform/plugin-template"
(changed)="saveTree($event)"></ngx-stackblitz-editor>Editor API Name Description @Input() repo: string;github repo path ie: dig-hub/my-plugin @Input() openFile: string;Path to file that should open initially @Input() view: string;(preview / editor) editor view @Input() height: string;Editor height, defaults to 100% @Input() width: string;Editor width, defaults to 100% @Input() hideExplorer: boolean;Hide the file explorer, defaults to false @Input() hideNavigation: boolean;Hide the editor nav, defaults to false @Input() fileReadInterval: number;Interval (milliseconds) to poll editor for changes, defaults to every second @Output() changed: EventEmitter<EditorChangeEvent>emitted every time the tree changes @Output() loaded: EventEmitter<EditorFile[]>emitted when the tree is loaded @Output() created: EventEmitter<EditorFile>emitted when a file is created @Output() updated: EventEmitter<EditorFile>emitted when a file is updated @Output() deleted: EventEmitter<EditorFile>emitted when a file is deleted
Embed Existing Project <ngx-stackblitz-editor
projectID="my-project"
(changed)="saveTree($event)"></ngx-stackblitz-editor>Open existing project
Name Description @Input() projectID: string;Stackblitz project ID @Input() openFile: string;Path to file that should open initially @Input() view: string;(preview / editor) editor view @Input() height: string;Editor height, defaults to 100% @Input() width: string;Editor width, defaults to 100% @Input() hideExplorer: boolean;Hide the file explorer, defaults to false @Input() hideNavigation: boolean;Hide the editor nav, defaults to false @Input() fileReadInterval: number;Interval (milliseconds) to poll editor for changes, defaults to every second @Output() changed: EventEmitter<EditorChangeEvent>emitted every time the tree changes @Output() loaded: EventEmitter<EditorFile[]>emitted when the tree is loaded @Output() created: EventEmitter<EditorFile>emitted when a file is created @Output() updated: EventEmitter<EditorFile>emitted when a file is updated @Output() deleted: EventEmitter<EditorFile>emitted when a file is deleted
Interfaces export interface EditorFile {
path: string;
content: string;
status?: string;
}export interface EditorChangeEvent {
tree: EditorFile[];
created?: EditorFile[];
updated?: EditorFile[];
deleted?: EditorFile[];
}