html css js在线编辑,在线JS编辑器

;

changeTitle: boolean;

titleWord: string;

cssLibrary: Array;

downloadUrl: string;

content: string;

showIframeHider = false;

mode = ‘None’;

currentView = ‘top’;

cssMode = ‘None’;

@ViewChild(‘js’, { static: false }) jsRef;

@ViewChild(‘html’, { static: false }) htmlRef;

@ViewChild(‘css’, { static: false }) cssRef;

@ViewChild(‘jsTitle’, { static: true }) jsTitleRef;

@ViewChild(‘title’, { static: true }) titleRef;

constructor(public dialog: MatDialog, private cd: ChangeDetectorRef, private router: Router) {

}

ngOnInit() {

this.titleWord = localStorage.getItem(‘code-online-title’) || ‘Untitled’;

this.jsCode = localStorage.getItem(‘code-online-js’) || ”;

this.htmlCode = localStorage.getItem(‘code-online-html’) || ”;

this.cssCode = localStorage.getItem(‘code-online-css’) || ”;

this.mode = localStorage.getItem(‘code-online-mode’) || ‘None’;

this.cssMode = localStorage.getItem(‘code-online-cssmode’) || ‘None’;

this.jsLibrary = this.getLibs(‘code-online-jsLib’);

this.cssLibrary = this.getLibs(‘code-online-cssLib’);

this.currentView = localStorage.getItem(‘code-online-view-type’) || ‘top’;

if (this.mode === ‘Babel’) {

this.jsLibrary.unshift(‘https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js’);

}

setTimeout(() => {

this.updateDocumentTitle();

this.initJs();

this.initHtml();

this.initCss();

this.refresh();

this.autoUpdate();

}, 500);

// this.handleSave();

}

getLibs(topic) {

let arr = JSON.parse(localStorage.getItem(topic)) || [];

arr = this.getNoneEmpty(arr);

return arr;

}

getNoneEmpty(arr) {

return arr.filter(item => item.toLowerCase() !== ”);

}

clearConsole() {

document.getElementById(‘output’).innerHTML = ”;

}

