2. 程式人生 > >純JavaScript在網頁上實現”簡書“的文章編輯器

純JavaScript在網頁上實現”簡書“的文章編輯器

阿新 • • 發佈：2019-02-07

今天在“簡書”上看到發文章的文字編輯器，覺得很神奇，很夢幻，於是想在網頁上實現一下。先上一張自己實現的網頁編輯器的效果：我的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,希望大家不吝賜教

相關推薦

純JavaScript在網頁上實現”簡書“的文章編輯器

今天在“簡書”上看到發文章的文字編輯器，覺得很神奇，很夢幻，於是想在網頁上實現一下。先上一張自己實現的網頁編輯器的效果： 原理：多個input文字域疊加使用 每次點選按鈕的時候，都會在一行新增一個input type=text，樣式值為點選相應按鈕的

在網頁上實現大華視頻監控攝像頭在線

head sta meta net utf body kde .org http 1.編寫代碼 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/x

部落格搬家系列（四）-爬取簡書文章

部落格搬家系列（四）-爬取簡書文章 一.前情回顧   部落格搬家系列（一）-簡介：https://blog.csdn.net/rico_zhou/article/details/83619152  部落格搬家系列（二）-爬取CSDN部落格：https:/

Python爬蟲教程：簡書文章的抓取與儲存

本文內容將與大家一起從簡書的文章頁面抓取文章標題、作者、釋出時間以及正文內容，並且將抓取到的這些資訊存入Excel表格中。本文對簡書文章的抓取僅為Python的學習交流，尊重作者著作權，不對抓取到的文章做其他用途。本文使用Chrome瀏覽器對頁面中需要抓取的內容進行分析。 首先我們從簡書

html篇：純JavaScript 網頁版計算器calc，支援多級運算

//按鍵=號後，被呼叫 //解析顯示框中的等式字串為一個正確無誤的數字結果 function parse(content) { //尋找顯示框中的等式字串的最後的一個左括號 var index = content.lastIndexOf("("); //如果等式中有左括號 if

在網頁上實現任意格式的音視訊快速播放功能的開發總結。

開發重點在pc端，手機端不考慮。 要實現使用者上傳音視訊到伺服器，上傳完畢即可隨意拖動進度條觀看。 h5自帶的video標籤不支援大多數格式的音視訊格式，不考慮。 考慮使用流媒體播放，把源視訊轉成視訊流推到網頁播放器。 使用nginx+nginx-rtmp-module+f

網頁上實現匯出excel表格時，怎樣在後臺生成excel後，讓表格在瀏覽器中自動下載（larval框架）

Html程式碼片段： <form method="post" id="export_form" action="action" style="float: left">     <input id="export_info" type="hidden" n

CentOS7上實現Squid緩存服務器的兩種模式

修改內容 ef6 同名 entos ns3 類型 緩存加速 c-c routing 一、緩存代理概述Squid服務作為應用層的代理服務軟件，Squid主要提供緩存加速和應用層過濾控制的功能。 二、代理的基本類型根據實現的方式不同，代理服務可以分為傳統代理和同名代理兩種行間的

RichEditeText——android圖文混排富文字文章編輯器實現詳解

需求：android 實現富文字編輯器，並且實現html解析和生成。 功能點： 字型加粗，斜體，下劃線，刪除線 字型設定大小   預設大（18px），中（16px）,小（14px） 字型設定顏色 換行插入圖片 編輯內容生成html 解析html並且顯示 主要實現

用純js實現一個文本編輯器

padding lang style cti lists justify amp def copy 效果圖 代碼 <!DOCTYPE html> <html lang="en"> <head> <meta chars

瀏覽器更改實現webstrom等前端編輯器的同步更新

F12 str 控制 img .cn 像素 3-9 谷歌 同時 　　經常寫css時是不是瀏覽器調一下幾像素，然後會編輯器改改改，有時候改好幾次，真的是累死寶寶了，最近發現了谷歌瀏覽器的強大功能，更改實現代碼同步更新，直接可以瀏覽器寫代碼同時實現同步刷新了，而且最重要的不需要

小書匠編輯器使用手冊

ali prev 工具 部分 chrome 自己 維護 博客 編輯 小書匠編輯器使用手冊小書匠使用手冊 概要 小書匠編輯器是一款專為markdown寫作而設計的編輯器。 主要功能 專為markdown寫作設計的文檔編輯器，讓用戶心無旁騖的進行創作。

後臺文章編輯器的可視區域添加自定義功能按鈕

nload rac IT 樣式 admin lte size gist != 有時候我們需要自定義一些樣式或者功能，要麽就是直接在Text區域直接寫html代碼， 還有一種方法就是直接將自定義一些樣式或者功能添加到後臺文章編輯器的 可視區域。具體實現方式如下： 首先在對應的

怎麼將織夢圖集模型編輯器改為文章編輯器？

今天跟版網小編在使用織夢圖集編輯器的時候發現圖集編輯器的功能要比文章的編輯器少很多，釋出內容的時候很不好用，比如圖片居中，編輯居中等功能，具體不知道官方為何將這個編輯器簡化的，我們如何將編輯器改成文章的一樣呢？圖集編輯器：文章編輯器： 修改方法如下：   將/dede/temp

RichEditor——一款基於RecyclerView實現的富文字編輯器實現方案(支援圖文、轉義生成MarkDown、粗體、斜體、下劃線、刪除線、超連結、標題等)

前言 對於富文字編輯器的實現，首先我們肯定會想到實現的編輯器需要支援的幾個必要特性： 1.涉及大量文字，圖片，文字樣式的展示與編輯。 2.涉及極其複雜的使用者互動。 目前Github上我所瞭解的富文字編輯器基本上實現方式基於兩種： * 1.基於WebView

notepad-ken，不用按esc，但實現了常用程式碼編輯器功能的VIM

Centos、Redhat、Fedora安裝: yum install ctags cscope wget unzip vim -y && wget https://github.com/langsim/notepad-ken/archive/maste

歡迎使用CSDN-markdow包裝盒核算成本的方法之合力佳簡析n編輯器

歡迎使用Markdown編輯器 你好！ 這是你第一次使用 Markdown編輯器 所展示的歡迎頁。如果你想學習如何使用Markdown編輯器, 可以仔細閱讀這篇文章，瞭解一下Markdown的基本語法知識。 新的改變 我們對Markdown編輯器進行了一些功能

JSP實現嵌入富文字編輯器UEditor的配置

最近在寫資料庫大作業——BBS論壇系統，其中發帖子內容時用到了UEditor，在此記錄一下。UEditor是由百度WEB前端研發部開發的所見即所得的開源富文字編輯器，具有輕量、可定製、使用者體驗優秀等特點。開源基於BSD協議，所有原始碼在協議允許範圍內可自由修改

WordPress文章編輯器外掛：Kindeditor for WordPress

部落格原文：WordPress文章編輯器外掛：Kindeditor for WordPress 在我用wordpress搭建了部落格之後，自帶的文章編輯器不能滿足我需求，於是我嘗試了不少的編輯外掛，最後我選擇了Kindeditor對於WordPress這款外掛，能滿足我日常的文章編寫需求，最

給帝國cms7.5後臺文章編輯器ckeditor增加一個行距的功能外掛

    帝國7.5升級後，帶來了不小的驚喜，後臺的編輯器雖然沒有換成ueditor.但也做了更新，換成了ckeditor，也是一個不錯的編輯器。但在使用的過程中，發現編輯的內容行間距無法進行調整，這就比較尷尬了，一片片的字壘成成一團，不設定間距，怎麼看怎麼不舒服，對於強迫症的