您的位置：首页 > 其它

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

2018-01-02 23:34 274 查看

(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;
}
</style>
<script src="js/ajaxfileupload.js"></script>
<script type="text/javascript">
function ajaxFileUpload(){
var basepath=$("#BasePath").val();
//效验上传图片类型
var file=$("#myupload");
if(file.val().length<=0){
alert("请上传图片");
return false;
}else if(!/\.(gif|jpg|jpeg|png|GIF|JPG|PNG)$/.test(file.val())){
alert("图片类型必须是.gif,jpeg,jpg,png中的一种");
file.val("");
return false;
}
//效验成功调用异步上传函数
$.ajaxFileUpload({
url:'BBS/myUpload!upload.action', //发出请求
secureuri:false,//是否用安全提交，默认为false
fileElementId:'myupload',//file选择文件的框的id
dataType:'json',//数据返回格式，如果用json，需要修改ajaxfileupload.js中的内容 eval("data = " + data ); -->data = jQuery.parseJSON(jQuery(data).text());
success:function(data){
//jQuery.parseJSON()函数用于将格式完好的JSON字符串转为与之对应的JavaScript对象。
//获得json格式数据的值，并转换显示图片在页面上,data是一个jsonObject对象，path是它的一个键值对元素的键名
$("#viewImg").attr("src",basepath + data.path);
alert("上传成功！");
},
error:function(data){
alert("上传失败！");
}
});
}

function ajaxAddPost(){
var content=$("#content").val();
var brief=$("#brief").val();
if(brief.length<=0||content.length<=0){
alert("简介/文章不能为空！");
return false;
}
var postName=$("#title").val();
var bid=$("#bid").val();
var mydata={'brief':brief,'content':content,'postName':postName,'bid':bid};
$.ajax({
type:"POST",
url:'BBS/post!addPost.action',
data:mydata,
dataType:"json",
success:function(data){
alert(data.msg);
window.location.href='<%=request.getContextPath() %>'+"/post!loadPost.action?pid="+data.myPostId;
},
error:function(){
alert("网络异常超时！");
}
});
}
</script>
<title>写博客</title>
</head>
<body>
<div class="row clearfix">
<!-- <form class="col-md-12 column myform" action="" method="post">  -->

<!-- 标题栏 -->
<div class="row clearfix">
<div class="col-md-12 column myhead">
<div class="col-md-11 column"><input type="text" id="title" class="mytitle"  value="标题写在这里" /></div>
<div class="col-md-1 column"><button type="button" class="btn btn-primary btn-lg mybtn" href="#addPostDialog" data-toggle="modal">发表</button></div>
</div>
</div>

<!-- 工具栏 -->
<div class="row clearfix">
<div class="col-md-12 column mytool">
<div class="btn-group btn-group-sm">
<button class="btn btn-default" type="button" onclick="insertText('#')"><em class="glyphicon glyphicon-header"></em>标题</button>
<button class="btn btn-default" type="button" onclick="insertText('**')"><em class="glyphicon glyphicon-bold"></em>加粗</button>
<button class="btn btn-default" type="button" onclick="insertText('``')"><em class="glyphicon glyphicon-flag"></em>代码</button>
<button class="btn btn-default" type="button" onclick="insertText('   ')"><em class="glyphicon glyphicon-flag"></em>代码区块</button>
<button class="btn btn-default" type="button" onclick="insertText('1. ')"><em class="glyphicon glyphicon-th-list"></em>有序列表</button>
<button class="btn btn-default" type="button" onclick="insertText('+ ')"><em class="glyphicon glyphicon-list"></em>无序列表</button>
<button class="btn btn-default" type="button" href="#uploadImgDialog" data-toggle="modal"><em class="glyphicon glyphicon-picture"></em>图片</button>
<button class="btn btn-default" type="button" onclick="insertText('[]')"><em class="glyphicon glyphicon-link"></em>链接</button>
<button class="btn btn-default" type="button" onclick="insertText('*')"><em class="glyphicon glyphicon-italic"></em>斜体</button>
<button class="btn btn-default" type="button" onclick="insertText('---')"><em class="glyphicon glyphicon-leaf"></em>分割线</button>
<button class="btn btn-default" type="button" onclick="insertText('  ')"><em class="glyphicon glyphicon-star"></em>换行</button>
<button class="btn btn-default" type="button" onclick="insertText('#')"><em class="glyphicon glyphicon-arrow-left"></em>返回</button>
</div>
</div>
</div>

