怎麼在自己的網頁上使用MarkDown編輯器呢?

01-14

怎麼在自己的網頁上使用MarkDown編輯器呢?
我也想實現類似 github編輯器的功能

我見過的最喪心病狂的 markdown 編輯器控制項，是帶實時預覽的

有兩個，一個是 @Abner Lee 他 typora 里的，然而不開源，你也用不了……這東西怎麼說呢，寫簡報比 WORD 好用……

一個是 @Lyu Lyon 的 HyperMD，是做成 CodeMirror 插件的形式，用法直接去翻他 github repo 就行了

Releases · evilstreak/markdown-js · GitHubMarkdown-js嵌入網頁

這篇文章介紹的很詳細

實現網頁客戶端實時自動解析Markdown為HTML內容

試一試這款Chrome插件 Markdown Here，寫email，或者在論壇寫回復的時候都可以使用。

simplemde (JavaScript Markdown Editor - SimpleMDE)

首先你需要這個：chjj/marked 。然後：

import marked from "marked" import React, { Component } from "react"


class MarkdownEditor extends Component {

  constructor() {

    this.state = { renderedContent: "" }

  }
  handleContentChange (event) {

    this.setState({

      renderedContent: marked(event.target.value)

    })

  }
  render () {

    &

      &<br />
      &</p>
<div
        className="markdown-rendered-content"
        dangerouslySetInnerHTML={{ __html: this.state.renderedContent }} /&><br />
    &</div&>
  }<br />
}<br />
</code></pre>
<p><P>自帶實時預覽功能。隨手敲沒跑過，不知道有沒有 bug，但是大概那麼個意思。</P><P>這是直接用 `textarea`，輸入內容是純文本，體驗不是很好。可以結合 contentEditable 來做，不是那就挺複雜了，涉及到前端開發神坑——富文本編輯器。當然我是不會跳這個坑的。</P></P></p>
<p><center> <script src="/336-4.js"></script></center></p>
<hr /><P>推薦Editor.md - 開源在線 Markdown 編輯器可以配置功能</P>其他：10個免費的在線Markdown編輯器-控制項新聞-慧都控制項網</P></p>
<hr /><P>Editor.md - 開源在線 Markdown 編輯器</P></P></p>
<p><center> <script src="/336-5.js"></script></center></p>
<hr />依稀記得vuejs的example就有個這種東西(如果沒理解錯意思)</P></p>
<hr />擦</P></p>
<hr />#我也有同樣的疑問？</P></p>
<hr /><P><i>不回答不舒服了。</i></P></p>
<h2>本地編輯器</h2>
<ul>
<li>MarkdownPad2</li>
<li>sublimetext3</li>
</ul>
<p><P>個人更建議使用MarkdownPad2，兼容性更好一點。</P></p>
<h2>在線編輯器</h2>
<ul>
<li>太多了</li>
<li>不說了</li>
<li>建議用簡書，依然是兼容性好一點</li>
</ul>
<p><P><b>支持格式少的，兼容性都更好一點，別為了追求酷炫而導致兼容性不好，最後分享就會發現悲催了。</b></P></P></p>
<hr /><span style="color:red"><i class="fa fa-paper-plane"></i></span>  推薦閱讀：</div>
<p>※<a target=_blank href=/p20180112620187787/>Sublime Text 2 與 TextMate 2 相比有哪些優缺點？</a><br />※<a target=_blank href=/p20180108122687886/>notepad++里的++用英文怎麼發音？</a><br />※<a target=_blank href=/p20180108120058951/>我的文件a.txt，裡面有1萬多行，我想用批處理，每1000行就分別形成一個文本文件並保存到當前文件夾，文件名可為數字序號1.txt,2.txt,3.txt.....該怎麼做？</a><br />※<a target=_blank href=/p20180106719950363/>UltraEdit 是PHP 的主流工具嗎？現在職業PHP 程序員通常用什麼編程工具？</a><br />※<a target=_blank href=/p20180106740139763/>程序員喜歡從0開始計數，那為什麼程序的行號都是從1開始？</a></p>
<p>TAG:<a target=_blank href=/tag/文本編輯器/>文本編輯器</a> | <a target=_blank href=/tag/Markdown/>Markdown</a> | <a target=_blank href=/tag/Web編輯器/>Web編輯器</a> | <a target=_blank href=/tag/HTML編輯器/>HTML編輯器</a> | </p>
<!-- AddThis Advanced Settings above via filter on the_content --><!-- AddThis Advanced Settings below via filter on the_content --><!-- AddThis Advanced Settings generic via filter on the_content --><!-- AddThis Share Buttons above via filter on the_content --><!-- AddThis Share Buttons below via filter on the_content --><div class="at-below-post addthis_tool" data-url="https://www.getit01.com/p20180114224368769/"></div><!-- AddThis Share Buttons generic via filter on the_content --></div>
<script src="/ce.js"></script>

				               	<div class="clear"></div>
                
       
 
                             </div>
		</div>
    						
    	

    
    	<div class="clear"></div>
	
	</div>
