21 Star 69 Fork 13

mikey.zhaopeng / ndpediter

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
该仓库未声明开源许可证文件(LICENSE),使用请关注具体项目描述及其代码上游依赖。
克隆/下载
demo.js 9.10 KB
一键复制 编辑 原始数据 按行查看 历史
mikey.zhaopeng 提交于 2015-12-10 13:10 . 添加注释
var newButton, openButton, saveButton;
var mdEditor;
var menu;
var fileEntry;
var hasWriteAccess;
var gui = require("nw.gui");
var fs = require("fs");
// 七牛 sdk
var qiniu = require('qiniu');
// 文件工具
var fsutils = require('fs-utils');
//配置文件,主要是存储七牛的密钥信息
var config = './config.json';
var options = null;
if (!fs.existsSync(config)) {
options = {
"ACCESS_KEY": '',
"SECRET_KEY": '',
"QINIU_URL": '',
"BUCKET_NAME": ''
}
qiniuconfig(function () {
location.reload();
});
} else {
options = fsutils.readJSONSync(config)
}
function newFile() {
fileEntry = null;
hasWriteAccess = false;
}
//保存文件按钮按下
function handleSaveButton() {
if (fileEntry && hasWriteAccess) {
writeEditorToFile(fileEntry);
} else {
$("#saveFile").trigger("click");
}
}
//保存文件
var onChosenFileToSave = function (theFileEntry) {
setFile(theFileEntry, true);
writeEditorToFile(theFileEntry);
};
//选择文件
var onChosenFileToOpen = function (theFileEntry) {
setFile(theFileEntry, false);
readFileIntoEditor(theFileEntry);
};
// 选择打开文件
function handleOpenButton() {
$("#openFile").trigger("click");
}
function setFile(theFileEntry, isWritable) {
fileEntry = theFileEntry;
hasWriteAccess = isWritable;
}
//将编辑器的内容保存到文件中
function writeEditorToFile(theFileEntry) {
var content = mdEditor.getMarkdown()
fs.writeFile(theFileEntry, content, function (err) {
if (err) {
console.log("Write failed: " + err);
return;
}
console.log("Write completed.");
});
}
//读取文件内容到编辑器
function readFileIntoEditor(theFileEntry) {
fs.readFile(theFileEntry, function (err, data) {
if (err) {
console.log("Read failed: " + err);
}
mdEditor.setMarkdown(String(data))
});
}
//读取图片文件名称
function getFileName(file) {
var fullPath = file;
if (fullPath) {
var startIndex = (fullPath.indexOf('\\') >= 0 ? fullPath.lastIndexOf('\\') : fullPath.lastIndexOf('/'));
var filename = fullPath.substring(startIndex);
if (filename.indexOf('\\') === 0 || filename.indexOf('/') === 0) {
filename = filename.substring(1);
}
return filename;
}
return file;
}
//将图片的 url 插入到编辑器中
function insertImageMd(url, alt, link) {
if (url === "") {
alert('图片地址为空');
return false;
}
var altAttr = (alt !== "") ? " \"" + alt + "\"" : "";
if (link === "" || link === "http://") {
mdEditor.replaceSelection("![" + alt + "](" + url + altAttr + ")");
} else {
mdEditor.replaceSelection("[![" + alt + "](" + url + altAttr + ")](" + link + altAttr + ")");
}
if (alt === "") {
mdEditor.setCursor(mdEditor.getCursor().line, mdEditor.getCursor().ch + 2);
}
}
//上传图片到七牛
function fileToQiniu(params, callback) {
qiniu.conf.SECRET_KEY = options.SECRET_KEY;
var bucketname = options.BUCKET_NAME;
var putPolicy = new qiniu.rs.PutPolicy(bucketname);
var uptoken = putPolicy.token();
var extra = new qiniu.io.PutExtra();
var key = params['key'];
var filePath = params['filePath'];
var fileName = params['fileName'];
qiniu.io.putFile(uptoken, key, filePath, extra, function (err, ret) {
if (err) {
return callback(err);
} else {
var url = '@' + ret.key;
if (callback) {
return callback(options.QINIU_URL + url);
}
}
});
}
//七牛配置信息弹出框
function qiniuconfig(callback) {
var t = '<div style="padding:15px;"><form class="editormd-form"><label>ACCESS_KEY</label><input type="text" data-access_key="" value="' + options.ACCESS_KEY + '"><br><label>SECRET_KEY</label><input type="text" data-secret_key="" value="' + options.SECRET_KEY + '"><br><label>QINIU_URL</label><input type="text" data-qiniu_url="" value="' + options.QINIU_URL + '"><br><label>BUCKET_NAME</label><input type="text" data-bucket_name="" value="' + options.BUCKET_NAME + '"><br></form></div>';
layer.open({
type: 1, //page层
area: ['500px', '300px'],
title: '你好,layer。',
shade: 0.6, //遮罩透明度
moveType: 1, //拖拽风格,0是默认,1是传统拖动
shift: 5, //0-6的动画形式,-1不开启
content: t,
btn: ['保存'],
yes: function (index, layero) { //或者使用btn1
var accessKey = $('input[data-access_key]').val();
var secretKey = $('input[data-secret_key]').val();
var qiniuUrl = $('input[data-qiniu_url]').val();
var bucketName = $('input[data-bucket_name]').val();
options = {
"ACCESS_KEY": accessKey,
"SECRET_KEY": secretKey,
"QINIU_URL": qiniuUrl,
"BUCKET_NAME": bucketName
}
fsutils.writeJSON(config, options);
layer.close(index);
if (callback) {
callback();
}
}
});
}
onload = function () {
gui.Window.get().show();
//初始化编辑器
mdEditor = editormd("editormd", {
width: "100%",
height: "600",
syncScrolling: "single",
path: "./verdor/editor/lib/",
watch: false,
toolbarIcons: function () {
var toolbars = editormd.toolbarModes['full'];
toolbars.push('|')
toolbars.push('config')
toolbars.unshift('|')
toolbars.unshift('save')
toolbars.unshift('new')
toolbars.unshift('open')
console.log(toolbars);
return toolbars; // full, simple, mini
},
toolbarCustomIcons: {
open: '<a href="javascript:;" title="打开(Ctrl+O)"><i class="fa fa-file-o" name="open"></i></a>',
new: '<a href="javascript:;" title="新建(Ctrl+N)"><i class="fa fa-file" name="new"></i></a>',
save: '<a href="javascript:;" title="保存(Ctrl+S)"><i class="fa fa-floppy-o" name="save"></i></a>',
config: '<a href="javascript:;" title="配置(Ctrl+P)"><i class="fa fa-cogs" name="config"></i></a>'
},
toolbarHandlers: {
open: function (cm, icon, cursor, selection) {
// console.log("testIcon2 =>", this, icon.html());
handleOpenButton();
},
new: function (cm, icon, cursor, selection) {
console.log("testIcon2 =>", this, icon.html());
},
save: function (cm, icon, cursor, selection) {
console.log("testIcon2 =>", this, icon.html());
// writeEditorToFile(fileEntry);
handleSaveButton();
},
config: function (cm, icon, cursor, selection) {
qiniuconfig();
},
image: function (cm, icon, cursor, selection) {}
}
});
setTimeout(function () {
mdEditor.toolbarHandlers.image = function () {
var t = '<div style="padding:15px;"><form class="editormd-form"><label>图片地址</label><input type="text" data-url=""><div class="editormd-file-input"><input type="file" name="editormd-image-file" accept="image/*"><input type="submit" id="upload-btn" value="本地上传"></div><br><label>图片描述</label><input type="text" value="" data-alt=""><br><label>图片链接</label><input type="text" value="http://" data-link=""></form></div>';
layer.open({
type: 1, //page层
area: ['500px', '300px'],
title: '你好,layer。',
shade: 0.6, //遮罩透明度
moveType: 1, //拖拽风格,0是默认,1是传统拖动
shift: 5, //0-6的动画形式,-1不开启
content: t,
btn: ['插入图片'],
yes: function (index, layero) { //或者使用btn1
var url = $('input[data-url]').val();
var alt = $('input[data-alt]').val();
var link = $('input[data-link]').val();
insertImageMd(url, alt, link);
layer.close(index);
}
});
};
}, 1000);
newFile();
$("#saveFile").change(function (evt) {
onChosenFileToSave($(this).val());
});
$("#openFile").change(function (evt) {
onChosenFileToOpen($(this).val());
});
//上传图片
$('body').off('change', 'input[name="editormd-image-file"]').on('change', 'input[name="editormd-image-file"]', function () {
console.log($(this).val());
var filePath = $(this).val();
var fileName = getFileName($(this).val());
var parmas = {
key: ('' + fileName),
filePath: filePath,
fileName: fileName
}
fileToQiniu(parmas, function (url) {
$('input[data-url]').val(url);
$('input[data-alt]').val(fileName);
})
});
};
NodeJS
1
https://gitee.com/imzhpe/ndpediter.git
git@gitee.com:imzhpe/ndpediter.git
imzhpe
ndpediter
ndpediter
master

搜索帮助