通过jquery创建文本编辑器_Jquery

通过jquery创建文本编辑器

jquery

通过jquery创建文本编辑器,jquery,Jquery,嗯。。。解释很简单，我想创建一个文本编辑器，就像stackoverflow一样，您可以在其中键入文本，然后在文本下面格式化并显示让我们保持简单这是我尝试过的一件简单的事情 `https://jsfiddle.net/dh4qpzzv/` 但它并没有将文本推到最广度正如Amani所说，您应该使用一些外部库，例如CKEditor或TineMCE。然后，在更改事件上绑定以替换目标元素的内容 HTML: HTML文本区，带要显示的div Textarea带有要显示的 jQ监视keydown以

嗯。。。解释很简单，我想创建一个文本编辑器，就像stackoverflow一样，您可以在其中键入文本，然后在文本下面格式化并显示

让我们保持简单

这是我尝试过的一件简单的事情

`https://jsfiddle.net/dh4qpzzv/`

但它并没有将文本推到最广度

正如Amani所说，您应该使用一些外部库，例如CKEditor或TineMCE。然后，在更改事件上绑定以替换目标元素的内容

HTML:

HTML文本区，带要显示的div

Textarea

带有要显示的

jQ监视keydown以更新预览
用于格式化的控制按钮
格式化快捷键（包括组合CTRL+和CTRL+Shift）
如果您想添加更多，有一个注释掉的输入来显示ascii数字