<!-- 内容-预览栏 -->
<div class="row  clearfix mycontent">
<!-- 内容 -->
<div class="col-md-6  column ">
<textarea rows="30" class="col-md-12" oninput="this.editor.update();" id="content" name="content"></textarea>
</div>
<!-- 预览栏 -->
<div class="col-md-6 column">
<div class="col-md-12 preview" id="preview"></div>
</div>
</div>

<!-- </form> -->
</div>

<!-- 图片上传对话框-->
<div class="modal fade" id="uploadImgDialog" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">插入图片</h4>
</div>
<div class="modal-body">
<!--为了jquery获得basePath的值，必须写（如果没有更好的办法） -->
<input type="hidden" value="<%=request.getContextPath() %>" id="BasePath"/>
<input type="file" id="myupload" name="file" class="form-control" />
<button type="button" class="btn btn-primary" onclick="ajaxFileUpload()">上传</button>
<button type="reset" class="btn btn-default">重置</button>
<img id="viewImg" alt="上传的图片在这里显示"/>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
<button type="button" class="btn btn-primary" onclick="insertText('!')" data-dismiss="modal">确定</button>
</div>
</div>

</div>

</div>

<!-- 发表博客对话框-->
<div class="modal fade" id="addPostDialog" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">文章设置</h4>
</div>
<div class="modal-body">
<label for="brief">文章简介</label><input name="brief" type="text" class="form-control" id="brief" />
<label for="type">文章分类</label>
<select name="bid" class="form-control" id="bid">
<s:iterator id="bl" value="boardList">
<option value="<s:property value="#bl.id"/>"><s:property value="#bl.name"/></option>
</s:iterator>
</select>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
<button type="button" class="btn btn-primary" data-dismiss="modal" onclick="ajaxAddPost()">发布</button>
</div>
</div>

</div>

</div>

<script src="js/markdown.min.js"></script>
<script>
/* 预览 */
function Editor(input, preview) {
input.editor = this; //为input对象创建一个editor对象，将Editor(input, preview)对象赋给editor对象，利用input对象所对应的标签的属性oninput调用input对象的editor对象的update()方法
this.update = function () { //this指的是Editor(input, preview)，也是input.editor
setInterval(function(){
preview.innerHTML = markdown.toHTML(input.value);
},6000);
};
}
var E = function (id) { return document.getElementById(id); };
new Editor(E("content"), E("preview"));

/* 插入格式 */
function insertText(val){
var input = E("content");
var inputlen = input.value.length;
if(typeof document.selection != "undefined")
{
//当input对象中没有激活选区时，在最后面插入val
document.selection.createRange().text = val;
}
//当input对象中有激活选区时，按情况插入val
else
{
var left = input.value.substring(0,input.selectionStart);
var midd = input.value.substring(input.selectionStart,input.selectionEnd);
var right = input.value.substring(input.selectionEnd,inputlen);
if(val=='#'){ //标题
input.value =left + val + midd + right;
}
if(val=='**'){ //加粗
input.value = left + '**' + midd + '**' + right;
}
if(val=='*'){ //斜体
input.value = left + '*' + midd + '*' + right;
}
if(val=='---'){ //分割线
input.value =left + val + "\n" + right;
}
if(val=='+ '||val=='1. '){ //无序和有序，加号加上空格、数字加上字母点加上空格
input.value =left + val + midd  + right;
}
if(val=='  '){ //换行
input.value =left + midd + val + "\n" + right;
}
if(val=='``'){ //代码
input.value =left + '``' + midd + '``' + right;
}
if(val=='    '){
input.value =left + '    ' + midd + right;
}
if(val=='!'){
input.value = left + '![Alt text](' + E("viewImg").src + ')' + right;
}
if(val=='[]'){
input.value = left + '[Alt text](http://)' + right;
}
input.focus();//使得textarea获取焦点
}
}

</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航