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

lilugirl

发布于 2019-05-26 20:21:11

5370

发布于 2019-05-26 20:21:11

文章被收录于专栏：前端导学

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

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/

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

http