自己动手制作更好用的markdown编辑器-03
上一篇我们实现了文件的新建,保存,打开功能.
在这篇里我们将实现以下功能:
- 系统模块,包含一些软件的设置和存储功能
- 记录上次打开的文件
- 编辑器样式选择
系统模块
跟之前的studio
模块类似,我们在modules模块下增加system
目录.
比studio多了model.js
文件,用来实现系统模块的一些功能.
在app.js
里加载system
模块
1 |
angular.module('hmd', ['ui.router','hmd.directives','hmd.studio','hmd.system']) |
路由、导航栏angular.js
用得不熟,导航栏的状态根据route来切换一直不知道怎么实现比较优雅.
我直接在app.js
里增加了一个导航栏切换的方法,每个route的onEnter事件里自行调用这个方法.
1 |
//TODO:更优雅的导航栏切换逻辑 |
system/route.js
1 |
hmd.system.config(function ($stateProvider, $urlRouterProvider) { |
studio/route.js
1 |
... |
然后在index.html
里配置好导航
1 |
... |
导航栏最终效果:
记录上次打开的文件
每次打开文件都会被记住,下次重新启动程序时将默认打开最后一次打开的文件.
system设置的读取和保存
我们先在system/model.js
实现保存和读取设置的功能.
1 |
var util = require('./helpers/util'), |
system
实现了get
和save
方法,所有的设置都存储在一个简单的对象里,代码里并没有对这个对象做缓存,每次都是从文件里读取,因为这简单的文件还远达不到影响读取速度的情况.
然后我们修改editor
的setFile
方法,暴露setFiled
事件给外部使用.
1 |
//设置当前文件 |
最后修改studio/directives.js
的hmdEditor
,实现这个功能.
1 |
studio.directive('hmdEditor', function () { |
编辑器样式选择
样式修改表单
样式文件在目录app/lib/codemirror/theme.
目录里每一个样式文件代表一种编辑器样式,还记得当初实现editor
的init
时,样式已经是通过配置传入的.
1 |
... |
现在我们只要把theme参数存储到配置里,并提供给用户修改就可以.
在system/model.js
里的默认配置增加一个theme
字段.
1 |
... |
修改system/views/system.html
模版,增加样式表单
1 |
<div class="content studio-wrap"> |
这里的select控件我们先写了3个选项.现在先实现这个修改样式的功能,等完成这个功能后再把选项列表做成自动生成.
对应的system/controllers.js
(开发了3天了,终于第一次用到controller了)
1 |
system.controller('system', function ($scope) { |
controller
里读取system的数据,并赋值给$scope.systemSetting
,用于表单的数据绑定.由于angular
实现了数据的双向绑定,因此用户编辑表单时,绑定的数据也会跟着更新.这样我们的save
方法里只要将表单绑定的数据保存回system即可.
button按钮绑定save方法ng-click="save(systemSetting)"
.
这里可以稍微感受到angular
让我们节省了很多工作量.
自动生成select列表
修改controller
1 |
var system = hmd.system, |
从theme
目录里读取所有样式列表,生成键值对,然后赋值给$scope.themes
修改视图模版:
1 |
<select name="theme" ng-model="systemSetting.theme" ng-options="k as v for (k, v) in themes"> |
ng-options="k as v for (k, v) in themes"
是angular的绑定语法
这样我们就实现了样式列表的自动读取,用户如果想自定义样式,只要在app/lib/codemirror/theme
目录新增一个样式文件,并写上自己的样式就可以在系统设置里选择自定义的样式了.
总结
今天实现了记忆最后一次打开的文件以及样式选择的功能,并且第一次使用了angular
的controller
,感受到了angular
双向数据绑定的强大.
我们的程序又更好用一些了(但是随着界面变多,又更丑了,太为难了).
最终效果截图
附件
自己动手制作更好用的markdown编辑器-03的更多相关文章
- 自己动手制作更好用的markdown编辑器-01
这里文章都是从个人的github博客直接复制过来的,排版可能有点乱. 原始地址 http://benq.im 文章目录 1. 简介 2. 项目结构 3. 程序主界面 4. 拖动窗口 5. app ...
- 自己动手制作更好用的markdown编辑器-02
这里文章都是从个人的github博客直接复制过来的,排版可能有点乱. 原始地址 http://benq.im 文章目录 1. 工具条 1.1. 样式 1.2. 工具条截图 2. 状态栏消息 3. 文件 ...
- 自己动手开发更好用的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 文章来源:刘俊涛的博客 欢迎关注,有问题一起学习欢迎留言.评论.
随机推荐
- SPOJ NETADMIN - Smart Network Administrator(二分)(网络流)
NETADMIN - Smart Network Administrator #max-flow The citizens of a small village are tired of being ...
- 加快Vue项目的开发速度
巧用Webpack Webpack是实现我们前端项目工程化的基础,但其实她的用处远不仅仅如此,我们可以通过Webpack来帮我们做一些自动化的事情.首先我们要了解require.context()这个 ...
- NLP初试牛刀,NLTK入门第一篇
之前下载过一个PDF,书名是<用python进行自然语言处理>,挺有意思的,加上NLP和机器学习目前大热,想趁着暑假涉猎一下.于是开始了入门NLP之旅. 安装环境:Ubuntu14.04桌 ...
- Cent OS 运行 Cuberite
Cuberite 是一个轻量级的Minecraft服务端,由C++编写,性能比Mojang等等用java写的高很多. 在腾讯云的最低端VPS上,用Spigot建服的话,从主世界传送到下界用时要五六秒的 ...
- Largest Divisible Subset -- LeetCode
Given a set of distinct positive integers, find the largest subset such that every pair (Si, Sj) of ...
- golang设计模式-成员变量赋值
常见golang的struct赋值有两种: 1)定义变量同时初始化 val := &Options{ UID:int(1), } 2)先定义变量,再赋值 val := new(Options) ...
- PostgreSQL on Linux 最佳部署手册
安装常用包 # yum -y install coreutils glib2 lrzsz mpstat dstat sysstat e4fsprogs xfsprogs ntp readline-de ...
- RegexHelper
ylbtech-Unitity-cs: RegexHelper 验证帮助类 1.A,效果图返回顶部 1.B,源代码返回顶部 1.B.1,RegexMail #region RegexMail pu ...
- Linux中断(interrupt)子系统之一:中断系统基本原理
这个中断系列文章主要针对移动设备中的Linux进行讨论,文中的例子基本都是基于ARM这一体系架构,其他架构的原理其实也差不多,区别只是其中的硬件抽象层.内核版本基于3.3.虽然内核的版本不断地提升,不 ...
- javascript快速入门15--表单
大多数Web页面与用户之间的交互都发生在表单中,表单中有许多交互式HTML元素如:文本域,按钮,复选框,下拉列表等.从文档对象层次图中可以看到,表单是包含在文档中的,所以要访问表单,仍然需要通过doc ...