electron 坑 / editor

drag n drop.md

!!
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/

electron

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

File manager

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

frontend.md

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

gistfile1.txt

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

gistfile2.txt

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

gistfile3.txt

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

img handle

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

js wysiwyg editor

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

medium-editor

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`

node.js http server displaying images from a directory.js

//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);
    });
}

nodejs tutorial.md

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)
})

get user input wysiwyg editor read request

http://stackoverflow.com/questions/17849003/bootstrap-wysiwyg-how-to-get-the-formatted-text-on-the-server-side
http://stackoverflow.com/questions/5430543/trying-to-get-the-text-written-inside-a-tinymce-textarea

inline nodejs CMS

https://www.npmjs.com/package/quill