文本编辑器（测试）
$（函数（）{
updCont（）；//如果存在文本
var ht=window.innerHeight-$（“#dvInput”）.css（“height”）。替换（/[^.0-9]/g'，）-30；
如果（ht-1）
e、 preventDefault？e.preventDefault（）：（e.returnValue=false）；
如果（curKey==56）fmt（“bull”）；//*
如果（curKey==190）fmt（“indnt”）；/>
如果（curKey==80）fmt（“para”）；//P
如果（curKey==65）fmt（“href”）；//A
如果（curKey==83）fmt（“spn”）；//S
else如果（curKey==76）fmt（“li”）；//L
如果（curKey==85）fmt（“ul”）；//U
else if（curKey==79）fmt（“ol”）；//O
}否则如果（e.ctrlKey）{
if（[66,73,13,85].indexOf（curKey）>-1）
e、 preventDefault？e.preventDefault（）：（e.returnValue=false）；
如果（curKey==66）fmt（“bld”）；//B
else if（curKey==73）fmt（“ital”）；//I
else如果（curKey==85）fmt（“uLine”）；//U
如果（curKey==13）fmt（“crlf”）；/[输入]
}
updCont（）；
});
//$（“#inp”）.keydown（函数（e）{alert（e.which）}）
});
函数updCont（）{
$（“#dvCont”）.html（$（“#txtCont”）.val（）；//用textarea html文本填充display div
}
功能fmt（inAct）{
//共同需要
var oTxt=$（“#txtCont”）；
var s=oTxt[0]。选择开始；
var e=oTxt[0]。选择结束；
var raVal=[oTxt.val（）.substring（0，s），oTxt.val（）.substring（s，e），oTxt.val（）.substring（e），s，e]；
var-start=0；
var Ofsend=0；
如果（输入=“bld”）{
oTxt.val（raVal[0]+“”+raVal[1]+“”+raVal[2]）；
//如果不希望选择文本，请将raVal[1].长度添加到起始位置
初始值=3；
//取消注释以在结束标记后放置光标（也取消选择-将开始设置为同一点）
//Ofsend=4；
}否则如果（inAct==“ital”）{
oTxt.val（raVal[0]+“”+raVal[1]+“”+raVal[2]）；
初始值=3；
//Ofsend=4；
}否则，如果（输入==“uLine”）{
oTxt.val（raVal[0]+“”+raVal[1]+“”+raVal[2]）；
初始值=3；
//Ofsend=4；
}否则，如果（输入==“ul”）{
oTxt.val（raVal[0]+“”+raVal[1]+“”+raVal[2]）；
初始值=4；
//Ofsend=5；
}否则如果（输入==“ol”）{
oTxt.val（raVal[0]+“”+raVal[1]+“”+raVal[2]）；
初始值=4；
//Ofsend=5；
}否则，如果（输入==“li”）{
oTxt.val（raVal[0]+“”+raVal[1]+“”+raVal[2]）；
初始值=13；
//Ofsend=5；
}否则如果（inAct==“indnt”）{
oTxt.val（raVal[0]+“”+raVal[1]+“”+raVal[2]）；
初始值=17；
//Ofsend=5；
}否则，如果（inAct==“牛市”）{
oTxt.val（raVal[0]+“
&bull；”+raVal[1]+raVal[2]）；
初始值=20；
}否则，如果（inAct==“段落”）{
oTxt.val（raVal[0]+“”+raVal[1]+“”+raVal[2]）；
初始值=3；
//Ofsend=4；
}否则如果（输入==“href”）{
oTxt.val（raVal[0]+“”+raVal[2]）；
初始值=29；
//Ofsend=4；
}否则，如果（输入==“spn”）{
oTxt.val（raVal[0]+“”+raVal[1]+“”+raVal[2]）；
初始值=24；
//Ofsend=4；
}否则如果（输入==“crlf”）{
oTxt.val（raVal[0]+“
”+raVal[1]+raVal[2]）；
Ofsend=5；
}
updCont（）；
//将光标置于选定范围的末尾（如果没有选定文本，则忽略开始）
oTxt[0]。选择开始=s+s开始；
oTxt[0]。选择结束=s+OSTSTART+raVal[1]。长度；
oTxt[0]。焦点（）；
}
.dnt{左边距：40px；}
.styleBtn{宽度：20px；边距：2px 10px；边框：1px纯黑；背景色：#EEE；浮动：左；文本对齐：中心；}
文本输入：
B
我
U
•_u

•__
1__

2__
&公牛；>
>
&公牛；
&段落；
&ldsh；
a>
spn>
同侧耳大耳大耳小耳小耳小耳小耳小耳小耳小耳小耳小耳小耳小耳小耳小耳小耳小耳小耳小耳小耳小耳小耳小耳小耳小耳小耳小耳小耳小耳小耳
显示：

有很多漂亮的插件。不知道为什么OP被否决——这似乎是一个完全合理的要求。这可能会因为启用OP而被否决。但是我需要一个textarea而不是WYSIWYG DOM元素，这样我可以更直接地控制标记。

不要试图绕过发布实际代码的要求，而不仅仅是通过使链接看起来像代码来摆弄链接！问题应该是自包含的。您必须使用JQuery插件，例如

ckeditor.js

参见示例

<textarea name="editor"></textarea>

<div id="result">
    <p>Put some text in the editor to see the preview.</p>
</div>

var editor = CKEDITOR.replace('editor', {
    height: 100
});

editor.on('change', function () {
   $('#result').html(this.getData())
});

<head>
    <title>Text Editor (test)</title>
<script type="text/javascript" src="../lib/js/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
    updCont();//in case existing text
    var ht = window.innerHeight - $("#dvInput").css("height").replace(/[^.0-9]/g, '') - 30;
    if(ht<200) ht = 200;//display height minimum (may extend a bit below page)
    $("#dvCont").css("height", ht + "px");
    $("#txtCont").keydown(function(e){
        var curKey = e.which ? e.which : e.key;
        if(e.ctrlKey && e.shiftKey){
            if([56,190,80,65,83,76,85,79].indexOf(curKey)>-1)
                e.preventDefault ? e.preventDefault() : (e.returnValue = false);
            if(curKey == 56) fmt("bull");// *
            else if(curKey == 190) fmt("indnt");// >
            else if(curKey == 80) fmt("para");// P
            else if(curKey == 65) fmt("href");// A
            else if(curKey == 83) fmt("spn");// S
            else if(curKey == 76) fmt("li");// L
            else if(curKey == 85) fmt("ul");// U
            else if(curKey == 79) fmt("ol");// O
        }else if(e.ctrlKey){
            if([66,73,13,85].indexOf(curKey)>-1)
                e.preventDefault ? e.preventDefault() : (e.returnValue = false);
            if(curKey == 66) fmt("bld");// B
            else if(curKey == 73) fmt("ital");// I
            else if(curKey == 85) fmt("uLine");// U
            else if(curKey == 13) fmt("crlf");// [enter]
        }
        updCont();
    });
//    $("#inp").keydown(function(e){alert(e.which)})
});
function updCont(){
    $("#dvCont").html($("#txtCont").val());//stuff the display div with textarea html text
}
function fmt(inAct){
    //common needs
    var oTxt = $("#txtCont");
    var s = oTxt[0].selectionStart;
    var e = oTxt[0].selectionEnd;
    var raVal = [oTxt.val().substring(0, s), oTxt.val().substring(s, e), oTxt.val().substring(e), s, e];
    var ofstStart = 0;
    var ofstEnd = 0;
    if(inAct=="bld"){
        oTxt.val(raVal[0] + "<b>" + raVal[1]  + "</b>" + raVal[2]);
        //if you don't want text selected, add raVal[1].length to ofstStart 
        ofstStart = 3;
        //uncomment to place cursor after closing tag (also unselect - set ofstStart to same point)
        //ofstEnd = 4;
    }else if(inAct=="ital"){
        oTxt.val(raVal[0] + "<i>" + raVal[1]  + "</i>" + raVal[2]);
        ofstStart = 3;
        //ofstEnd = 4;
    }else if(inAct=="uLine"){
        oTxt.val(raVal[0] + "<u>" + raVal[1]  + "</u>" + raVal[2]);
        ofstStart = 3;
        //ofstEnd = 4;
    }else if(inAct=="ul"){
        oTxt.val(raVal[0] + "<ul>" + raVal[1]  + "</ul>" + raVal[2]);
        ofstStart = 4;
        //ofstEnd = 5;
    }else if(inAct=="ol"){
        oTxt.val(raVal[0] + "<ol>" + raVal[1]  + "</ol>" + raVal[2]);
        ofstStart = 4;
        //ofstEnd = 5;
    }else if(inAct=="li"){
        oTxt.val(raVal[0] + "<li style=''>" + raVal[1]  + "</li>" + raVal[2]);
        ofstStart = 13;
        //ofstEnd = 5;
    }else if(inAct=="indnt"){
        oTxt.val(raVal[0] + "<div class='dnt'>" + raVal[1]  + "</div>" + raVal[2]);
        ofstStart = 17;
        //ofstEnd = 5;
    }else if(inAct=="bull"){
        oTxt.val(raVal[0] + "<br />&nbsp; &bull; " + raVal[1]  + raVal[2]);
        ofstStart = 20;
    }else if(inAct=="para"){
        oTxt.val(raVal[0] + "<p>" + raVal[1]  + "</p>" + raVal[2]);
        ofstStart = 3;
        //ofstEnd = 4;
    }else if(inAct=="href"){
        oTxt.val(raVal[0] + "<a href='' class='' title=''>" + raVal[1]  + "</a>" + raVal[2]);
        ofstStart = 29;
        //ofstEnd = 4;
    }else if(inAct=="spn"){
        oTxt.val(raVal[0] + "<span class='' style=''>" + raVal[1]  + "</span>" + raVal[2]);
        ofstStart = 24;
        //ofstEnd = 4;
    }else if(inAct=="crlf"){
        oTxt.val(raVal[0] + "<br />" + raVal[1]  + raVal[2]);
        ofstEnd = 5;
    }
    updCont();
    //put cursor at end of selected range (ignores start if no selected text)
    oTxt[0].selectionStart = s + ofstStart;
    oTxt[0].selectionEnd = s + ofstStart + raVal[1].length;
    oTxt[0].focus();
}
</script>
<style>
.dnt{margin-left:40px;}
.styleBtn{width:20px;margin:2px 10px;border:1px solid black;background-color:#EEE;float:left;text-align:center;}
</style>
</head><body>
<div id="dvInput">
<div style="border:1px solid black;border-radius:5px;background-color:silver;font-weight:bold;padding:2px 5px;float:left;">
    <div style="float:left;margin:2px 20px;">Text Input:</div>
    <span onclick="fmt('bld');" title="CTRL+B: Bold selected text">
        <div class="styleBtn"><b>B</b></div>
    </span>
    <span onclick="fmt('ital');" title="CTRL+I: Italicize selected text">
        <div class="styleBtn"><i>I</i></div>
    </span>
    <span onclick="fmt('uLine');" title="CTRL+U: Underline selected text">
        <div class="styleBtn"><u>U</u></div>
    </span>
    <span onclick="fmt('ul');" title="CTRL+Shift+U: List Group <ul> (unordered) around highlighted/selected text">
        <div class="styleBtn" style="height:19px;font-size:5.5pt;">
            •__<br>
            •__
        </div>
    </span>
    <span onclick="fmt('ol');" title="CTRL+Shift+O: Ord List Group <ol> (ordered) around highlighted/selected text">
        <div class="styleBtn" style="height:19px;font-size:5.5pt;padding-top:2px;">
            1__<br>
            2__
        </div>
    </span>
    <span onclick="fmt('li');" title="CTRL+Shift+L: List Item <li> around highlighted/selected text">
        <div class="styleBtn" style="width:30px;">&lt;&bull;></div>
    </span>
    <span onclick="fmt('indnt');" title="CTRL+Shift+>: <div> Indent a selected block of text\n(No remove shortcut.\nManually delete <div></div> to undo/outdent)">
        <div class="styleBtn">></div>
    </span>
    <span onclick="fmt('bull');" title="CTRL+Shift+*: Bullet (and new line)">
        <div class="styleBtn">&bull;</div>
    </span>
    <span onclick="fmt('para');" title="CTRL+Shift+P: Paragraph <p> around highlighted/selected text">
        <div class="styleBtn">&para;</div>
    </span>
    <span onclick="fmt('crlf');" title="CTRL+Enter: New Line <br>">
        <div class="styleBtn">&ldsh;</div>
    </span>
    <span onclick="fmt('href');" title="CTRL+Shift+A: <a href>">
        <div class="styleBtn" style="width:33px;">&lt;a></div>
    </span>
    <span onclick="fmt('spn');" title="CTRL+Shift+S: <span>">
        <div class="styleBtn" style="width:48px;">&lt;spn></div>
    </span>
<!-- <input id="inp" size="2">-enter char, get ascii number -->
</div>
<textarea id="txtCont" rows="10" style="width:100%;" name="myText"
>lorem ipsum dolor magnificum est labat et nobis pacem</textarea><br />
</div>

Display:
<div id="dvCont" style="border:1px solid black;border-radius:5px;overflow-y:auto;"></div>
</body>
</html>