</div>
<div class="clear"></div>
<div id="footer">
      <div class="copyright">
  <p> 一點新知 <a href="https://www.getit01.com/"><strong>
    GetIt01    </strong></a>
<div style="display:none"><script src="https://s13.cnzz.com/z_stat.php?id=1270562218&web_id=1270562218" language="JavaScript"></script></div>
<br />    
  </p>
  
  </div>
</div>
</div>
<!--gototop-->
<div id="tbox">
    <a target="_blank" id="fb" href="https://www.facebook.com/sharer.php?u=https://www.getit01.com/p20180114224368769/"></a>
     </div>
<script data-cfasync="false" type="text/javascript">if (window.addthis_product === undefined) { window.addthis_product = "wpp"; } if (window.wp_product_version === undefined) { window.wp_product_version = "wpp-6.1.1"; } if (window.wp_blog_version === undefined) { window.wp_blog_version = "4.8.22"; } if (window.addthis_share === undefined) { window.addthis_share = {}; } if (window.addthis_config === undefined) { window.addthis_config = {"data_track_clickback":true,"ignore_server_config":true,"ui_atversion":"300"}; } if (window.addthis_layers === undefined) { window.addthis_layers = {}; } if (window.addthis_layers_tools === undefined) { window.addthis_layers_tools = [{"share":{"counts":"each","numPreferredServices":5,"mobile":false,"position":"left","theme":"transparent"},"sharedock":{"counts":"each","numPreferredServices":5,"mobileButtonSize":"large","position":"bottom","theme":"transparent"}},{"sharetoolbox":{"numPreferredServices":5,"counts":"each","size":"32px","style":"fixed","shareCountThreshold":0,"elements":".addthis_inline_share_toolbox_vh9e,.at-above-post"}}]; } else { window.addthis_layers_tools.push({"share":{"counts":"each","numPreferredServices":5,"mobile":false,"position":"left","theme":"transparent"},"sharedock":{"counts":"each","numPreferredServices":5,"mobileButtonSize":"large","position":"bottom","theme":"transparent"}}); window.addthis_layers_tools.push({"sharetoolbox":{"numPreferredServices":5,"counts":"each","size":"32px","style":"fixed","shareCountThreshold":0,"elements":".addthis_inline_share_toolbox_vh9e,.at-above-post"}});  } if (window.addthis_plugin_info === undefined) { window.addthis_plugin_info = {"info_status":"enabled","cms_name":"WordPress","plugin_name":"Share Buttons by AddThis","plugin_version":"6.1.1","plugin_mode":"WordPress","anonymous_profile_id":"wp-465109ee2f0e70a26b602727e258dac0","page_info":{"template":"posts","post_type":""},"sharing_enabled_on_post_via_metabox":false}; } 
                    (function() {
                      var first_load_interval_id = setInterval(function () {
                        if (typeof window.addthis !== 'undefined') {
                          window.clearInterval(first_load_interval_id);
                          if (typeof window.addthis_layers !== 'undefined' && Object.getOwnPropertyNames(window.addthis_layers).length > 0) {
                            window.addthis.layers(window.addthis_layers);
                          }
                          if (Array.isArray(window.addthis_layers_tools)) {
                            for (i = 0; i < window.addthis_layers_tools.length; i++) {
                              window.addthis.layers(window.addthis_layers_tools[i]);
                            }
                          }
                        }
                     },1000)
                    }());
                </script><script type='text/javascript' src='https://s7.addthis.com/js/300/addthis_widget.js?ver=4.8.22#pubid=wp-465109ee2f0e70a26b602727e258dac0'></script>
<script type='text/javascript' src='https://www.getit01.com/wp-content/themes/Qu/js/loostrive.js?ver=1.0'></script>
<script type='text/javascript' src='https://www.getit01.com/wp-includes/js/wp-embed.min.js?ver=4.8.22'></script>


</body></html>
<!-- Dynamic page generated in 0.098 seconds. -->
<!-- Cached page generated by WP-Super-Cache on 2024-07-06 18:24:07 -->

<!-- super cache -->