Skip to content

Instantly share code, notes, and snippets.

@fghhfg
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

!!
http://stackoverflow.com/questions/8363464/jquery-drag-n-drop-files-how-to-get-file-info

reader.readAsText(file);
...
$('#dropzone div')[0].innerHTML = "sdfsfsd<b>sdfsf</b>"
$('#dropzone div')[0].innerHTML = e.target.result.text();

Web APIs > File
FileReader.readAsText()

readAsText is asynchronous, so you would need to use the onload callback to see the result.
ref: http://stackoverflow.com/questions/13729301/html5-file-api-how-to-see-the-result-of-readastext


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.
ref: http://stackoverflow.com/questions/2488839/does-jquery-strip-some-html-elements-from-a-string-when-using-html

http://stackoverflow.com/questions/4079179/jquery-html-strips-out-script-tags

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
ref: http://stackoverflow.com/questions/7023457/get-input-type-file-value-when-it-has-multiple-files-selected

Web APIs > File
ref: https://developer.mozilla.org/en-US/docs/Web/API/File

Using files from web applications
ref: https://developer.mozilla.org/en/docs/Using_files_from_web_applications

FileReader
ref: https://developer.mozilla.org/en/docs/Web/API/FileReader

No one will argue that HTML5's DnD model is complicated compared to other solutions like JQuery UI.
ref: https://www.html5rocks.com/en/tutorials/dnd/basics/

https://www.slideshare.net/ccckmit/nodejs-electronjs
example06 要 npm install marked
package.json 和 node.js 的 package.json 幾乎一模一樣
https://docs.npmjs.com/getting-started/using-a-package.json
https://stackoverflow.com/questions/22891211/what-is-the-difference-between-save-and-save-dev
在主程式 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.
https://www.christianengvall.se/main-and-renderer-process-in-electron/
https://electron.atom.io/docs/faq/#how-to-share-data-between-web-pages
in JavaScript, variable declared with var is automatically moved to the top.
http://xahlee.info/js/javascript_name_hoisting_declaration_order.html
.html中,javascript 的 variable 不會自動移到上方。
Uncaught Error: prompt() is and will not be supported.
https://github.com/electron/electron/issues/472
Grabbing file path from input=file
document.getElementsByTagName('input')[0].files[0].path
ref: https://github.com/electron/electron/issues/5949
tabs
https://www.npmjs.com/package/react-tabs
https://www.npmjs.com/package/electron-tabs
https://stackoverflow.com/questions/38266951/how-to-create-chrome-like-tab-on-electron
https://src.works/google-chrome-tabs-javascript-electron-webviews-iframes
kw: nodejs server file manager
File manager web server based on Node.js with Koa, Angular.js and Bootstrap
https://github.com/efeiefei/node-file-manager
express-file-manager
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.
https://www.npmjs.com/package/express-file-manager
How to create a Web based File Browser using NodeJS, Express and JQuery Datatables
https://chawlasumit.wordpress.com/2014/08/04/how-to-create-a-web-based-file-browser-using-nodejs-express-and-jquery-datatables/
https://stackoverflow.com/questions/6294186/express-js-any-way-to-display-a-file-dir-listing
serve-index
---
electron file manager
https://github.com/hokein/electron-sample-apps/tree/master/file-explorer
---
http://www.fullstacktraining.com/articles/how-to-serve-static-files-with-express

tiddlywiki

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 https://www.reddit.com/r/webdev/comments/4gtjkt/anyone_have_experience_with_inline_cms_editors/?st=ivrr50q5&sh=0f821d2a

http://softwarerecs.stackexchange.com/questions/26958/simple-inline-cms-to-allow-permission-based-editing-of-text-blocks-on-custom-web

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

Node.js cms framework comparison https://blog.budacode.com/2015/05/08/node-js-cms-framework-comparison/

https://github.com/relax/relax

electron markdown editor

list electron app:

https://github.com/sindresorhus/awesome-electron

  • 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
http://stackoverflow.com/questions/1582251/how-to-load-html-using-jquery-into-a-tinymce-textarea
http://stackoverflow.com/questions/9789729/load-html-files-in-tinymce

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

