Skip to content

Instantly share code, notes, and snippets.

Last active December 15, 2018 13:22
Show Gist options
  • Save fghhfg/2a44ed3532262467feb3ddbaa4b9bff7 to your computer and use it in GitHub Desktop.
Save fghhfg/2a44ed3532262467feb3ddbaa4b9bff7 to your computer and use it in GitHub Desktop.
electron 坑 / editor


$('#dropzone div')[0].innerHTML = "sdfsfsd<b>sdfsf</b>"
$('#dropzone div')[0].innerHTML =;

Web APIs > File

readAsText is asynchronous, so you would need to use the onload callback to see the result.

jquery html don't strip tags

Q: Does jQuery strip some html elements from a string when using .html()?   A: After a few quick tests it seems do me that this behavior isn't caused by jQuery but instead by the browser.

it looks like the string be stripped, but it doesn't. Look elements!

<input type="file" />

Q: Get input type=“file” value
A: You use input.files property

Web APIs > File

Using files from web applications


No one will argue that HTML5's DnD model is complicated compared to other solutions like JQuery UI.
example06 要 npm install marked
package.json 和 node.js 的 package.json 幾乎一模一樣
在主程式 main.js 中 會用 loadURL() 函數載入網頁
主程式用一個process ( 稱為 Main Process)
每個 BrowserWindow 載入網頁又用各別一個process ( 稱為 Render Process)
Render Process ● 可以透過 remote 物件存取Main Process的內容
也可以透過 ipc 互相通訊
package.json中,呼叫的main.js為main process,
main process可選擇要呼叫的主要介面(index.html, this is the app's renderer process),
主要介面中`<script> var editor = require('./editor') </script>`, require的.js是render process
All the files you require from this file (main.jg) will be running in the main process as well.
The javascript files you include from index.html or any other html-document is running in the renderer process.
in JavaScript, variable declared with var is automatically moved to the top.
.html中,javascript 的 variable 不會自動移到上方。
Uncaught Error: prompt() is and will not be supported.
Grabbing file path from input=file
kw: nodejs server file manager
File manager web server based on Node.js with Koa, Angular.js and Bootstrap
This is an Express middleware that provides a nice UI for editing files on the web.
Text files are opened/edited using Ace. The directory browser and image preview pages can accept drag-and-drop, and will upload files.
How to create a Web based File Browser using NodeJS, Express and JQuery Datatables
electron file manager


inlinecms # run on php server for static site; free with watermark Pico # run on php server for static site; free

Perch or Pagekit. concrete5 is an Open Source

KeystoneJS is the easiest way to build database-driven websites, applications and APIs in Node.js.

Node.js cms framework comparison

electron markdown editor

list electron app:

  • Abricotine - Markdown editor with inline preview. # drag n drop img
  • Boostnote - Markdown note & code snippet app for developers.
  • Inkdrop - Markdown notebook for hackers. # $
  • Leanote - Cloud notepad.

ckeditor, TinyMCE

TinyMCE read html files

kw: inlinecms, electron markdown editor, editor drag n drop

electron 坑
Quick Start
A simple notepad desktop app built on Electron and Quill
monte-note: rich editor && cms on Electron and Quill
in my example the image is uploaded to a server (in my case Imgur) and the response from the server returns the image URL. This URL needs to be passed to the callback function.
Hugo admin interface with Caddy webserver
用 java 写桌面程序 ui 只能用 swing 或者 swt 么?
Basic Routing, Serving Static Files
GET Method, POST Method, File Upload
file = req.files.FormFieldName; // here is the field name of the form
In Express 4, req.files is no longer available on the req object by default. To access uploaded files on the req.files object, use multipart-handling middleware like busboy, multer, formidable, multiparty, connect-multiparty, or pez.
Node Multer unexpected field
The <NAME> you use in multer's upload.single(<NAME>) function must be the same as the one you use in <input type="file" name="<NAME>" ...>.
upload file:
File uploads using Node.js
Part 1: Configuration of Express.
Part 2: Templating Using EJS.
Part 3: Handling routes.
Part 4: Handling Session.
Part 5: Finalising App.
Build a Real-Time Markdown Editor with Node.js
multiple people to work on the same markdown document
Node.js (sails.js) wysiwyg editor - images
Need a simple WYSIWYG editor with image upload [closed]
Basic CKEditor 4 Image Uploader with Express and NodeJS
Node Gallery
NodeJS Photo Gallery built on Express 4.
Feed it a directory of photos, get back a JSON object & a styled photo gallery ready for the web.
No database needed
Strictly no frills
Folders titles => Album titles
Image titles => Photo Titles
EXIF title => Description
Displays camera capture info (exposure, aperture, ISO..)
node.js http server displaying images from a directory
Ten minutes to create a node.js based album on BlueMix (Part Two)
Build an Instagram clone with AngularJS, Satellizer, Node.js and MongoDB
Building a File Uploader with NodeJs
Image manipulation using NodeJS and ImageMagick
Creating a Photo Discovery App with NW.js (part 1)
like photoswipe:
Creating an Image Gallery with the Flickr API — Requirements and Markup
Build an Image Gallery Using React, Redux and redux-saga
photoswipe: lightbox, history api html5
Barba.js: Create Page Transitions Easily
Pjax, Senna.js, Instantclick or Turbolinks
image gallery node.js example
summernote upload image handle example:
tinymce uploadImages
add remote url
upload to server && add url
wysiwyg editor
Froala Editor # $
Redactor # $
ContentTools #front
Trumbowyg #20kB
Summernote - Super Simple WYSIWYG editor #Bootstrap
简单的编辑功能 simditor
Trix is an open-source project from Basecamp
internal document model
ProseMirror # open-source, internal document model?
They all use contenteditable for I/O only (no execCommand), and they all maintain their own internal document model.
medium editor # float box
Medium Draft - A rich text editor built on draft-js with focus on keyboard shortcuts.
mobiledoc-kit # used by ghost
可以自定 text-change 與 selection-change 兩個事件(event)的 listener,自定處理函數。
支援 responsive layout。
那这样的话,写一个富文本编辑器不是很简单吗?只要用 execCommand 做命令映射就好了,所有的 DOM 变更操作都由浏览器实现好了。
也有一些编辑器不是完全利用 execCommand 来实现编辑操作的,比如 Medium 的编辑器实现了一个自定义的 Model ,操作是对这个 Model 的修改,然后再把 Model 映射成 DOM 。
另外还了解过 quill.js ,开发很活跃,代码很清晰。也是自己搞的一套文档模型,很有学习价值。不过这家伙原来用 coffeescript ,一次推翻重来改用 ES6 重写,现在已经不敢在产品里用它了。。
另外推荐 出的 simditor ,这个是没有自己的文档模型的,但是已经很成熟了,也在不少产品中有使用( teambition 也是用的它,哈哈)。我们产品上个月刚换它,效果还不错的,也很方便自己扩展。
Rich Text Editing:
vue-quill-editor - Quill editor component for Vue2.
vue-mobiledoc-editor - A mobiledoc editor component toolkit for Vuejs.
vue2-medium-editor - A MediumEditor component for Vue 2.
vue-froala - VueJS wrapper for Froala Editor.
HTML編輯器自己做!布丁版TinyMCE編緝器 / An Online HTML Editor: Customized TinyMCE Editor
get/set html
You can convert Quill Delta to HTML on the server with node.js and jsdom without using a real browser.
Deltas are a simple, yet expressive format that can be used to describe Quill’s contents and changes.
delta is non-trivial to render as it is an action log
the execution trouble with deltas come from delete & retain
ops: with only insert, delta becomes a state more than a script.
JSON.stringify( quill.getContents() )
quill.setContents( JSON.parse(data) )
image handle:
改<input type="file">之預設值:
$(document).ready(function() {
callbacks: {
onImageUpload: function(image) {
var image = $('<img>').attr('src', 'badge.png');
$('#summernote').summernote("insertNode", image[0]);
upload image handle example:
in electron:
create input tag, type file, then click()
add url
Q: url與圖檔實際位址不同
inset image > select from files (code):
don't add http:// on link:
onCreateLink : function(originalLink) {
return originalLink; // return original link
uncheck `open link in new window`
linkTargetBlank: true
custom popover:
You can create whatever you want in summernote plugin system
Using jQuery File Upload (UI version) with Node.js
1. run receive file server:
npm install blueimp-file-upload-node
node ./node_modules/blueimp-file-upload-node/server.js
2. check port number of last line of `server.js`.
3. download the plugin archive, extract it, and adjust the url option in main.js to the url of your Node.js service (e.g. "http://localhost:8080").
4. You can then upload the project folder (without the unnecessary server subfolder) to any static file server and use it as interface to your Node.js upload service.
Q: error on receive file server:
λ node server.js
return binding.rename(pathModule._makeLong(oldPath),
Error: ENOENT: no such file or directory, rename 'C:\Users\eight\ccc\node_modules\blueimp-file-upload-node\tmp\upload_8b0413e6d1d8d036cabf727b9709393f' -> 'C:\Users\eight\ccc\node_modules\blueimp-file-upload-node\public\files\640_96d42d6eac2500afc9eb661c855f2e41.jpg'
at Error (native)
at Object.fs.renameSync (fs.js:809:18)
at IncomingForm.<anonymous> (C:\Users\eight\ccc\node_modules\blueimp-file-upload-node\server.js:244:16)
at emitTwo (events.js:106:13)
at IncomingForm.emit (events.js:191:7)
at C:\Users\eight\ccc\node_modules\blueimp-file-upload-node\node_modules\formidable\lib\incoming_form.js:229:12
at WriteStream.<anonymous> (C:\Users\eight\ccc\node_modules\blueimp-file-upload-node\node_modules\formidable\lib\file.js:70:5)
at WriteStream.g (events.js:291:16)
at emitNone (events.js:91:20)
at WriteStream.emit (events.js:185:7)
A: create `file` `public\files`
//include http, fs and url module
var http = require('http'),
fs = require('fs'),
path = require('path'),
url = require('url');
imageDir = '/Users/peng/ifs/ipic/x/';
//create http server listening on port 3333
http.createServer(function (req, res) {
//use the url to parse the requested url and get the image name
var query = url.parse(req.url,true).query;
pic = query.image;
if (typeof pic === 'undefined') {
getImages(imageDir, function (err, files) {
var imageLists = '<ul>';
for (var i=0; i<files.length; i++) {
imageLists += '<li><a href="/?image=' + files[i] + '">' + files[i] + '</li>';
imageLists += '</ul>';
res.writeHead(200, {'Content-type':'text/html'});
} else {
//read the image using fs and send the image content back in the response
fs.readFile(imageDir + pic, function (err, content) {
if (err) {
res.writeHead(400, {'Content-type':'text/html'})
res.end("No such image");
} else {
//specify the content type in the response will be an image
console.log("Server running at http://localhost:3333/");
//get the list of jpg files in the image dir
function getImages(imageDir, callback) {
var fileType = '.jpg',
files = [], i;
fs.readdir(imageDir, function (err, list) {
for(i=0; i<list.length; i++) {
if(path.extname(list[i]) === fileType) {
files.push(list[i]); //store the file name into the array files
callback(err, files);

upload file

      <title>File Uploading Form</title>

      <h3>File Upload:</h3>
      Select a file to upload: <br />
      <form action = "" method = "POST" 
         enctype = "multipart/form-data">
         <input type="file" name="file" size="50" />
         <br />
         <input type = "submit" value = "Upload File" />
var express = require('express');
var app = express();
var fs = require("fs");

var bodyParser = require('body-parser');
var multer  = require('multer');

app.use(bodyParser.urlencoded({ extended: false }));

var upload = multer({ dest: '/tmp/' });

app.get('/index.htm', function (req, res) {
   res.sendFile( __dirname + "/" + "index.htm" );
})'/file_upload', upload.single('file'), function (req, res) {

   var dest = __dirname + "/tmp/" + req.file.filename;
   fs.readFile( req.file.path, function (err, data) {
      fs.writeFile(dest, data, function (err) {
         if( err ){
            console.log( err );
               response = {
                  message:'File uploaded successfully',
         console.log( response );
         res.end( JSON.stringify( response ) );

var server = app.listen(8081, function () {
   var host = server.address().address
   var port = server.address().port
   console.log("Example app listening at http://%s:%s", host, port)
Copy link

fghhfg commented Dec 6, 2016

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment