文档章节

实现支持Markdown的编辑器的三种方式

lilugirl
 lilugirl
发布于 2014/04/22 11:50
字数 437
阅读 179
收藏 3

每种方式都有利有弊,很蛋疼


1 使用bootstrap的markdown扩展插件

http://toopay.github.io/bootstrap-markdown/


2 只需几句代码的简易版markdown编辑器

<!doctype html>

<html ng-app="myApp">

  <head>

    <meta charset="utf-8" />

    <style>

 *{webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;font-size:18px;}.form,article{display:inline-block;width:49%;vertical-align:top;}.form > div{width:100%;}.form input{height:1.6em;line-height:1.6;padding:.3em .6em;width:100%;}.form textarea{width:100%;min-height:30em;line-height:1.6;padding:.3em .6em;}/* Tomorrow Night Theme *//* http://jmblog.github.com/color-themes-for-google-code-highlightjs *//* Original theme - https://github.com/chriskempson/tomorrow-theme *//* http://jmblog.github.com/color-themes-for-google-code-highlightjs *//* Tomorrow Comment */.hljs-comment,.hljs-title{color:#969896;}/* Tomorrow Red */.hljs-variable,.hljs-attribute,.hljs-tag,.hljs-regexp,.ruby .hljs-constant,.xml .hljs-tag .hljs-title,.xml .hljs-pi,.xml .hljs-doctype,.html .hljs-doctype,.css .hljs-id,.css .hljs-class,.css .hljs-pseudo{color:#cc6666;}/* Tomorrow Orange */.hljs-number,.hljs-preprocessor,.hljs-pragma,.hljs-built_in,.hljs-literal,.hljs-params,.hljs-constant{color:#de935f;}/* Tomorrow Yellow */.ruby .hljs-class .hljs-title,.css .hljs-rules .hljs-attribute{color:#f0c674;}/* Tomorrow Green */.hljs-string,.hljs-value,.hljs-inheritance,.hljs-header,.ruby .hljs-symbol,.xml .hljs-cdata{color:#b5bd68;}/* Tomorrow Aqua */.css .hljs-hexcolor{color:#8abeb7;}/* Tomorrow Blue */.hljs-function,.python .hljs-decorator,.python .hljs-title,.ruby .hljs-function .hljs-title,.ruby .hljs-title .hljs-keyword,.perl .hljs-sub,.javascript .hljs-title,.coffeescript .hljs-title{color:#81a2be;}/* Tomorrow Purple */.hljs-keyword,.javascript .hljs-function{color:#b294bb;}.hljs{display:block;background:#1d1f21;color:#c5c8c6;padding:0.5em;}.coffeescript .javascript,.javascript .xml,.tex .hljs-formula,.xml .javascript,.xml .vbscript,.xml .css,.xml .hljs-cdata{opacity:0.5;}

    </style>
  </head>

<body>

  <div ng-controller="TextController">
    <div class="form">

      <div>

        <label>Title:</label>

        <div><input ng-model="article.title" /></div>
      </div>

      <div>

        <label>Content:</label>

        <div><textarea ng-model="article.content"></textarea></div>

      </div>

    </div>

    <article class="article">

      <header><h1>{{article.title}}</h1></header>

      <section ng-bind-html-unsafe="article.content | markdown"></section>

    </article>

  </div>

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>

<script src="//cdnjs.cloudflare.com/ajax/libs/marked/0.3.1/marked.min.js"></script>

<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.0/highlight.min.js"></script>

<script type="text/javascript">

var renderer = new marked.Renderer();

renderer.code = function(code, language) { return '<pre class="hljs"><code class="language-'+language+'">'+ hljs.highlight(language, code).value + '</code></pre>'; };

marked.setOptions({renderer: renderer});

var myAppModule = angular.module('myApp', []);

myAppModule.filter('markdown', function(){ return function(input) { return marked(input); } });

myAppModule.controller('TextController', function($scope){ $scope.someText = 'You have started your journey.'; });

</script>

</body>

</html>


3 WMD (wmd-editor)是一个简单轻量级的HTML编辑器,使用的是 Markdown 文本格式数据,适合用来做博客评论、发帖和一些基本的内容发布系统,支持流行的各种浏览器。

http://www.oschina.net/p/wmd/

© 著作权归作者所有

lilugirl
粉丝 97
博文 447
码字总数 128589
作品 0
杨浦
程序员
私信 提问
hainuo/markdownforchanzhi

本项目主要是用于将kindeditor编辑器更换为markdown编辑器,自2016年4月3日起使用hook方式对markdown内容进行扩展显示。以后变动会支持 2016-04-06 修复移动版回帖小bug 支持移动版 2016-04-...

hainuo
2016/04/03
0
0
VNote:一个更懂程序员和 Markdown 的笔记软件

VNote 是一款跨平台的开源 Markdown 笔记软件(项目地址 )。不像其他多数宣称跨平台的软件,VNote 将 Linux 和 Windows 都作为主要支持平台,在 Linux 上提供非常优秀的体验。VNote 的目标是...

06/02
0
0
VNote:一款值得尝试的 Markdown 笔记软件

VNote 是一款跨平台的开源 Markdown 笔记软件(项目地址 )。不像其他多数宣称跨平台的软件,VNote 将 Linux 和 Windows 都作为主要支持平台,在 Linux 上提供非常优秀的体验。VNote 的目标是...

作者: Tamlok
06/01
0
0
VNote:一个更懂程序员和 Markdown 的笔记软件

VNote 是一款跨平台的开源 Markdown 笔记软件(项目地址 )。不像其他多数宣称跨平台的软件,VNote 将 Linux 和 Windows 都作为主要支持平台,在 Linux 上提供非常优秀的体验。VNote 的目标是...

tamlok
06/04
1K
3
浏览器端 Markdown 编辑器 Vditor 宣布开源

下一代的 Markdown 编辑器,为未来而构建 简介 Vditor 是一款浏览器端的 Markdown 编辑器,使用 TypeScript 实现。 背景 我们在开发 Sym 的初期是直接使用 WYSIWYG 富文本编辑器的。那时候基...

88250
02/12
3.7K
11

没有更多内容

加载失败,请刷新页面

加载更多

springboot2.0 maven打包分离lib,resources

springboot将工程打包成jar包后,会出现获取classpath下的文件出现测试环境正常而生产环境文件找不到的问题,这是因为 1、在调试过程中,文件是真实存在于磁盘的某个目录。此时通过获取文件路...

陈俊凯
今天
6
0
BootStrap

一、BootStrap 简洁、直观、强悍的前端开发框架,让web开发更加迅速、简单 中文镜像网站:http://www.bootcss.com 用于开发响应式布局、移动设备优先的WEB项目 1、使用boot 创建文件夹,在文...

wytao1995
今天
10
0
小知识:讲述Linux命令别名与资源文件的区别

别名 别名是命令的快捷方式。为那些需要经常执行,但需要很长时间输入的长命令创建快捷方式很有用。语法是: alias ppp='ping www.baidu.com' 它们并不总是用来缩短长命令。重要的是,你将它...

老孟的Linux私房菜
今天
8
0
《JAVA核心知识》学习笔记(6. Spring 原理)-5

它是一个全面的、企业应用开发一站式的解决方案,贯穿表现层、业务层、持久层。但是 Spring 仍然可以和其他的框架无缝整合。 6.1.1. Spring 特点 6.1.1.1. 轻量级 6.1.1.2. 控制反转 6.1.1....

Shingfi
今天
8
0
Excel导入数据库数据+Excel导入网页数据【实时追踪】

1.Excel导入数据库数据:数据选项卡------>导入数据 2.Excel导入网页数据【实时追踪】:

东方墨天
今天
11
1

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部