利用jQuery实现最简单的编辑器

我试了很多种方法，目前最快捷能够实现及其简单的编辑可以使用 document.execCommand("ForeColor", "false", sColor);就能实现。
但是看到 MDN web文档上提示该方法已经废弃。这个方法并不是很好，有时间会去选择更好的方法。




<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

    </head>

    <style type="text/css">

        .editor_div {

            border: 1px solid #ccc;

        }

        .btn_div {

            border-bottom: 1px solid #ccc;

            height: 28px;

        }

        .span_btn {

            -webkit-user-select: none;

            -moz-user-select: none;

            -ms-user-select: none;

            user-select: none;

            font-size: 21px;

            font-weight: 400;

            display: inline-block;

            margin-left: 21px;

            cursor: pointer;

            position: relative;

        }

        .editor_content {

            height: 200px;

            width: 100%;

            overflow: hidden;

        }

        .header_con {

            position: absolute;

            top: 28px;

            left: 0;

            background-color: #e8e8e8;

            display: none;

            width: 50px;

            text-align: center;

        }

        .header_hcon {

            height: 19px;

            width: 50px;

            border-top: 1px solid #ccc;

            display: inline-block;

        }

    </style>

    <body>

        <div class="editor_div">

            <div class="btn_div">

                <span class="span_btn" onclick="tobebold()" id="tobebold">加粗B</span>

                <span class="span_btn" onclick="showchildren(this)">标签H

                    <span class="header_con">

                        <span class="header_hcon" onclick="clcikthis(this)" data-type="H5">H5</span>

                        <span class="header_hcon" onclick="clcikthis(this)" data-type="H4">H4</span>

                        <span class="header_hcon" onclick="clcikthis(this)" data-type="H3">H3</span>

                        <span class="header_hcon" onclick="clcikthis(this)" data-type="H2">H2</span>

                        <span class="header_hcon" onclick="clcikthis(this)" data-type="H1">H1</span>

                        <span class="header_hcon" onclick="clcikthis(this)" data-type="p">正文</span>

                    </span>

                </span>

                <span class="span_btn" onclick="showchildren(this)">颜色C

                    <span class="header_con">

                        <span class="header_hcon" onclick="changecolor(this)">red</span>

                        <span class="header_hcon" onclick="changecolor(this)">blue</span>

                        <span class="header_hcon" onclick="changecolor(this)">pink</span>

                        <span class="header_hcon" onclick="changecolor(this)">gold</span>

                    </span>

                </span>

            </div>

            <div class="editor_content" id="editor_content" tabindex="0" contenteditable="true">

            </div>

        </div>

    </body>

    <script src="./jquery.min.js" type="text/javascript" charset="utf-8"></script>

    <script type="text/javascript">

        if (window.getSelection) { //一般浏览器

            userSelection = window.getSelection();

        } else if (document.selection) { //IE浏览器、Opera

            userSelection = document.selection.createRange();

        }

        var oldHtml = ""

        var oldStr = ""

        var newHtml = ""

        var newStr = ""

        const tobebold = () => {

            document.execCommand("Bold", "false", null);

        }

        const showchildren = (e) => {

            $(e).children("span").css({

                "display": "inline-block"

            })

        }

        const clcikthis = (e) => {

            let hheader = $(e).attr("data-type")

            if (userSelection.toString().length != 0) {

                document.execCommand("FormatBlock", "false", hheader);

            }

            event.stopPropagation();

            $(e).parent().hide()

            return false

        }

        const changecolor = (e) => {

            let sColor = $(e).html().toLowerCase()

            document.execCommand("ForeColor", "false", sColor);

            event.stopPropagation();

            $(e).parent().hide()

            return false

        }

        // 点击后除指定位置外其他地方都会隐藏

        $("body").click(function(e) {

            if (!$(e.target).closest(".span_btn").length) {

                $(".header_con").hide();

            }

        });

    </script>

</html>





