自己写一个网页版的Markdown实时编辑

最新推荐文章于 2024-07-08 10:09:25 发布
最新推荐文章于 2024-07-08 10:09:25 发布
阅读量1.1k 收藏 2
点赞数
分类专栏： bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/baidu_36583119/article/details/78956991
版权
本文介绍了如何构建一个网页版的Markdown实时编辑器，包括利用oninput事件监听用户输入、selection对象处理选中区域，以及JavaScript相关技巧如字符串截取、光标位置插入文字和div的拖拽效果。同时提到了多个教程链接，帮助读者实现类似功能。
摘要由CSDN通过智能技术生成

(1)自己写一个网页版的Markdown实时编辑：器http://blog.csdn.net/Marksinoberg/article/details/51648929
(2)js字符串截取函数slice()、substring()、substr():https://www.cnblogs.com/lmsblogs/p/5876384.html
(3)markdown语法说明：http://markdown.tw/#list
(4)javascript控制在光标位置插入文字:http://blog.csdn.net/gisredevelopment/article/details/29255147
(5)纯前端打造一个简易实时预览的markdown编辑器：https://www.jianshu.com/p/d0eed194db65
(6)div实现拖拽效果，宽度发生变化：http://blog.csdn.net/bei_fang_du_lang/article/details/50707484
(7)editor.md实现Markdown编辑器：http://www.cnblogs.com/Leo_wl/p/5763491.html
(8)JavaScript标准Selection操作：http://www.cnblogs.com/rainman/archive/2011/02/27/1966482.html

oninput 事件

当用户向 中尝试输入时执行 JavaScript：

<input type="text" oninput="myFunction()">
selection

selection是对当前激活选中区（即高亮文本）进行操作。
selectionStart
输入性元素selection起点的位置，可读写。
selectionEnd
输入性元素selection结束点的位置，可读写。

