利用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. 解决使用IDEA启动Tomcat成功但localhost:8080无法访问的问题
			
    解决使用IDEA启动Tomcat成功但localhost:8080无法访问的问题
    
			
    2. 
						
  2. Floyd's Triangle
			
    Floyd's Triangle Floyd's triangle is a right-angled triangular array of natural numbers. Floyd's tri ...
    
			
    3. 
						
  3. 【情感分析必备】python文件读写：codecs
			
    codecs在读取文件时,发生错误: UnicodeDecodeError: 'utf-8' codec can't decode byte 0xbe in position 0: invalid s ...
    
			
    4. 
						
  4. 消息队列RabbitMQ的安装配置与PHP中的使用
			
    一.RabbitMQ安装 windows安装 下载地址: https://github.com/rabbitmq/rabbitmq-server/releases/download/v3.8.3/ra ...
    
			
    5. 
						
  5. JNPF低代码开发框架代码生成器设计
			
    1.代码生成器目录下有通用开发模板.单表开发模板.多表开发模板.流程表单模板.移动开发模板等: ①代码生成器录下通用开发模板页面,有搜索.上步.下步.下载代码功能操作: ②输入查询条件表名关键字进行搜 ...
    
			
    6. 
						
  6. 重学 Java 设计模式：实战建造者模式
			
    作者:小傅哥 博客:https://bugstack.cn - 原创系列专题文章 沉淀.分享.成长,让自己和他人都能有所收获! 一.前言 乱码七糟 [luàn qī bā zāo],我时常怀疑这个成语 ...
    
			
    7. 
						
  7. 基于 abp vNext 和 .NET Core 开发博客项目 - 用AutoMapper搞定对象映射
			
    上一篇文章(https://www.cnblogs.com/meowv/p/12961014.html)集成了定时任务处理框架Hangfire,完成了一个简单的定时任务处理解决方案. 本篇紧接着来玩一 ...
    
			
    8. 
						
  8. Unity 游戏框架搭建 2019 (五十、五十一) 消息机制小结&MonoBehaviourSimplify 是框架？
			
    我们花了 5 篇文章学习了消息机制的方方面面.并且完成了一个简易消息机制,之后集成到了我们的 MonoBehaviourSimplify 里. 现在 MonoBehaviourSimplify 有一点 ...
    
			
    9. 
						
  9. ZooKeeper未授权漏洞
			
    ZooKeeper是一个分布式的,开放源码的分布式应用程序协调服务,是Google的Chubby一个开源的实现,它是集群的管理者,监视着集群中各个节点的状态根据节点提交的反馈进行下一步合理操作.最终, ...
    
			
    10. 
						
  10. VNC下载，Windows系统下VNC如何下载和安装！
			
    IIS7服务器管理工具是一款VNC viewer的客户端,能够操作VNC,进行日常的功能实现:同时还可进行FTP的日常操作,能够高效地利用FTP的传输功能:也可以批量操作Windows.Linux系统 ...
    
			
    11.