纯JavaScript在网页上实现”简书“的文章编辑器

最新推荐文章于 2023-03-28 17:10:22 发布

humeSnail

最新推荐文章于 2023-03-28 17:10:22 发布

阅读量2.2k

点赞数

分类专栏：大爱JavaScript

本文链接：https://blog.csdn.net/humeSnail/article/details/50877882

版权

大爱JavaScript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

今天在“简书”上看到发文章的文本编辑器，觉得很神奇，很梦幻，于是想在网页上实现一下。先上一张自己实现的网页编辑器的效果：我的demo

原理：多个input文本域叠加使用

每次点击按钮的时候，都会在一行添加一个input type=text，样式值为点击相应按钮的值【也给键盘enter绑定一个值】。废话不多说，直接上代码：

<!DOCTYPE html>
<html>
<head>
    <title>仿简书</title>
    <meta charset='utf-8'>
    <script src="jquery-1.11.1.min.js"></script>
    <style >

    ul{

        text-align: center;
    }

    ul li{

        display: inline;
    }

    input[type=text]{

        border:0px;
        width: 100%;
        font-size: 20px;
    }

    input[mazhe=quote]{

        background-color: rgb(192,192,192);
    }

    div[mazhe=quote]{

        border-style: none none none solid;
        background-color: rgb(192,192,192);
        font-size: 2.5em;
    }

    </style>
</head>
<body>

<ul>
    <li><button id='black'>黑体</button></li>
    <li><button id='italic'>斜体</button></li>
    <li><button id='quote'>引用</button></li>
    <li><button id='line-through'>划掉</button></li>
</ul>

<div id='content'>  
    <input type='text' id="msg">
</div>

<script >

window.onload = function(){

    $('#msg').focus();
}

var number = 0;
//回车
$('#br').click(function(){

    string = '<br/>';
    $('#content').append(string); 
});

//斜体
$('#italic').click(function(){

    var str = '<input style="font-style:italic" type="text" id = "num_'+number+'">';
    $('#content').append(str);
    $('#num_'+number).focus();
    number ++;
});

//黑体
$('#black').click(function(){

    var str = '<input style="font-weight:bold" type="text" id = "num_'+number+'">';
    $('#content').append(str);
    $('#num_'+number).focus();
    number ++;


});


//引用
$('#quote').click(function(){

    var str = '<div mazhe="quote"><input mazhe="quote"type="text" id = "num_'+number+'"></div>';
    $('#content').append(str);
    $('#num_'+number).focus();
    number ++;
});

//划掉
$('#line-through').click(function(){

    var str = '<input style="text-decoration:line-through" type="text" id = "num_'+number+'">';
    $('#content').append(str);
    $('#num_'+number).focus();
    number ++;
});

//键盘enter键
document.onkeydown = function(event){

    var e = event || window.event || arguments.callee.caller.arguments[0];

    if(e && e.keyCode ==13){

        var str = '<input type="text" id = "num_'+number+'">';
        $('#content').append(str);
        $('#num_'+number).focus();
        number ++;
    }
};
</script>

</body>
</html>

除了向这样很low的方法应该还有其他的方式，但是除了input我不知道html5还提供了什么可用的api,希望大家不吝赐教

humeSnail

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
3
评论
纯JavaScript在网页上实现”简书“的文章编辑器

今天在“简书”上看到发文章的文本编辑器，觉得很神奇，很梦幻，于是想在网页上实现一下。先上一张自己实现的网页编辑器的效果：原理：多个input文本域叠加使用每次点击按钮的时候，都会在一行添加一个input type=text，样式值为点击相应按钮的值【也给键盘enter绑定一个值】。废话不多说，直接上代码：<!DOCTYPE html><html><head> <title>仿简书
复制链接

扫一扫