我自己写的Markdown实时编辑

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="js/jquery.min.js"></script>
<link href='./images/bbs.ico' rel='icon' type='image/x-icon' />
<link rel="stylesheet" href="css/bootstrap.css">
<script src="js/bootstrap.min.js"></script>
<style>
.row{
   margin:0;
}
.myform{
   padding:0;
}
.myhead{
   float:left;
   line-height:4em; /* 设置行高 */
}
input:focus{
   outline:none; /* 去除Bootstrap输入框聚焦时的边框轮廓 */
}
.mytitle{
   width:100%;
   font-size:3em; 
   font-weight:2em;
   border:0;
}
.mybtn{ 
   width:100%;
   line-height:2em;
}
.mytool{
   background-color:lightgray;
   border:0;
}
.btn-group{
   padding-top:1em;
   padding-bottom:1em;
   padding-left:2em;
}
.btn-group button{
    background-color:lightgray;
    border:0.1em solid white;
} 
.mycontent div{
    float:left;
    padding:0;
}
.preview{
   position:absolute; 
   overflow:auto;
   height:576px;
   background-color:lightyellow;
}
最低0.47元/天 解锁文章
我叫吴桂鑫
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html展示markdown文件,在前端页面展示Markdown文件
weixin_30884743的博客
06-26 6494
常我们都会在GitHub上浏览很多的readme文件，这些都是Markdown语法写成的Markdown文件，HTML中并没有用于展示Markdown文件的元素，那么为什么可以在前端展示呢？有别于GitHub官方给提供的API(有访问频率限制)，我使用了一个npm 模块。这个模块可以非常方便的将Markdown语法的字符串直接转化为HTML 代码字符串。然后我们让某个div元素的innerHTML...
自己写一个网页版的Markdown实时编辑器
weixin_34082789的博客
06-12 390
这几天忙着使用Python+Django+sqlite 搭建自己的博客系统，但是单纯的使用H5的TextArea，简直太挫了有木有。所以，就想模仿一下人家内嵌到网页上的Markdown编辑器，从而让自己的博客系统更加美观一点。 准备 需要什么 Markdown“解释器”：便于处理文本输入以及实时预览 Bootstrap模板 ...
制作在线Markdown文档转Html以及Pdf工具
最新发布
AsterCass的博客
07-08 514
最近整理的文档比较多，手写的话比较习惯markdown，但由于其中一大部分需要提供给对接方，所以转换成Html以及Pdf就是需要处理的部分了。这种流程在线工具比较多，但是一来很多有次数限制（有一说一，对于涉及服务端资源的有次数限制很正常，但是很多这种纯Web端的任务流有次数限制我不理解），二来以备不时之需，我们可以需要搭一个简易的转换平台。如果文档转换量不大，可以参考使用。当然可以也使用一些markdonwn的客户端编辑器，很多都带有这个功能，比如Obisian等。
markdown网页版编辑器
H405282968的博客
04-15 253
http://jbt.github.io/markdown-editor 转载于:https://www.cnblogs.com/westward/p/6713966.html
网页MarkDown
A9541170的博客
03-16 330
Title <link rel="stylesheet" href="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.css"> <script src="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.js"></s...
【markdown】使用 js 实现自己得markdown 网页编辑器
dianqiangjin0204的博客
10-10 249
首先从这里下载其浏览器版： https://github.com/evilstreak/markdown-js/releases 解压缩后在其js文件同目录下新建一个网页进行测试，代码如下： <!DOCTYPE html> <html> <body> <textarea id="text-input" o...
markdown-editor：一个在线的markdown编辑器
02-04
欢迎来到降价编辑器一个简易版的markdown编辑器 :house: :sparkles: （可能没有及时更新） :sparkles: -github（可能资源加载缓慢）安装npm install用法npm rum servenpm run build作者 :bust_in_silhouette:追月 ：...
jQuery实现Markdown编辑器插件
06-24
通过以上步骤，我们可以创建出一个功能完备、易于使用的jQuery Markdown编辑器插件。对于开发者来说，它可以极大地提升工作效率，为用户提供一个直观的编辑环境，同时也降低了前后端交互的复杂性。在实际项目中，...
Markdown在线编辑器-HTML网页源代码
05-19
这是一个Markdown在线编辑器-使用HTML网页制作而成，以下还有↓ 创建一个HTTP服务，用PC浏览器打开即可浏览使用， 此项目用到jquery,bootstrap，可以打开和保存文本文件，生成文档图片， 源代码供学习参考，配套的...
基于bootstrap的Markdown网页文本编辑器插件
09-01
Bootstrap Markdown网页文本编辑器插件是一种用于Web应用的交互式编辑工具，它允许用户使用Markdown语法来编写文本，同时提供了一个美观、响应式的用户界面，该界面基于流行的前端框架Bootstrap。Bootstrap是一个...
notedown:一个漂亮的离线Markdown离线编辑器
05-12
在标题提到的"notedown"是一个离线Markdown编辑器，它专为那些希望在没有互联网连接的情况下也能高效创作和编辑Markdown文档的用户设计。这个编辑器具有美观的界面，使得写作体验更加愉快。 在描述中，"网络的离线...
docsify - 生成文档网站简单使用教程
weixin_33874713的博客
12-31 3165
1. docsify介绍 docsify 是一个动态生成文档网站的工具。不同于 GitBook、Hexo 的地方是它不会生成将 .md 转成 .html 文件，所有转换工作都是在运行时进行。 这将非常实用，如果只是需要快速的搭建一个小型的文档网站，或者不想因为生成的一堆 .html 文件“污染” commit 记录，只需要创建一个 ind...
Markdown发布静态网页
midae的博客
04-10 949
对于展示型网站，例如官网这种场景，会有很多小的页面，运营会根据市场时刻有增删修改类似页面的需求，如果每次都响应运营的需求，不断地迭代增删页面，这个工作是很难终结的，运营不能及时看到页面，而开发会深陷在重复繁杂的工作中。市面上供用户使用，能生成 html 的编辑器多为富文本编辑器，富文本编辑器优点是样式可以自由定制，但在我们的官网场景中，样式的不可控反而成了其缺点，我们不可能让官网的展示凭用户喜好随意改动。把页面的控制权交给运营，解放其他人员，是这个方案最大的出发点。还有其他可以考虑，比如。
【Markdown】用 Markdown 代码写出好看的页面
淡看江湖路
04-15 4799
作为一个学习计算机相关知识的人，如果不经常写博客，就容易把刚学到的知识忘记，写博客是一个很好的学习习惯，而写好博客也就是要学会熟练使用Markdown，这样可以很好地使我们的博客页面变得更加美观，这篇文章介绍的就是一些使用的Markdown使用技巧。
基于HTML5开发的Markdown在线编辑器
疯狂屌丝程序员
05-23 561
Markdown是一种轻量级标记语言，以其简洁易读的格式而备受程序员和作者们的青睐。随着互联网的发展，越来越多的在线Markdown编辑器应运而生，为用户提供了更加便捷、高效的写作和编辑环境。本文将探讨基于HTML5开发的Markdown在线编辑器的设计原理、功能特点以及技术优势。
Markdown快速入门
battledao的博客
01-11 8658
前言 ❤️ 不积跬步，无以至千里；不积小流，无以成江海 ❤️
markdown编写_用Markdown编写Web内容
cune1359的博客
07-01 396
除非您真的精通HTML ，否则直接使用HTML编写文章是不理想的。 首先，您必须使用标签正确包装内容以对其进行格式设置，其次，您必须从代码编辑器到浏览器来回查看外观。 如果您是经常写Web的作家，那么我认为使用Markdown进行写作更好。 Markdown允许您以纯文本形式编写内容，以后可以将其转换为有效HTML格式，并且借助工具，您可以立即看到输出。 此外，新发布平台采用Markd...
Vue项目--页面显示markdown文本内容插件
qq_59181609的博客
04-25 1108
安装：npm install markdown-it --save // 引入 var MarkdownIt = require('markdown-it'), // 实例化 const md = new MarkdownIt() // 将 markdown 文本格式内容转化成 HTML 标签结构内容 var result = md.render('富文本框格式的内容'); 通过 v-html 插件 将 markdown 转化的 HTML标签内容渲染到对应页面位置 <div v-html.
HTML MarkDown编辑器实现
小半的博客
12-20 3434
HTML MarkDown编辑器实现 先看效果 我们可以看到只需要在左边绿色区域输入，右边蓝色区域就会实时输入内容。 这样一个简单的MarkDown就实现了 代码也很简单： 使用到的js markdown.js https://cdn.bootcss.com/markdown.js/0.6.0-beta1/markdown.min.js 使用到的css,主要是为了样式好看一点 boo...
用c++写一个markdown解析器
08-03
### 回答1： 好的。以下是用 C 语言编写的简单 Markdown 解析器的示例代码： ```c #include <stdio.h> #include <string.h> #define BUF_SIZE 1024 int main(int argc, char *argv[]) { char buf[BUF_SIZE]; while (fgets(buf, BUF_SIZE, stdin) != NULL) { int i = 0; while (buf[i] != '\0') { // 处理标题 if (buf[i] == '#') { // 输出 "<h1>" printf("<h1>"); i++; // 跳过 # 号后面的空格 while (buf[i] == ' ') i++; // 输出标题内容，直到遇到换行符 while (buf[i] != '\n' && buf[i] != '\0') putchar(buf[i++]); // 输出 "</h1>" printf("</h1>"); } // 处理加粗文本 else if (buf[i] == '*' && buf[i + 1] == '*') { // 输出 "<strong>" printf("<strong>"); i += 2; // 输出加粗文本内容，直到遇到两个连续的星号 while (buf[i] != '\0' && !(buf[i] == '*' && buf[i + 1] == '*')) putchar(buf[i++]); // 输出 "</strong>" printf("</strong>"); i += 2; } // 处理普通文本 else { putchar(buf[i++]); } } } return 0; } ``` 这个程序读入 Markdown 格式的文本，并输出对应的 HTML 格式的文本。它只处理了标题和加粗文本两种格式，其他的格式会被当作普通文本输出。 在这个程序中，我们使用了标准 C 库函数 `fgets` 来读入输入流中的一 ### 回答2： Markdown是一种轻量级标记语言，常用于撰写文档、编写博客或编辑readme文件。编写一个Markdown解析器的目的是将Markdown文本转换为HTML或其他格式的文档。可以使用C语言来编写一个简单的Markdown解析器。以下是一个例子： ```c #include <stdio.h> #include <stdlib.h> #include <string.h> typedef struct { char* input; char* output; } Markdown; void parseMarkdown(Markdown* md) { // 解析处理Markdown文本的代码 // ... // 将解析后的结果赋值给md->output } int main() { Markdown md; md.input = "这是*斜体*文字。"; parseMarkdown(&md); printf("%s\n", md.output); free(md.output); return 0; } ``` 在这个例子中，我们首先定义了一个Markdown结构体，包含`input`和`output`两个成员。`input`成员保存了待解析的Markdown文本，`output`成员保存解析后的结果。在`parseMarkdown`函数中可以编写相应的代码来处理Markdown文本，并将结果赋值给`md->output`。 在`main`函数中，我们创建了一个Markdown结构体md，并将待解析的Markdown文本传递给`parseMarkdown`函数进行解析。之后，我们可以输出解析后的结果。 当然，这个例子只是一个简化的版本，实际的Markdown解析器可能更加复杂。解析器需要处理各种Markdown的语法，例如标题、列表、表格等，并将其转换为相应的HTML或其他格式的文档。编写一个完整功能的Markdown解析器需要更多的代码和技术，但这个例子可以帮助你入门。 ### 回答3： Markdown是一种轻量级标记语言，通常用于写作文档和网页。C语言是一种高效而广泛使用的编程语言，所以使用C编写一个Markdown解析器是可行的。 Markdown解析器可以将Markdown语法转换为HTML或者其他格式。解析器的功能包括识别Markdown语法中的特殊符号和格式，并将其转换为相应的HTML标签或其他格式的文本。 编写Markdown解析器可以分为几个步骤： 1. 读取Markdown文件或文本； 2. 解析文本，识别Markdown语法中的特殊符号和格式； 3. 根据识别的语法，生成相应的HTML标签或其他格式的文本； 4. 输出转换后的HTML标签或其他格式的文本。 在C语言中，可以通过读取文件的方式获取Markdown文本，并使用字符串处理函数来解析和转换文本。可以使用条件语句和循环语句来检查和处理不同的Markdown语法。 对于较复杂的Markdown语法，可能需要使用正则表达式来进行匹配和替换。C语言中可以使用正则表达式库来处理正则表达式操作。 需要注意的是，在编写Markdown解析器时，需要仔细处理特殊字符、转移字符和嵌套标签等情况，以确保解析结果的正确性和一致性。 总之，通过使用C语言的字符串处理函数、条件语句、循环语句和正则表达式库，可以编写一个Markdown解析器，将Markdown语法转换为HTML或其他格式的文本。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值