图片效果如下


												


											
基于JQuery的简单富文本编辑器的更多相关文章
	

    
								
  1. 基于jquery的bootstrap在线文本编辑器插件Summernote
		
    Summernote是一个基于jquery的bootstrap超级简单WYSIWYG在线编辑器.Summernote非常的轻量级,大小只有30KB,支持Safari,Chrome,Firefox.Op ...
    
		
    2. 
						
  2. 原生JS实现简单富文本编辑器2
		
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
    
		
    3. 
						
  3. 原生JS实现简单富文本编辑器
		
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
    
		
    4. 
						
  4. 基于jquery的bootstrap在线文本编辑器插件Summernote 简单强大
		
    Summernote是一个基于jquery的bootstrap超级简单WYSIWYG在线编辑器.Summernote非常的轻量级,大小只有30KB,支持Safari,Chrome,Firefox.Op ...
    
		
    5. 
						
  5. 基于jquery的bootstrap在线文本编辑器插件Summernote （转）
		
    Summernote是一个基于jquery的bootstrap超级简单WYSIWYG在线编辑器.Summernote非常的轻量级,大小只有30KB,支持Safari,Chrome,Firefox.Op ...
    
		
    6. 
						
  6. Jquery的bootstrap在线文本编辑器插件Summernote
		
    http://www.jqcool.net/demo/201407/bootstrap-summernote/ Summernote是一个基于jquery的bootstrap超级简单WYSIWYG在线 ...
    
		
    7. 
						
  7. Android - 富文本编辑器
		
    Android富文本编辑器(一):基础知识 目前主流的基于Android富文本开发方式思路如下: 基于TextView图文混排 使用方式: TextView textView = new TextVi ...
    
		
    8. 
						
  8. 基于ABP做一个简单的系统——实战篇：4.基于富文本编辑器，Razor模板引擎生成内容并导出Word 填坑记录
		
    起因 需求是这样的,有一种协议需要生成,协议的模板是可配置的,在生成过程中,模板中的内容可以根据约定的标记进行替换(就像mvc的razor模板一样).生成后的内容还需要导出成word或pdf. 常见的 ...
    
		
    9. 
						
  9. N个富文本编辑器/基于Web的HTML编辑器
		
    转自:http://www.cnblogs.com/lingyuan/archive/2010/11/15/1877447.html 基于WEB的HTML 编辑器,WYSIWYG所见即所得的编辑器,或 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 蓝桥杯 试题 历届试题 填字母游戏 博弈+dfs剪枝
			
    问题描述 小明经常玩 LOL 游戏上瘾,一次他想挑战K大师,不料K大师说: “我们先来玩个空格填字母的游戏,要是你不能赢我,就再别玩LOL了”. K大师在纸上画了一行n个格子,要小明和他交替往其中填入 ...
    
			
    2. 
						
  2. 线程的 run() 和 start() ; 太骚了 ~~
			
    线程的 run() 和 start() ; 太骚了 ~~ 线程的 run() 和 start() ; 太骚了 ~~注:本文转载于:CodeCow · 程序牛 的个人博客:http://www.code ...
    
			
    3. 
						
  3. Mac下搭建atx2环境
			
    Git-atx2官网地址,默认已有python3环境 1.安装rethinkdb 安装db:mac上安装很简单,执行brew install rethinkdb 启动db:nohup rethinkd ...
    
			
    4. 
						
  4. js中 addEventListener 和removeEventListener
			
    js中添加事件监听本来是非常常见的事情,但是去除监听一般很少去干,最近项目中需要监听页面显示或者隐藏 代码如下 document.addEventListener(visibilitychange', ...
    
			
    5. 
						
  5. [SD心灵鸡汤]007.每月一则 - 2015.11
			
    1.不要因为世界太过复杂,而背叛了你的单纯. 2.人的一生要疯狂一次,无论是为一个人,一段情,一段路途或一个梦想. 3.时间真的很神奇,你永远不知道它会如何改变你.换句话说:以前难吃的蔬菜.苦涩的啤酒 ...
    
			
    6. 
						
  6. pandas手册
			
    https://www.dataquest.io/blog/large_files/pandas-cheat-sheet.pdf
    
			
    7. 
						
  7. .net remoting(一)
			
    一.远程对象 ①RemoteHello.csproj 类库项目,程序集名称 RemoteHello ,默认命名空间 Wrox.ProCSharp.Remoting: ②派生自System.Marssh ...
    
			
    8. 
						
  8. 概念辨析-Hardware Description还是Hardware Developing?
			
    https://mp.weixin.qq.com/s/j4Ndo1R4Go9IaGbhE_nsTg   Verilog, standardized as IEEE 1364, is a hardwar ...
    
			
    9. 
						
  9. [精华帖]Java接口怎么定义？如何使用？【实例讲解】
			
    [精华帖?]滑稽之谈||| 题目: 模拟电脑USB功能设备使用 1.定义USB接口,具备最基本的开启功能和关闭功能 2.定义电脑类,具有开机.关机以及使用usb设备功能 3.鼠标类.具有usb功能,并 ...
    
			
    10. 
						
  10. js循环语句while，do..while，for
			
    1. while循环 while(循环条件){ 循环体语句块; } 2.do..while循环 do{ 循环体语句块; }while(循环条件) 两者区别:while先判断后执行.循环体语句可能一次都 ...
    
			
    11.