利用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. POJ2758 Checking the Text
			
    题目链接:https://vjudge.net/problem/POJ-2758 题目大意: 先给出一串原始字符串,在此基础上执行两种操作: 1.在第 p 个字符前添加字符 ch,如果 p 比现字符串 ...
    
			
    2. 
						
  2. ASCII码排序（hdu2000）
			
    思考:字符串的输入中是不包含空格的,所以可以用scanf_s("%字符类型占位符",&变量名,整型参数)来输入字符串. 因为scanf_s()函数的输入一遇到空格就会停止输 ...
    
			
    3. 
						
  3. 关于pytest使用allure生成报告时，报一堆警告和缺少XX模块
			
    因为最新的pytest 支持*.josn的用例报告,卸载旧的模块使用新的即可: 需要移除旧模块:pip uninstall pytest-allure-adaptor, 并安装:pip install ...
    
			
    4. 
						
  4. APP定位元素之UiSelector
			
    1.UiSelector 类介绍 功能:通过各种属性与节点关系定位组件 操作步骤:找到对象->操作对象 2.四中匹配关系的介绍 (1)完全匹配 (2)包含匹配 (3)正则匹配 (4)起始匹 例子 ...
    
			
    5. 
						
  5. 前端基础知识之html和css全解
			
    前端回顾 目录 前端回顾 基础知识 HTTP协议 认识HTML HTML组成 HTML标签 div和span标签 特殊的属性 常用标签 认识css 选择器 属性 前端就是展示给用户并且与用户进行交互的 ...
    
			
    6. 
						
  6. 【Tomcat】JSP使用Session、Cookie实现购物车
			
    购物界面shop.jsp 初始页面 添加商品后,在session中设置属性,重定向回到shop.jsp,然后根据session的内容显示结果 Cookie设置setMaxAge可以延长session的 ...
    
			
    7. 
						
  7. svg高级应用及动画
			
    canvas 和 webGL 这两项图形技术结合 css3 可以说能完成绝大部分的动画和需求.但 canvas 和 webGL 毕竟是偏向底层的绘制引擎,某些场景使用起来还是过于繁琐的,不分场合一律使 ...
    
			
    8. 
						
  8. Java实现 LeetCode 502 IPO（LeetCode：我疯起来连自己都卖）
			
    502. IPO 假设 力扣(LeetCode)即将开始其 IPO.为了以更高的价格将股票卖给风险投资公司,力扣 希望在 IPO 之前开展一些项目以增加其资本. 由于资源有限,它只能在 IPO 之前完 ...
    
			
    9. 
						
  9. Java实现 蓝桥杯VIP 算法提高 文化之旅
			
    算法提高 文化之旅 时间限制:1.0s 内存限制:128.0MB 问题描述 有一位使者要游历各国,他每到一个国家,都能学到一种文化,但他不愿意学习任何一种文化超过一次(即如果他学习了某种文化,则他就不 ...
    
			
    10. 
						
  10. java实现第七届蓝桥杯平方圈怪
			
    平方圈怪 题目描述 如果把一个正整数的每一位都平方后再求和,得到一个新的正整数. 对新产生的正整数再做同样的处理. 如此一来,你会发现,不管开始取的是什么数字, 最终如果不是落入1,就是落入同一个循环 ...
    
			
    11.