WYSIWYG
更新:ringring模块现在重写了amarkdown编辑器的核心事件处理,如果需要编写自定义的markdown编辑器,可以使用ringring.
###依赖模块
- CodeMirror 编辑代码高亮
- marked html解析器
- highlight html代码高亮
- hogan 前端模板引擎
###如何使用
在index.html中很好的标明了需要引入的css、js文件，以及如何调用AMD.make()构造器。
导入css文件
<link type="text/css" rel="stylesheet" href="css/font-awesome/css/font-awesome.css"/>
<link type="text/css" rel="stylesheet" href="css/codemirror.css"/>
<link type="text/css" rel="stylesheet" href="css/highlight/xcode.css"/>
<link type="text/css" rel="stylesheet" href="css/amd.css"/>
<link type="text/css" rel="stylesheet" href="css/markdown.css"/>导入js文件
<script src="js/codemirror/lib/codemirror.js"></script>
<script src="js/codemirror/mode/markdown/markdown.js"></script>
<script src="js/amd.js"></script>
<script src="js/amd.hogan.js"></script>
<script src="js/amd.template.js"></script>
<script src="js/amd.marked.js"></script>
<script src="js/amd.highlight.js"></script>
<script src="js/amd.make.js"></script>调用构造器
AMD.make('#amd-editor', {
amdBack: '/',
amdPubMethod: 'post',
amdPubAction: '/',
amdSaveAction: '/',
amdUploadImgAction: '/image',
amdInitText: '',
amdInitTitle: '',
titleName: 'title',
textName: 'text'
});服务器添加图片存储路由, 类似这样的程序
// 收到图片上传请求
// 保存图片
// 返回保存后图片的路径###AMD.make构造器参数
- amdUploadImgAction 上传图片的服务器路径
- amdPubAction 发布按钮点击，文章内容提交的服务器路径
- titleName 发布标题name值
- textName 发布内容name值
到目前为止，a markdown editor的收尾做的有些仓促。未来还打算增加mini版本的css，编辑和预览放入一个控件位置以及增加前端图片格式预判断等。 还未制作的完毕的部分：上传图片URL直接输入，未来更新。
[see DEMO]// 已下线