在线JS编辑器

立即下载用AI写一个

发布时间：2020-06-23

0人 | 浏览：14221次 | 收藏 |

技术：Javascript-Angular

运行环境：node8.0+

概述

拥有自己的项目展示网站；随时随地，在线编辑网页；随时随地，展示自己的作品。

详细

### 效果截图
#### 主页
展示你所有的演示缩略图，让他人可以清楚的看到你的项目的大概效果。
![home](/contentImages/image/20200622/qkGnKy2BlPUkSQuDedB.png "home")

#### 编辑器页面
让你使用Web技术轻松开发自己的项目，并且实时预览。
[![editor](https://camo.githubusercontent.com/8a4f590bf043666a785e4ebb10d5ddf5c4a52976/68747470733a2f2f72656e686f6e676c2e6769746875622e696f2f636f64652d6f6e6c696e652f6173736574732f696d616765732f76342e706e67 "editor")](https://camo.githubusercontent.com/8a4f590bf043666a785e4ebb10d5ddf5c4a52976/68747470733a2f2f72656e686f6e676c2e6769746875622e696f2f636f64652d6f6e6c696e652f6173736574732f696d616765732f76342e706e67 "editor")

### 代码
#### 首页代码
```js
	import { Component, OnInit } from '@angular/core';
	import { Router } from '@angular/router';
	import { HomeService } from './home.service';
	import { MatDialog } from '@angular/material/dialog';
	import { PraiseDialogComponent } from './praise-dialog/praise-dialog.component';

@Component({
	  selector: 'app-home',
	  templateUrl: './home.component.html',
	  styleUrls: ['./home.component.scss']
	})
	export class HomeComponent implements OnInit {

list: any;
	  currPage = 0;
	  pageLimit = 6;
	  filter = '';
	  currentList: any;
	  firstPage = true;
	  lastPage = false;

constructor(private router: Router, private homeSer: HomeService, private dialog: MatDialog) { }

ngOnInit() {
		document.title = 'Code Online';
		this.initIframes('');
	  }

initIframes(filter) {
		this.homeSer.getPens().subscribe(data => {
		  this.list = data['filter'](item => {
			if (item['code-online-title'].toLowerCase().indexOf(filter.toLowerCase()) !== -1) {
			  return true;
			}
			return false;
		  });
		  const from = this.currPage * this.pageLimit;
		  const temp = [...this.list];
		  if (Math.ceil(this.list.length / this.pageLimit) - 1 <= 0) {
			this.lastPage = true;
		  }
		  this.currentList = temp.splice(from, this.pageLimit);
		  setTimeout(() => {
			this.currentList.forEach(item => this.writeDocument(item));
		  }, 2000);
		});
	  }

nextPage() {
		if (this.currPage === Math.floor(this.list.length / this.pageLimit)) {
		  return;
		}
		if (this.currPage === Math.floor(this.list.length / this.pageLimit) - 1) {
		  this.lastPage = true;
		} else {
		  this.lastPage = false;
		}
		this.firstPage = false;
		this.currPage += 1;
		this.initIframes(this.filter);
	  }

prevPage() {
		if (this.currPage === 0) {
		  return;
		}
		if (this.currPage === 1) {
		  this.firstPage = true;
		} else {
		  this.firstPage = false;
		}
		this.lastPage = false;
		this.currPage -= 1;
		this.initIframes(this.filter);
	  }

searchPens(e) {
		this.currPage = 0;
		this.firstPage = true;
		this.lastPage = false;
		this.initIframes(e.target.value);
		this.filter = e.target.value;
	  }

writeLinks(arr) {
		return arr.map(item => {
		  return `<link href="${item}" rel="stylesheet"></link>`;
		});
	  }

writeScript(arr) {
		return arr.map(item => {
		  return `<script src="${item}"></script>`;
		});
	  }

getType(mode) {
		const typeMapping = {
		  None: 'text/javascript',
		  Babel: 'text/babel',
		  TypeScript: 'text/typescript',
		};
		return typeMapping[mode];
	  }

getContent(item) {
		return `
		<!DOCTYPE html>
		<html>
		  <head>
			<meta charset="UTF-8" />
			<title>Untitled</title>
			<style>*{margin: 0;padding: 0}body{overflow:hidden}html{display:flex;justify-content:center;align-items:center;height:100%;width:100%}body{transform: scale(0.3, 0.3);}</style>
			${this.writeLinks(item['code-online-cssLib']).join(',').replace(/,/ig, '')}
			<style>${item['code-online-css']}</style>
		  </head>
		  <body>
			${item['code-online-html']}
			${this.writeScript(item['code-online-jsLib']).join(',').replace(/,/ig, '')}
			<script type="${this.getType(item['code-online-mode'])}">
			  ${item['code-online-js']}
			</script>
		  </body>
		</html>
	  `;
	  }

goToGit() {
		window.open('https://github.com/renhongl/code-online', '_blank');
	  }

writeDocument(item) {
		try {
		  const dom = document.getElementById('preview-iframe' + item.id);
		  if (dom) {
			const doc = dom['contentDocument'];
			// dom.setAttribute('style', '-webkit-transform:scale(0.8);-moz-transform-scale(0.8);');
			doc.open();
			doc.write('');
			doc.close();
			const content = this.getContent(item);
			doc.open();
			doc.write(content);
			doc.close();
		  }
		} catch (error) {
		  console.log('Write document error');
		}
	  }

newPen() {
		// localStorage.setItem('code-online-view', '');
		localStorage.setItem('code-online-js', '');
		localStorage.setItem('code-online-html', '');
		localStorage.setItem('code-online-css', '');
		localStorage.setItem('code-online-cssLib', '[]');
		localStorage.setItem('code-online-jsLib', '[]');
		localStorage.setItem('code-online-mode', '');
		localStorage.setItem('code-online-view-type', 'top');
		localStorage.setItem('code-online-title', 'Untitled');
		this.router.navigate(['/pen']);
	  }

openPen(id) {
		const item = this.list.filter(ite => ite.id === id)[0];
		// const content = this.getContent(item);
		// localStorage.setItem('code-online-view', content);
		localStorage.setItem('code-online-js', item['code-online-js']);
		localStorage.setItem('code-online-html', item['code-online-html']);
		localStorage.setItem('code-online-css', item['code-online-css']);

localStorage.setItem('code-online-cssLib', JSON.stringify(item['code-online-cssLib']));
		localStorage.setItem('code-online-jsLib', JSON.stringify(item['code-online-jsLib']));
		localStorage.setItem('code-online-mode', item['code-online-mode']);
		localStorage.setItem('code-online-view-type', item['code-online-view-type']);
		localStorage.setItem('code-online-title', item['code-online-title']);
	  }

openNewTab(id) {
		this.openPen(id);
		window.open('/code-online#/fullScreen', '_blank');
	  }

showPraise() {
		const dialogRef = this.dialog.open(PraiseDialogComponent, {
		  width: '310px',
		  height: '350px',
		});

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

});
	  }

}

```
#### 编辑器代码
```
	import { Component, ChangeDetectionStrategy, OnInit, ViewChild, ChangeDetectorRef } from '@angular/core';
	import CodeMirror from 'codemirror';
	import { MatDialog } from '@angular/material/dialog';

import { JsDialogComponent } from './js-dialog/js-dialog.component';
	import { CssDialogComponent } from './css-dialog/css-dialog.component';

import { HelpDialogComponent } from './help-dialog/help-dialog.component';

import 'codemirror/addon/lint/lint.css';

import 'codemirror/addon/edit/closebrackets.js';
	import 'codemirror/addon/edit/closetag.js';
	import 'codemirror/addon/edit/matchbrackets.js';

import 'codemirror/mode/javascript/javascript.js';
	import 'codemirror/mode/htmlmixed/htmlmixed.js';
	import 'codemirror/mode/css/css.js';

import 'codemirror/addon/selection/active-line.js';

import 'codemirror/addon/dialog/dialog.js';
	import 'codemirror/addon/dialog/dialog.css';

import 'codemirror/addon/search/search.js';
	// import 'codemirror/addon/search/matchesonscrollbar.js';
	import 'codemirror/addon/search/searchcursor.js';
	import 'codemirror/addon/search/match-highlighter.js';
	import 'codemirror/addon/search/jump-to-line.js';

import jshint from 'jshint';
	import cssLint from 'csslint';
	import 'codemirror/addon/lint/lint.js';
	import 'codemirror/addon/lint/javascript-lint.js';
	import 'codemirror/addon/lint/html-lint.js';
	import 'codemirror/addon/lint/css-lint.js';
	import 'codemirror-formatting';
	import { Router } from '@angular/router';

declare const emmetCodeMirror;
	(<any>window).JSHINT = jshint.JSHINT;
	(<any>window).CSSLint = cssLint.CSSLint;

@Component({
	  changeDetection: ChangeDetectionStrategy.OnPush,
	  selector: 'app-pen',
	  templateUrl: './pen.component.html',
	  styleUrls: ['./pen.component.scss']
	})
	export class PenComponent implements OnInit {

jsCode: string;
	  htmlCode: string;
	  cssCode: string;
	  doc: any;
	  jsEditor: any;
	  htmlEditor: any;
	  cssEditor: any;
	  jsChangeTimer: any;
	  htmlChangeTimer: any;
	  cssChangeTimer: any;
	  jsLibrary: Array<string>;
	  changeTitle: boolean;
	  titleWord: string;
	  cssLibrary: Array<string>;
	  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 `<script src="${item}"></script>`;
		});
	  }

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 `<link href="${item}" rel="stylesheet"></link>`;
		});
	  }

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 = `
			<!DOCTYPE html>
			<html>
			  <head>
				<meta charset="UTF-8" />
				<title>Untitled</title>
				<script src="/code-online/assets/libs/console.js"></script>
				${this.writeLinks().join(',').replace(/,/ig, '')}
				<style>${this.cssCode}</style>
			  </head>
			  <body>
				${this.htmlCode}
				${this.writeScript().join(',').replace(/,/ig, '')}
				<script type="${this.getType()}">
				  ${this.jsCode}
				</script>
			  </body>
			</html>
		  `;
		  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);
	  }

}

```
### 文件结构
![structure](/contentImages/image/20200622/dXCUN8rNicaPazPqdEj.png "structure")

本实例支付的费用只是购买源码的费用，如有疑问欢迎在文末留言交流，如需作者在线代码指导、定制等，在作者开启付费服务后，可以点击“购买服务”进行实时联系，请知悉，谢谢

感谢

手机上随时阅读、收藏该文章？请扫下方二维码

在线JS编辑器

概述

详细

相似例子推荐

评论

作者

评分详细

作者例子