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

最新推荐文章于 2025-07-04 09:42:55 发布

我叫吴桂鑫

最新推荐文章于 2025-07-04 09:42:55 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： bootstrap

本文链接：https://blog.youkuaiyun.com/baidu_36583119/article/details/78956991

本文介绍了如何构建一个网页版的Markdown实时编辑器，包括利用oninput事件监听用户输入、selection对象处理选中区域，以及JavaScript相关技巧如字符串截取、光标位置插入文字和div的拖拽效果。同时提到了多个教程链接，帮助读者实现类似功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

(1)自己写一个网页版的Markdown实时编辑：器http://blog.youkuaiyun.com/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.youkuaiyun.com/gisredevelopment/article/details/29255147
(5)纯前端打造一个简易实时预览的markdown编辑器：https://www.jianshu.com/p/d0eed194db65
(6)div实现拖拽效果，宽度发生变化：http://blog.youkuaiyun.com/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;