【markdown】使用 js 实现自己得markdown 网页编辑器

最新推荐文章于 2024-04-07 09:45:59 发布
最新推荐文章于 2024-04-07 09:45:59 发布
阅读量233 收藏
点赞数
文章标签： markdown
原文链接：http://www.cnblogs.com/richerdyoung/p/7645375.html
版权

首先从这里下载其浏览器版：

https://github.com/evilstreak/markdown-js/releases

解压缩后在其js文件同目录下新建一个网页进行测试，代码如下：

 

<!DOCTYPE html>
<html>
  <body>
    <textarea id="text-input" oninput="this.editor.update()"
              rows="6" cols="60">Type **Markdown** here.</textarea>
    <div id="preview"> </div>
    <script src="markdown.js"></script>
    <script>
      function Editor(input, preview) {
        this.update = function () {
          preview.innerHTML = markdown.toHTML(input.value);
        };
        input.editor = this;
        this.update();
      }
      var $ = function (id) { return document.getElementById(id); };
      new Editor($("text-input"), $("preview"));
    </script>
  </body>
</html>

这样就轻松的实现了实时解析转换：

转换后得到的只是最基础的HTML，可以用CSS美化一下，随手将Bootstarp的CSS引用过来看看：

 

<!DOCTYPE html>
<html>
<head>
<link href="http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
</head>
  <body style="padding:30px">
    <textarea id="text-input" oninput="this.editor.update()"
              rows="6" cols="60">Type **Markdown** here.</textarea>
    <div id="preview"> </div>
    <script src="markdown.js"></script>
    <script>
      function Editor(input, preview) {
        this.update = function () {
          preview.innerHTML = markdown.toHTML(input.value);
        };
        input.editor = this;
        this.update();
      }
      var $ = function (id) { return document.getElementById(id); };
      new Editor($("text-input"), $("preview"));
    </script>
  </body>
</html>

 效果如下： 

 

 在线体验地址：  http://www.richerdyoung.cn/markdown/

 

 

markdown 基于语法： http://www.cnblogs.com/richerdyoung/p/7084055.html

 

转载于:https://www.cnblogs.com/richerdyoung/p/7645375.html

