利用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. 阿里云ECS封25端口导致wordpress无法发送邮件的解决
			
    在有人评论你的文章,wordpress默认会尝试向博主发送邮件,而如果你用的是阿里云ECS,你会发现评论已经成功了,但是由于邮件发送失败会导致用户评论后页面就卡住了,原因就在于阿里云的ECS目前已经全 ...
    
			
    2. 
						
  2. vue过渡动画样式
			
    在进入/离开的过渡中,会有 6 个 class 切换. v-enter:定义进入过渡的开始状态.在元素被插入之前生效,在元素被插入之后的下一帧移除. v-enter-active:定义进入过渡生效时的 ...
    
			
    3. 
						
  3. 剑指Offer之矩形覆盖
			
    题目描述 我们可以用2*1的小矩形横着或者竖着去覆盖更大的矩形.请问用n个2*1的小矩形无重叠地覆盖一个2*n的大矩形,总共有多少种方法? 比如n=3时,2*3的矩形块有3种覆盖方法: 思路:与裴波拉 ...
    
			
    4. 
						
  4. 【JavaScript数据结构系列】00-开篇
			
    [JavaScript数据结构系列]00-开篇 码路工人 CoderMonkey 转载请注明作者与出处 ## 0. 开篇[JavaScript数据结构与算法] 大的计划,写以下两部分: 1[JavaS ...
    
			
    5. 
						
  5. 四、Spring-面向切面编程
			
    内容 面向切面编程基本原理 通过POJO创建切面 使用@AspectJ注解 为AspectJ切面注入依赖 关键词 横切关注点(cross-cutting concern) 继承 (inheritanc ...
    
			
    6. 
						
  6. 货车运输  noip2013 luogu P1967 （最大生成树+倍增LCA）
			
    luogu题目传送门! 首先,题目让我们求每个货车的最大运输量,翻译一下就是求路径上边权最小的边. 利用一下贪心思想可知,所有货车肯定都会尽量往大的边走. 进一步翻译,即为有一些小边货车根本不会走,或 ...
    
			
    7. 
						
  7. Python 每日一练(7)
			
    引言 今天的练习比较轻松,原本是有两题的,但是第一题那个大致看了一下,其实和之前的6个练习差不多,就是把xls中的文件数据读取出来后,进行一下处理,对于那题而言就是一个求和操作,所以就没练了,所以今天 ...
    
			
    8. 
						
  8. 加速国内Github代码下载速度
			
    标题: 加速国内Github代码下载速度 作者: 梦幻之心星 347369787@QQ.com 标签: [Github, 代码, 下载] 目录: 代码 日期: 2019-10-27 目录 前提说明 解 ...
    
			
    9. 
						
  9. &      Google前沿的AMP技术
			
    首先要知道什么是AMP以至于为什么要选择AMP? AMP他并不是一门新技术,他只是一种能够让页面更快打开的一种办法.之所以用他是因为AMP能够带来SEO排名优化.另外Google搜索结果对AMP页面有 ...
    
			
    10. 
						
  10. Rocket - tilelink - Atomics
			
    https://mp.weixin.qq.com/s/TSwKL_qm-b-0e8x7r--hhg   简单介绍Atomics中数学运算.逻辑运算的实现.   ​​   1. io   Atomics ...
    
			
    11.