electron 坑
https://segmentfault.com/a/1190000005351283
Quick Start
https://github.com/electron/electron/blob/v1.4.10/docs/tutorial/quick-start.md
https://medium.com/developers-writing/building-a-desktop-application-with-electron-204203eeb658#.vtku7s6gh
https://github.com/electron/electron-quick-start
https://github.com/hokein/electron-sample-apps/tree/master/file-explorer
https://github.com/GreenTurtwig/Material-Notepad
https://github.com/sindresorhus/awesome-electron
A simple notepad desktop app built on Electron and Quill
https://github.com/Outis161/notetron
monte-note: rich editor && cms on Electron and Quill
https://github.com/urbanogardun/monte-note
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.
https://github.com/quilljs/quill/issues/1089
http://codepen.io/jackmu95/pen/EgBKZr
Hugo admin interface with Caddy webserver
https://discuss.gohugo.io/t/hugo-admin-interface-with-caddy-webserver/1803
https://caddyserver.com/docs/hugo
用 java 写桌面程序 ui 只能用 swing 或者 swt 么?
Basic Routing, Serving Static Files
GET Method, POST Method, File Upload
https://www.tutorialspoint.com/nodejs/nodejs_express_framework.htm
file = req.files.FormFieldName; // here is the field name of the form
http://stackoverflow.com/questions/23114374/file-uploading-with-express-4-0-req-files-undefined
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.
http://expressjs.com/en/4x/api.html#req
Multer
https://github.com/expressjs/multer/blob/master/README.md
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>" ...>.
```
http://stackoverflow.com/questions/31530200/node-multer-unexpected-field
upload file:
simple:
https://www.tutorialspoint.com/nodejs/nodejs_express_framework.htm
complex:
https://github.com/blueimp/jQuery-File-Upload
File uploads using Node.js
https://codeforgeek.com/2014/11/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.
https://codeforgeek.com/2014/10/express-complete-tutorial-part-1/
一分钟实现网页多人聊天室【Socket.IO】
http://www.jianshu.com/p/5539ccd8d9c4
https://segmentfault.com/a/1190000007230919
Build a Real-Time Markdown Editor with Node.js
multiple people to work on the same markdown document
https://scotch.io/tutorials/building-a-real-time-markdown-viewer
Node.js (sails.js) wysiwyg editor - images
ref: http://stackoverflow.com/questions/21378630/node-js-sails-js-wysiwyg-editor-images
Need a simple WYSIWYG editor with image upload [closed]
ref: http://stackoverflow.com/questions/4438043/need-a-simple-wysiwyg-editor-with-image-upload
http://jingfengblog.blogspot.com/2010/08/tinymce.html
http://www.guokr.com/question/572671/
http://izo.tw/tinymce-image/
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..)
https://github.com/cianclarke/node-gallery
node.js http server displaying images from a directory
http://www.codexpedia.com/node-js/node-js-http-server-displaying-images-from-a-directory/
Ten minutes to create a node.js based album on BlueMix (Part Two)
http://bluemixtips.blogspot.tw/2014/05/ten-minutes-to-create-nodejs-based_16.html
https://github.com/foolyoghurt/N-Gallery
Build an Instagram clone with AngularJS, Satellizer, Node.js and MongoDB
Building a File Uploader with NodeJs
Image manipulation using NodeJS and ImageMagick
https://code.ciphertrick.com/2015/12/21/image-manipulation-using-nodejs-imagemagick/
!!!
app:
Creating a Photo Discovery App with NW.js (part 1)
like photoswipe:
https://github.com/fengyuanchen/viewerjs
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
https://github.com/MoOx/pjax
https://news.ycombinator.com/item?id=12481969
https://www.reddit.com/r/Frontend/comments/4m3eco/barbajs_create_smooth_transition_between_your/
kw:
image gallery node.js example
summernote upload image handle example:
https://stackoverflow.com/questions/34234004/summernote-onimageupload-not-being-executed
https://stackoverflow.com/questions/46264048/summernote-0-8-8-onimageupload-example
tinymce uploadImages
https://stackoverflow.com/questions/47026995/using-tinymce-to-upload-images-to-server
https://www.tinymce.com/docs/advanced/handle-async-image-uploads/
https://stackoverflow.com/questions/36793228/customizing-image-uploading-in-tinymce
FormData的使用
資料上傳的方式有很種,例如
1、表單上傳
2、利用jQuery上傳
3、使用XMLHttpRequest上傳
https://dotblogs.com.tw/brooke/2017/05/03/101325
貼圖時:
base64
url
add remote url
upload to server && add url
wysiwyg editor
Froala Editor # $
Redactor # $
ContentTools #front
TinyMCE
CKEditor.com
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?
Draft.js
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
https://news.ycombinator.com/item?id=10410879
https://m.reddit.com/r/drupal/comments/1x3vgj/best_wysiwyg_editor_and_image_handler_combo/
https://www.reddit.com/r/node/comments/525o6q/wysiwyg_editor_for_node_with_express
https://news.ycombinator.com/item?id=11487667
https://www.zhihu.com/question/38699645
有多大比例的前端工程师,能在合理的时间内独立开发出一个足以供商业网站使用的文本编辑器?
https://www.zhihu.com/question/26739121/answer/291059836
富文本编辑器选型
https://github.com/hax/hax.github.com/issues/41
---
可以自定 text-change 與 selection-change 兩個事件(event)的 listener,自定處理函數。
支援多人同時編輯,可以標示出每個人編輯的游標與內容。
支援 responsive layout。
判断当前光标下是否为粗体
document.queryCommandState('bold')
切换当前光标下粗体状态
document.execCommand('bold')
那这样的话,写一个富文本编辑器不是很简单吗?只要用 execCommand 做命令映射就好了,所有的 DOM 变更操作都由浏览器实现好了。
也有一些编辑器不是完全利用 execCommand 来实现编辑操作的,比如 Medium 的编辑器实现了一个自定义的 Model ,操作是对这个 Model 的修改,然后再把 Model 映射成 DOM 。
另外还了解过 quill.js ,开发很活跃,代码很清晰。也是自己搞的一套文档模型,很有学习价值。不过这家伙原来用 coffeescript ,一次推翻重来改用 ES6 重写,现在已经不敢在产品里用它了。。
另外推荐 tower.im 出的 simditor ,这个是没有自己的文档模型的,但是已经很成熟了,也在不少产品中有使用( teambition 也是用的它,哈哈)。我们产品上个月刚换它,效果还不错的,也很方便自己扩展。
https://www.v2ex.com/t/257613
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
讓人需要的時候就直接打開網頁、使用TinyMCE編輯網頁吧。
http://blog.pulipuli.info/2017/08/htmltinymce-online-html-editor.html
---
quilljs:
get/set html
quill.root.innerHTML
https://github.com/quilljs/quill/issues/903
You can convert Quill Delta to HTML on the server with node.js and jsdom without using a real browser.
https://github.com/quilljs/quill/issues/1240
https://github.com/quilljs/quill/issues/993#issuecomment-249387907
Deltas are a simple, yet expressive format that can be used to describe Quill’s contents and changes.
https://github.com/quilljs/quill/issues/993#issuecomment-260889322
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.
https://github.com/quilljs/quill/issues/774
save:
JSON.stringify( quill.getContents() )
http://quilljs.com/playground/#autosave
load:
quill.setContents( JSON.parse(data) )
https://stackoverflow.com/questions/39733120/how-to-read-in-existing-data-into-quill-js
image handle:
https://github.com/quilljs/quill/issues/1400#issuecomment-296936021
https://github.com/quilljs/quill/issues/863#issuecomment-240579430
---
summernote:
改<input type="file">之預設值:
$(document).ready(function() {
$('#summernote').summernote({
callbacks: {
onImageUpload: function(image) {
var image = $('<img>').attr('src', 'badge.png');
$('#summernote').summernote("insertNode", image[0]);
}
}
});
});
upload image handle example:
https://stackoverflow.com/questions/34234004/summernote-onimageupload-not-being-executed
https://stackoverflow.com/questions/46264048/summernote-0-8-8-onimageupload-example
in electron:
複製檔案
讀<input>檔案位置
create input tag, type file, then click()
add url
-
Q: url與圖檔實際位址不同
inset image > select from files (code):
https://github.com/summernote/summernote/blob/4b6e91b011bbaef7a6d1a4c6d8eea95b7d8285b0/src/js/base/module/ImageDialog.js#L27
https://github.com/summernote/summernote/issues/1240
don't add http:// on link:
$(".summernote").summernote({
onCreateLink : function(originalLink) {
return originalLink; // return original link
}
});
https://github.com/summernote/summernote/issues/1037
uncheck `open link in new window`
$('.summernote').summernote({
linkTargetBlank: true
});
https://github.com/summernote/summernote/pull/2195
custom popover:
https://summernote.org/deep-dive/#custom-button
https://summernote.org/deep-dive/#custom-toolbar-popover
You can create whatever you want in summernote plugin system
https://github.com/summernote/summernote/issues/1924
https://github.com/summernote/summernote/issues/871
plugins:
https://github.com/summernote/awesome-summernote
https://github.com/summernote/summernote/issues/1240
https://github.com/summernote/summernote/blob/develop/plugin/hello/summernote-ext-hello.js
ex: https://github.com/DiemenDesign/summernote-image-attributes
https://github.com/yabwe/medium-editor
>
https://github.com/orthes/medium-editor-insert-plugin
https://github.com/blueimp/jQuery-File-Upload
>
Using jQuery File Upload (UI version) with Node.js
1. run receive file server:
```js
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
fs.js:809
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'});
res.end(imageLists);
});
} 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'})
console.log(err);
res.end("No such image");
} else {
//specify the content type in the response will be an image
res.writeHead(200,{'Content-type':'image/jpg'});
res.end(content);
}
});
}
}).listen(3333);
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 https://www.tutorialspoint.com/nodejs/nodejs_express_framework.htm

<html>
   <head>
      <title>File Uploading Form</title>
   </head>

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

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

app.use(express.static('public'));
app.use(bodyParser.urlencoded({ extended: false }));

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

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

app.post('/file_upload', upload.single('file'), function (req, res) {
   console.log(req.file.filename);
   console.log(req.file.path);
   console.log(req.file.mimetype);

   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 );
            }else{
               response = {
                  message:'File uploaded successfully',
                  filename:req.file.filename
               };
            }
         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)
})
@fghhfg
Copy link
Author

fghhfg commented Nov 21, 2016

inline nodejs CMS

@fghhfg
Copy link
Author

fghhfg commented Dec 6, 2016

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