瞎扯淡 ruby china SPA by angular js

suffering · 2014年05月26日 · 最后由 hxtheone 回复于 2014年05月29日 · 3741 次阅读

闲着无聊使用 anuglarjs 做的 ruby-china.org 的 SPA 应用。

当前只有远程看帖,发帖,回帖的功能,界面也是随便弄的一个,上图片:

功能上有点鸡肋,希望有一天能被采用,到时 rubychina 能切换多主题,甚至自定义界面 : )

changelog

5 月 29

新增 创建贴子或添加评论时的markdown内容实时预览,支持 emoji. 上图片:

此评论来自 SPA 端~~, 测试,兼自占沙发。

:plus1: 求个测评 link

部属一个看看效果呀

@huacnlee, @special不行呢,现在代码太丑陋了。比如说 POST 硬编码 TOKEN 之类的,CROS 之类的问题也都还没解决。所以啊,先放在瞎扯淡分类里呢~~`

应该会在这周末上个 DEMO 链接,再 push 到 github 上去。

新增 创建贴子或添加评论时的markdown内容实时预览,支持 emoji. 上图片:

#5 楼 @suffering 请问这种实时预览功能是用什么实现的

#6 楼 @kidult , angularjs 天生带这个功能。具体如下:

<div class='col-md-6'>
    <select class='form-control' ng-init='topic.node_id = 1' ng-model='topic.node_id' ng-options="node.id as node.name group by node.section_name for node in nodes" prompt="选择分类"></select>
    <input class='form-control' ng-model='topic.title' name='title'  placeholder='在这里输入标题' required  ng-minlength=2 />
    <span class="text-warning" ng-show="topicForm.title.$error.required">
          * 不能为空</span><br>
    <textarea ng-init="topic.body = ''"  ng-model='topic.body' class='form-control' style='min-height: 200px;' ng-required ng-min-length='1' msd-elastic></textarea>
</div>
<div class='col-md-6'>
    <h4>{{topic.title}}</h4>
    <div btf-markdown="topic.body | emoji">
    </div>
</div>

左边的内容写入,右边的会实时更新上去。但是右边加上了一个 directive (btf-markdown) 和一个 fitler (emoji).分别来自于angular-markdown-directiveemoji.

加上两条指令后会将 markdown 语法转换后显示。这个在 angularjs 里相当简单。

太酷了~

suffering RubyChinaSPA by Anugarjs 发布 提及了此话题。 10月09日 10:25
需要 登录 后方可回复, 如果你还没有账号请 注册新账号