dianqiangjin0204
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js：Markdown编辑器Vue3版本md-editor-v3
彭世瑜的博客
08-08 907
【代码】js：Markdown编辑器Vue3版本md-editor-v3。
js插件markdown文档解决方案
weixin_41078100的博客
11-07 3473
当今图文混排是一个技术难点如果是程序员可以用html书写或者word文档但是我们能不能实现我们在网页端实现书写图文混排和展示图文混排。 为什么不适用word文档插件，其实作者也使用过不过出现了一些作者无法解决的问题，比如word文档转换html或者html转换word后会出现格式不对的现象，这使得作者很困扰。再者我们需要在网页端书写漂亮的文档，并且把数据保存到数据库，以便于后面的展示以及修改删除操...
推荐一款强大的Markdown编辑器：Vue-Bl-Markdown-Editor
最新发布
gitblog_00077的博客
04-07 395
推荐一款强大的Markdown编辑器：Vue-Bl-Markdown-Editor 项目地址:https://gitcode.com/blowsnowit/vue-bl-markdown-editor 项目简介 Vue-Bl-Markdown-Editor 是一个基于 Vue.js 的开源Markdown编辑器组件。它提供了丰富的功能，包括实时预览、代码高亮、图片上传等，旨在为开发者提供一种简洁高...
手把手带你10分钟手撸一个简易的Markdown编辑器
热门推荐
零一的博客
06-01 2万+
前言 最近我在项目中需要实现一个 markdown编辑器 的需求，并且是以React框架为开发基础的，类似掘金这样的： 我的第一想法肯定是能用优秀的开源就一定用开源的，毕竟不能老是重复造轮子。于是我在我的前端群里问了很多群友，他们都给了甩过来一堆开源的markdown编辑器项目，但我一看全是基于Vue使用的，不符合我的预期，逛了一下github，也没看到我满意的项目，所以就想自己实现一个啦 需要实现的功能 我们自己实现的话，看看需要支持哪些功能，因为做一个初版的简易编辑器，所以功能实现得不会太多，但绝对
html js 实现markdown编辑器效果
huaweichenai的博客
10-22 1560
markdown的Editor.md插件官方网站：https://pandao.github.io/editor.md/ 一：下载Editor.md 1：进入官网直接进行下载 github下载地址：https://github.com/pandao/editor.md 2：使用npm进行下载 npm install editor.md 下载下来的文件结构如下： 二：Editor...
html+js 实现markdown编辑器效果
12-14
markdown的Editor.md插件官方网站：https://pandao.github.io/editor.md/ 一：下载Editor.md 1：进入官网直接进行下载 github下载地址：https://github.com/pandao/editor.md 2：使用npm进行下载 npm install ...
利用Vue实现一个markdown编辑器实例代码
10-16
在本文中，我们将探讨如何使用Vue.js构建一个Markdown编辑器。Vue.js是一个流行的JavaScript框架，用于构建用户界面。Markdown是一种轻量级的标记语言，用于格式化文本，使其看起来更美观且易于阅读。通过Vue.js，...
SpringBoot使用Editor.md构建Markdown富文本编辑器示例
08-27
通过配置 Editor.md，可以实现在 Spring Boot应用程序中使用 Markdown 编辑器。 知识点一：Markdown 的基本概念 Markdown是一种可以使用普通文本编辑器编写的标记语言，通过简单的标记语法，它可以使普通文本内容...
基于bootstrap的Markdown网页文本编辑器插件
09-01
基于bootstrap的Markdown网页文本编辑器插件
SimpleMDE一个Vuejs的Markdown编辑器组件
08-07
SimpleMDE - 一个Vue.js的Markdown编辑器组件
我熬夜开发了一款简约实用、支持多平台的Markdown在线编辑器（开源）
主要领域：前端开发
03-07 4494
前言 之前，一直想开发一款属于自己的Markdown编辑器，主要是自己平常写文章可以更加灵活操作，另外扩宽自己的视野也是非常不错的选择啊！所以在周末就决定玩耍一番。首先我调研了很多线上热门的md编辑器，都很优秀。不为超过他们，主要自己用着舒服点。这篇文章主要是记录下我是如何从0到1是完成一款还算拿得出手的Markdown编辑器。 完成项目一览 调研Markdown编辑器 国内、国外关于Markdown编辑器有很多。 editor.md 网址：https://pandao.github.io/editor
js解析MarkDown语法
coder1998的博客
05-27 4046
js解析MarkDown语法 问题描述: 我们使用MarkDown编辑器之后，比如我们写的MarkDown的语法的语法 ### 一级标题 #### 二级标题 ##### 三级标题 这种语法我们最终要转换成HTML的格式最终要存入数据库(比如说存入MySql Oracle SqlServer Redis 等 都可以) 那问题来了，我们怎么转换语法呢? 解决问题方案: 我们要转换MarkDown语法，其中官方早就提高好了 转换的js代码，通过marked.js 该文件下载地址: 方式一: 官网可以下载 htt
Vue.js项目：制作一个Markdown格式的笔记本(上)
shiny_sai的博客
04-09 1782
Markdown笔记本 1. 制作一个基本的笔记编辑器 1.1 项目准备 index.html 文件：笔记本的整体框架 script.js 文件：添加一些js 代码 继续在script.js文件中添加一个名为content 的数据属性 准备好以上文件，接下来开始创建第一个实际的Vue应用。 1.2 添加笔记编辑器 使用一个简单的textarea 元素和上次提到的v-model 指令，在textarea 中添加一个v-model 指令，并绑定到content 属性上： Code： 添加
Hexo 中使用 JS 扩展 Markdown 语法
weixin_52268321的博客
07-10 348
用 JS 扩展了 Markdown 语法，通过更简单的方式实现图片的放大缩小 + 水平居中
「Javascript」解析markdown为html——标题篇
cumtLeibnizDavid的博客
03-20 652
在 markodwn 解析中，标题是最简单的格式之一。简单到只需要将 “#” 符号去掉，换之 html 的标题标签即可。
js插件---markdown如何使用
weixin_34221036的博客
08-25 1019
js插件---markdown如何使用 一、总结 一句话总结：看文档，看api，看参数列表，看js调用插件的调用函数的参数（json） 1、js和css的问题：如何知道插件要引入哪些js和css？ a、下载里面有demo，照着demo用，就知道要引哪些js和css b、手册里面会直接告诉你 2、参数问题：如何使用插件的函数参数列表？ a、直接用属性的方式调用：d...
利用marked.js写个简单Markdown编辑器(1)
GISXX
05-29 1万+
Markdown的语法简洁明了、学习容易，而且功能比纯文本更强，因此有很多人用它写博客。 最近想自己动手写一个博客系统，然后查了下博客系统一般构造，发现目前大部分博客把Markdown作为博客的标配了。网上有很多markdown的解析插件，我一开始用的事markdown-js.js，但这个插件实在太坑了，代码块和表格都不能很好的处理；然后又用了strapdown.js，只能说这个插件太好了，它会给
用js实现Markdown 编辑器
05-30
好的，我可以给你提供一些用 JavaScript 实现 Markdown 编辑器的指导。 首先，你需要在 HTML 中创建一个文本输入框和一个预览框。你可以使用 `<textarea>` 标签来创建文本输入框，使用 `<div>` 标签来创建预览框。示例代码如下： ```html <textarea id="markdown-input"></textarea> <div id="markdown-preview"></div> ``` 接着，你需要使用 JavaScript 来实现 Markdown 编辑器的功能。具体来说，你需要编写以下几个函数： 1. `updatePreview()`: 这个函数用于将输入的 Markdown 文本转换成 HTML，并显示在预览框中。你可以使用开源的 Markdown 库 [marked.js](https://marked.js.org/) 来实现这个功能。示例代码如下： ```javascript function updatePreview() { const markdownInput = document.getElementById('markdown-input').value; const markdownPreview = document.getElementById('markdown-preview'); markdownPreview.innerHTML = marked(markdownInput); } ``` 2. `saveMarkdown()`: 这个函数用于将输入的 Markdown 文本保存到本地。你可以使用浏览器提供的 `localStorage` API 来实现这个功能。示例代码如下： ```javascript function saveMarkdown() { const markdownInput = document.getElementById('markdown-input').value; localStorage.setItem('markdown', markdownInput); } ``` 3. `loadMarkdown()`: 这个函数用于从本地加载已保存的 Markdown 文本，并显示在输入框中。示例代码如下： ```javascript function loadMarkdown() { const markdownInput = document.getElementById('markdown-input'); markdownInput.value = localStorage.getItem('markdown') || ''; updatePreview(); } ``` 最后，你需要在页面加载完成时调用 `loadMarkdown()` 函数，以加载已保存的 Markdown 文本。示例代码如下： ```javascript window.addEventListener('load', loadMarkdown); ``` 希望以上指导对你有所帮助，祝你编写 Markdown 编辑器顺利！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值