goToGit() {

window.open(‘https://github.com/renhongl/code-online’, ‘_blank’);

}

homePage() {

this.router.navigate([‘/’]);

}

openNewTab() {

window.open(‘/code-online#/fullScreen’, ‘_blank’);

}

changeView(value) {

this.currentView = value;

localStorage.setItem(‘code-online-view-type’, value);

setTimeout(() => {

this.initJs();

this.initHtml();

this.initCss();

this.refresh();

this.autoUpdate();

}, 500);

}

updateTitle() {

localStorage.setItem(‘code-online-title’, this.titleWord);

this.updateDocumentTitle();

}

updateDocumentTitle() {

document.title = this.titleWord;

}

disableTitle() {

this.changeTitle = false;

}

toggleTitle() {

this.changeTitle = !this.changeTitle;

if (this.changeTitle) {

this.titleRef.nativeElement.focus();

}

}

getDoc() {

return document.querySelector(‘iframe’).contentDocument;

}

autoUpdate() {

this.cssEditor.on(‘change’, () => {

if (this.cssChangeTimer) {

clearTimeout(this.cssChangeTimer);

}

this.cssChangeTimer = setTimeout(() => {

this.refresh();

}, 2000);

});

this.htmlEditor.on(‘change’, () => {

if (this.htmlChangeTimer) {

clearTimeout(this.htmlChangeTimer);

}

this.htmlChangeTimer = setTimeout(() => {

this.refresh();

}, 2000);

});

this.jsEditor.on(‘change’, () => {

if (this.jsChangeTimer) {

clearTimeout(this.jsChangeTimer);

}

this.jsChangeTimer = setTimeout(() => {

this.refresh();

}, 2000);

});

}

formatJs() {

const range = { from: this.jsEditor.getCursor(true), to: this.jsEditor.getCursor(false) };

this.jsEditor.autoFormatRange(range.from, range.to);

}

formatHtml() {

const range = { from: this.htmlEditor.getCursor(true), to: this.htmlEditor.getCursor(false) };

this.htmlEditor.autoFormatRange(range.from, range.to);

}

formatCss() {

const range = { from: this.cssEditor.getCursor(true), to: this.cssEditor.getCursor(false) };

this.cssEditor.autoFormatRange(range.from, range.to);

}

commentJs() {

const range = { from: this.jsEditor.getCursor(true), to: this.jsEditor.getCursor(false) };

this.jsEditor.commentRange(true, range.from, range.to);

}

unCommentJs() {

const range = { from: this.jsEditor.getCursor(true), to: this.jsEditor.getCursor(false) };

this.jsEditor.commentRange(false, range.from, range.to);

}

commentHtml() {

const range = { from: this.htmlEditor.getCursor(true), to: this.htmlEditor.getCursor(false) };

this.htmlEditor.commentRange(true, range.from, range.to);

}

unCommentHtml() {

const range = { from: this.htmlEditor.getCursor(true), to: this.htmlEditor.getCursor(false) };

this.htmlEditor.commentRange(false, range.from, range.to);

}

commentCss() {

const range = { from: this.cssEditor.getCursor(true), to: this.cssEditor.getCursor(false) };

this.cssEditor.commentRange(true, range.from, range.to);

}

unCommentCss() {

const range = { from: this.cssEditor.getCursor(true), to: this.cssEditor.getCursor(false) };

this.cssEditor.commentRange(false, range.from, range.to);

}

refresh() {

this.jsCode = this.jsEditor.getValue();

this.htmlCode = this.htmlEditor.getValue();

this.cssCode = this.cssEditor.getValue();

this.initPreview();

}

handleSave() {

document.body.addEventListener(‘keypress’, (event) => {

if (!(event.which === 115 && event.ctrlKey) && !(event.which === 19)) {

return true;

};

this.jsCode = this.jsEditor.getValue();

this.htmlCode = this.htmlEditor.getValue();

this.cssCode = this.cssEditor.getValue();

this.initPreview();

event.preventDefault();

event.stopPropagation();

return false;

});

}

initCss() {

this.cssEditor = CodeMirror(this.cssRef.nativeElement, {

value: this.cssCode,

mode: ‘css’,

theme: ‘monokai’,

lineNumbers: true,

autoCloseBrackets: true,

styleActiveLine: false,

indentWithTabs: true,

indentUnit: 2,

tabSize: 2,

lint: true,

matchBrackets: true,

});

this.cssEditor.execCommand(‘selectAll’);

this.formatCss();

this.cssEditor.execCommand(‘goDocStart’);

this.cssEditor.setOption(‘extraKeys’, {

‘Ctrl-Alt-F’: () => {

this.formatCss();

},

‘Ctrl-/’: () => {

this.commentCss();

},

‘Ctrl-Alt-/’: () => {

this.unCommentCss();

}

});

}

initHtml() {

this.htmlEditor = CodeMirror(this.htmlRef.nativeElement, {

value: this.htmlCode,

mode: ‘htmlmixed’,

theme: ‘monokai’,

lineNumbers: true,

autoCloseBrackets: true,

styleActiveLine: false,

autoCloseTags: true,

profile: ‘html’,

indentWithTabs: true,

indentUnit: 2,

tabSize: 2,

lint: true,

matchBrackets: true,

});

emmetCodeMirror(this.htmlEditor, {

Tab: ’emmet.expand_abbreviation_with_tab’,

});

this.htmlEditor.execCommand(‘selectAll’);

this.formatHtml();

this.htmlEditor.execCommand(‘goDocStart’);

this.htmlEditor.setOption(‘extraKeys’, {

‘Ctrl-Alt-F’: () => {

this.formatHtml();

},

‘Ctrl-/’: () => {

this.commentHtml();

},

‘Ctrl-Alt-/’: () => {

this.unCommentHtml();

}

});

}

initJs() {

this.jsEditor = CodeMirror(this.jsRef.nativeElement, {

value: this.jsCode,

mode: ‘javascript’,

theme: ‘monokai’,

lineNumbers: true,

autoCloseBrackets: true,

styleActiveLine: false,

indentWithTabs: true,

indentUnit: 2,

tabSize: 2,

gutters: [‘CodeMirror-lint-markers’],

lint: { esversion: ‘8’ },

matchBrackets: true,

});

this.jsEditor.execCommand(‘selectAll’);

this.formatJs();

this.jsEditor.execCommand(‘goDocStart’);

this.jsEditor.setOption(‘extraKeys’, {

‘Ctrl-Alt-F’: () => {

this.formatJs();

},

‘Ctrl-/’: () => {

this.commentJs();

},

‘Ctrl-Alt-/’: () => {

this.unCommentJs();

}

});

}

removeTag(tagName) {

const hs = this.doc.getElementsByTagName(tagName);

for (let i = 0, max = hs.length; i < max; i++) {

hs[i].parentNode.removeChild(hs[i]);

}

}

getType() {

const typeMapping = {

None: ‘text/javascript’,

Babel: ‘text/babel’,

TypeScript: ‘text/typescript’,

};

return typeMapping[this.mode];

}

writeScript() {

return this.jsLibrary.map(item => {

return “;

});

}

getNewIframe() {

const pre = document.getElementById(‘previewIframe-‘ + this.currentView);

if (!this.jsCode) {

return pre;

}

if (pre) {

document.querySelector(‘.preview-parent-‘ + this.currentView).removeChild(pre);

}

const curr = document.createElement(‘iframe’);

curr.setAttribute(‘id’, ‘previewIframe-‘ + this.currentView);

curr.setAttribute(‘width’, ‘100%’);

curr.setAttribute(‘height’, ‘100%’);

curr.setAttribute(‘frameborder’, ‘0’);

document.querySelector(‘.preview-parent-‘ + this.currentView).prepend(curr);

}

writeLinks() {

return this.cssLibrary.map(item => {

return “;

});

}

openHelp() {

this.dialog.open(HelpDialogComponent, {

width: ‘350px’,

height: ‘350px’,

});

}

initPreview() {

this.doc = this.getNewIframe();

setTimeout(() => {

this.doc = this.getDoc();

this.doc.location.reload();

this.doc.open();

this.doc.write(”);

this.doc.close();

this.content = `

Untitled

${this.writeLinks().join(‘,’).replace(/,/ig, ”)}

${this.htmlCode}

${this.writeScript().join(‘,’).replace(/,/ig, ”)}

`;

this.doc.open();

this.doc.write(this.content);

this.doc.close();

// localStorage.setItem(‘code-online-view’, this.content);

localStorage.setItem(‘code-online-js’, this.jsCode);

localStorage.setItem(‘code-online-html’, this.htmlCode);

localStorage.setItem(‘code-online-css’, this.cssCode);

document.getElementById(‘output’).innerHTML = ”;

}, 1000);

}

openJSDialog() {

const dialogRef = this.dialog.open(JsDialogComponent, {

width: ‘600px’,

height: ‘70%’,

data: { jsLibrary: this.jsLibrary, mode: this.mode },

disableClose: true

});

dialogRef.afterClosed().subscribe(result => {

let arr = result.jsLibrary || [];

arr = this.getNoneEmpty(arr);

this.jsLibrary = arr;

this.mode = result.mode;

const babelPath = ‘https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js’;

const path = ‘https://cdnjs.cloudflare.com/ajax/libs/typescript/3.6.3/typescript.min.js’;

if (this.mode === ‘Babel’) {

this.jsLibrary = this.jsLibrary.filter(item => item !== babelPath);

this.jsLibrary = this.jsLibrary.filter(item => item !== path);

this.jsLibrary.push(babelPath);

} else if (this.mode === ‘TypeScript’) {

this.jsLibrary = this.jsLibrary.filter(item => item !== babelPath);

this.jsLibrary = this.jsLibrary.filter(item => item !== path);

this.jsLibrary.push(path);

this.jsLibrary.push(‘/code-online/assets/libs/typescript.compile.js’);

}

this.refresh();

this.cd.detectChanges();

localStorage.setItem(‘code-online-jsLib’, JSON.stringify(this.jsLibrary));

localStorage.setItem(‘code-online-mode’, this.mode);

});

}

openCssDialog() {

const dialogRef = this.dialog.open(CssDialogComponent, {

width: ‘600px’,

height: ‘70%’,

data: { cssLibrary: this.cssLibrary, cssMode: this.cssMode },

disableClose: true

});

dialogRef.afterClosed().subscribe(result => {

let arr = result.cssLibrary || [];

arr = this.getNoneEmpty(arr);

this.cssLibrary = arr;

this.cssMode = result.mode;

this.refresh();

this.cd.detectChanges();

localStorage.setItem(‘code-online-cssLib’, JSON.stringify(this.cssLibrary));

// localStorage.setItem(‘code-online-cssmode’, this.cssMode);

});

}

downloadSource() {

const element = document.createElement(‘a’);

element.setAttribute(

‘href’,

‘data:text/plain;charset=utf-8,’ + encodeURIComponent(this.content)

);

element.setAttribute(‘download’, this.titleWord + ‘.html’);

element.style.display = ‘none’;

document.body.appendChild(element);

element.click();

document.body.removeChild(element);

}

}

“`

### 文件结构