Skip to content

Instantly share code, notes, and snippets.

@erguotou520

erguotou520/index.html

Created July 19, 2018 03:45
Show Gist options
  • Save erguotou520/ca3085c995f349c6e0d8ae9c83f38f10 to your computer and use it in GitHub Desktop.
Save erguotou520/ca3085c995f349c6e0d8ae9c83f38f10 to your computer and use it in GitHub Desktop.
Download ZIP
unable to disable selection outside the editor, run `electron main.js`
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style href="https://cdn.quilljs.com/1.3.6/quill.snow.css"></style>
<style>
*,
*::after {
box-sizing: border-box;
-webkit-user-select: none;
user-select: none;
-webkit-app-region: drag;
}
body {
display: flex;
flex-direction: column;
height: 100vh;
overflow: hidden;
}
header {
height: 10vh;
background: #f1f1f1;
}
footer {
height: 10vh;
background: #f1f1f1;
}
section {
flex: 1;
display: flex;
}
section nav {
width: 25vw;
background: #c8c8c8;
}
section #editor {
position: relative;
flex: 1;
overflow: overlay;
white-space: pre-wrap;
word-wrap: break-word;
outline: none;
tab-size: 4;
z-index: 2;
}
section #editor .ql-editor {
position: relative;
}
section #editor p {
margin: 0;
padding: 0;
user-select: text;
cursor: text;
}
section .right {
width: 25vw;
background: #c8c8c8;
}
</style>
</head>
<body>
<header></header>
<section>
<nav>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
</nav>
<div id="editor" contenteditable>
<p>abcabcabcabcabcabcabcabcabcabcabcabcabc</p>
<p>abcabcabcabcabcabcabcabcabcabcabcabcabc</p>
<p>abcabcabcabcabcabcabcabcabcabcabcabcabc</p>
<p>abcabcabcabcabcabcabcabcabcabcabcabcabc</p>
<p>abcabcabcabcabcabcabcabcabcabcabcabcabc</p>
<p>abcabcabcabcabcabcabcabcabcabcabcabcabc</p>
<p>abcabcabcabcabcabcabcabcabcabcabcabcabc</p>
<p>abcabcabcabcabcabcabcabcabcabcabcabcabc</p>
<p>abcabcabcabcabcabcabcabcabcabcabcabcabc</p>
<p>abcabcabcabcabcabcabcabcabcabcabcabcabc</p>
<p>abcabcabcabcabcabcabcabcabcabcabcabcabc</p>
<p>abcabcabcabcabcabcabcabcabcabcabcabcabc</p>
<p>abcabcabcabcabcabcabcabcabcabcabcabcabc</p>
<p>abcabcabcabcabcabcabcabcabcabcabcabcabc</p>
<p>abcabcabcabcabcabcabcabcabcabcabcabcabc</p>
<p>abcabcabcabcabcabcabcabcabcabcabcabcabc</p>
<p>abcabcabcabcabcabcabcabcabcabcabcabcabc</p>
</div>
<div class="right"></div>
</section>
<footer></footer>
</body>
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
<script>
// var quill = new Quill('#editor', {
// });
</script>
</html>
Raw
main.js
const { app, BrowserWindow } = require('electron')
const path = require('path')
app.on('ready', () => {
const win = new BrowserWindow()
win.webContents.openDevTools()
win.loadURL(path.resolve(__dirname, './index.html'))
win.on('closed', () => {
win = null
})
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment