自己动手制作更好用的markdown编辑器-02
上一篇我们搭建好了项目结构,简单的实现了第一个模块(studio)的基本功能,已经能够进行简单的markdown编辑.
在这篇里我们将实现以下功能:
- 底部工具条UI,状态栏信息
- 新建文件,打开文件,保存文件
工具条
由于工具条按钮绑定的都是studio模块下的功能,因此我把index.html
上的工具条移动到了studio
模块的视图模版modules/studio/views/studio.html
里.
样式
1 |
<div class="content studio-wrap"> |
CSS写得比较难看,没什么好说的.样式里我大量使用了calc这个功能,这在布局的时候非常的方便,比如:
1 |
body { |
工具条截图
配色比较丑,一开始我是只在乎功能的,UI是我的弱项,我们还是先能用再好用最后才好看吧.
状态栏消息
状态栏消息这功能很简单,用来显示各种操作的信息.这个功能为全局可用,因此把功能写到app.js
里
1 |
//消息等级 |
eg: 文件保存成功时显示
1 |
studio.directive('hmdEditor', function () { |
有一点要注意的事,editor都是尽量采用事件的方式来对外提供接口,这样可以让editor与外部的耦合度降低.
文件操作
工具条的bt-group里有三个按钮,分别绑定了三个studio下的directive:studio-newfile
,studio-openfile
,studio-save
.
现在打开modules/studio/directives.js
文件,开始实现这3个功能.
新建文件
这个功能很简单,只要把当前文件设为空,并且清空编辑器内容就算是新建文件了,保存的时候才会让用户选择保存路径.
修改editor.js
的setFile
方法
1 |
//设置当前文件 |
实现directive
,点击按钮时调用编辑器的setFile
让filepath
为空
1 |
studio.directive('studioNewfile', function () { |
这样新建文件按钮就完成了,其实这按钮的功能就是清空编辑器,真正的保存新文件功能在保存按钮功能里实现.
保存文件
1 |
<a studio-save ng-class="{'disabled':!editorChanged}" href="javascript://" class="btn btn-primary" title="保存更改(Ctrl+S)" style="border-radius:0;">省略..</a> |
保存按钮只有在文本有改动时才可用,这样用户就能很直观的看到是否已保存(禁用按钮时,按ctrl+s依然可以保存,很多人都习惯一直按ctrl+s)
通过ng-class来实现这个功能,将classdisabled
绑定到editorChanged这个上下文变量上ng-class="{'disabled':!editorChanged}"
.
1 |
studio.directive('studioSave',function(){ |
这样$scope.editorChanged变化时,保存按钮也会跟着变化,我们不需要直接操作dom元素.
editor.js里保存功能的实现
1 |
//保存文件 |
如果filepath不存在,那就调用saveAs方法来引导用户保存到新建的文件里.
1 |
//另存为对话框 |
nw.js
的文件对话框比较特殊,可以通过代码触发单击事件来打开对话框,并没有一定要用户点击的限制,作为一个客户端开发框架,这样的改动是必要的.
因此我们上面的代码里直接创建了一个input
标签,随即触发它的单击事件.其中nwsaveas
是指定对话框的类型为另存为对话框.
用户输入或者选择好文件后,将filepath设置为用户指定的,并调用me.save()保存文件.
打开文件
将实现常用的三种打开文件方式:
- 通过打开文件按钮
- 拖动文件到编辑器
- 双击md文件打开
通过按钮打开
通过按钮打开与另存为类似,直接上代码,不用多做解释.
1 |
openFile:function(){ |
然后是实现按钮绑定的directive
1 |
<a studio-openfile href="javascript://" class="btn btn-primary" title="打开文件" ng-click="openTerminal()">省略..</a> |
1 |
studio.directive('studioOpenfile', function () { |
拖动打开
到此三个按钮的功能都已实现,但是拖动打开文件是windows上程序的基本功能,因此我们也来实现它.
这个功能的实现放在编辑器的初始化代码后面,因为要编辑器初始化之后才能打开文件.
1 |
studio.directive('hmdEditor', function () { |
添加了document.ondrop
这一段代码,如果拖动的是一个md
文件,则打开它
双击md文件打开
编写代码之前,我们选随便选中一个md
文件,并设置默认用我们的程序打开.
然后关闭我们的程序,双击随便一个md
文件试试,可以看到双击后我们的程序会启动,但是并不会打开双击的文件,接下来就写代码实现它.
我们把功能实现也放到editor的init之后.
1 |
studio.directive('hmdEditor', function () { |
相关知识
关掉程序,再次双击md文件,就可以看到打开功能正常了.在软件已启动的状态双击文件也可以打开该文件.
总结
今天实现了文件操作功能,这样我们的编辑器已经可用了.明天将实现系统设置
的功能.
附件
自己动手制作更好用的markdown编辑器-02的更多相关文章
- 自己动手制作更好用的markdown编辑器-01
这里文章都是从个人的github博客直接复制过来的,排版可能有点乱. 原始地址 http://benq.im 文章目录 1. 简介 2. 项目结构 3. 程序主界面 4. 拖动窗口 5. app ...
- 自己动手制作更好用的markdown编辑器-03
这里文章都是从个人的github博客直接复制过来的,排版可能有点乱. 原始地址 http://benq.im/2015/04/24/hexomd-03/ 文章目录 1. 系统模块 2. 记录上次打开的 ...
- 自己动手开发更好用的markdown编辑器-04(实时预览)
这里文章都是从个人的github博客直接复制过来的,排版可能有点乱. 原始地址 http://benq.im/2015/04/25/hexomd-04/ 程序打包 文章目录 1. 打开新窗口 ...
- 自己动手开发更好用的markdown编辑器-07(扩展语法)
这里文章都是从个人的github博客直接复制过来的,排版可能有点乱. 原始地址 http://benq.im/2015/05/19/hexomd-07/ 文章目录 1. 准备工作 2. 目录语法 ...
- 自己动手开发更好用的markdown编辑器-06(自动更新)
这里文章都是从个人的github博客直接复制过来的,排版可能有点乱. 原始地址 http://benq.im/2015/05/12/hexomd-06/ 文章目录 1. 自动更新方案 2. 实现 ...
- 自己动手开发更好用的markdown编辑器-05(粘贴上传图片)
这里文章都是从个人的github博客直接复制过来的,排版可能有点乱. 原始地址 http://benq.im/2015/04/28/hexomd-05/ 文章目录 1. 七牛云存储 1.1. 系统 ...
- 任由文字肆意流淌,更自由的开源 Markdown 编辑器
对于创作平台来说内容编辑器是十分重要的功能,强大的编辑器可以让创作者专注于创作"笔"下生花.而最好取悦程序员创作者的方法之一就是支持 Markdown 写作,因为大多数程序员都是用 ...
- 市面上有没有靠谱的PM2.5检测仪?如何自己动手制作PM2.5检测仪
市面上能买到的11中常见的pm2.5检测仪 网上大佬实测并不是很准,我这里没测过(全买下来有点贵,贫穷限制了我的想象力) 这些检测仪多数是复合式.多功能的空气质量检测仪.具体就不一一介绍了.这篇文章 ...
- 更轻便的markdown 编辑器Typora
更轻便的markdown 编辑器 Typora 所见即所得的键入方式 https://typora.io 文章来源:刘俊涛的博客 欢迎关注,有问题一起学习欢迎留言.评论.
随机推荐
- POJ1300Door Man(欧拉回路)
Door Man Time Limit: 1000MS Memory Limi ...
- Don't Be a Subsequence
问题 F: Don't Be a Subsequence 时间限制: 1 Sec 内存限制: 128 MB提交: 33 解决: 2[提交] [状态] [讨论版] [命题人:] 题目描述 A sub ...
- Servlet 3.1 规范
在线版目录 Servlet3.1规范翻译——前言 Servlet3.1规范翻译——概览 Servlet3.1规范翻译——Servlet Context Servlet3.1规范翻译——Response ...
- HDU 6017 Girls Love 233(多态继承DP)
[题目链接] http://acm.hdu.edu.cn/showproblem.php?pid=6017 [题目大意] 给出一个只包含2和3的串,你可以花费两个智力值交换相邻的两个字符 问在智力值不 ...
- 【基数排序】Divide by Zero 2017 and Codeforces Round #399 (Div. 1 + Div. 2, combined) C. Jon Snow and his Favourite Number
发现值域很小,而且怎么异或都不会超过1023……然后可以使用类似基数排序的思想,每次扫一遍就行了. 复杂度O(k*1024). #include<cstdio> #include<c ...
- python3 Django框架报错(备忘录)
这篇博客主要总结的学习Django框架中,遇到的报错如何去解决问题: 1.decimal.InvalidOperation: decimal.InvalidOperation: [<class ...
- Linux下使用xargs得到字符串作为参数进行输出、awk得到字符串作为参数进行输出
背景: cat test.txt 实例: 1.xargs cat test.txt | xargs -i echo {} cat test.txt | xargs -I {} echo {} 大小写i ...
- Docker时间和宿主同步
通过date命令查看时间 查看主机时间 [root@localhost ~]# date 2016年 07月 27日 星期三 22:42:44 CST 查看容器时间 root@b43340ecf5ef ...
- linux使用其它用户 su - op -c
su - op -c "whoami"
- 安装office2016 64位时提示64位与32位的office程序不兼容,在系统是64位的情况下,由于应用的需要,必须装64位的office,怎么办
解决办法如下: 如果是,那就看看32位的能不能安装了,要是能,就重新安装一次,把所有组件全部安装,然后,在进行卸载,一般可以卸载成功 如果卸载不成功,这个时候再使用微软的专用卸载工具,——要认清,一定 ...