自定义markdown编辑器
程序员文章站
2022-05-26 17:53:33
...
<!DOCTYPE html><html>
<body>
<textarea id="text-input" oninput="this.editor.update()"
rows="6" cols="60">123456</textarea>
<div id="preview"> </div>
<input id="button" type="button" onclick="kkk()"/>
<script src="markdown.js"></script>
<script>
function getTxt1CursorPosition(){
var oTxt1 = document.getElementById("text-input");
var cursurPosition=-1;
// 查找你要判断的文本框
if(oTxt1.selectionStart == 0){
cursurPosition= 0;
return cursurPosition;
}
if(oTxt1.selectionStart){//非IE浏览器
cursurPosition= oTxt1.selectionStart;
return cursurPosition;
}else{//IE
var range = document.selection.createRange();
range.moveStart("character",-oTxt1.value.length);
cursurPosition=range.text.length;
}
alert(cursurPosition);
return cursurPosition;
}
function kkk(){
cursurPosition = getTxt1CursorPosition()
var startStr = $("text-input").value.substr(0,cursurPosition);
var endStr = $("text-input").value.substr(cursurPosition, $("text-input").value.length);
alert(startStr);
alert(endStr);
$("text-input").value = startStr + "123456" + endStr;
new Editor($("text-input"), $("preview"));
}
function Editor(input, preview) {
this.update = function () {
var contant = input.value;
preview.innerHTML = markdown.toHTML(contant, "Maruku");
};
input.editor = this;
this.update();
}
var $ = function (id) { return document.getElementById(id); };
new Editor($("text-input"), $("preview"));
</script>
</body>
</html>上一篇： TinyMCE：下载、安装、配置
下一篇： 最受欢迎的前K种水果