利用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. CF916C
			
    题目链接:http://codeforces.com/contest/916/problem/C 题目大意: 用\(n\)个结点,\(m\)条边(每条边的权值范围为[1, 109]) 构造出一个无向带 ...
    
			
    2. 
						
  2. POJ1984
			
    题目链接:https://vjudge.net/problem/POJ-1984 解题思路:并查集+离线操作. 用dx[ ]和dy[ ]两个数组存储某点相对于该点所在集合的源头的方位,因此不难推知dx ...
    
			
    3. 
						
  3. 转载 配置vue项目
			
    Vue作为前端三大框架之一截至到目前在github上以收获44,873颗星,足以说明其以悄然成为主流.16年10月Vue发布了2.x版本,经过了一段时间的摸索和看官方的教程和api,才了解到2.0版本 ...
    
			
    4. 
						
  4. Kivy中ActionBar控件的使用
			
    这个控件可以作为导航栏来使用,效果非常好. 1. ActionBar包含的组件 ActionBar中需要一个ActionView作为容器来存放其他控件,比如:ActionPrevious.Action ...
    
			
    5. 
						
  5. 上位机开发之三菱FX3U以太网通信实践
			
    上次跟大家介绍了一下上位机与三菱Q系列PLC通信的案例,大家可以通过点击这篇文章:上位机开发之三菱Q系列PLC通信实践(←戳这里) 今天以三菱FX3U PLC为例,跟大家介绍一下,如何实现上位机与其之 ...
    
			
    6. 
						
  6. 小心 HttpClient 中的 FormUrlEncodeContent 的 bug
			
    小心 HttpClient 中的 FormUrlEncodeContent 的 bug Intro 最近发现活动室预约项目里的上传图片有时候会有问题,周末找时间测试了一下,发现小图片的上传没问题,大图 ...
    
			
    7. 
						
  7. 网络编程TCP/IP详解
			
    网络编程TCP/IP详解 1. 网络通信 中继器:信号放大器 集线器(hub):是中继器的一种形式,区别在于集线器能够提供多端口服务,多口中继器,每个数据包的发送都是以广播的形式进行的,容易阻塞网络. ...
    
			
    8. 
						
  8. jchdl - GSL值的传播
			
    https://mp.weixin.qq.com/s/jgMljoca-Cwe9x0NaTLzZg   GSL的拓扑模型是线和节点连接的模型,值的传播,即是值在线和节点之间传播和转化的过程.   值的 ...
    
			
    9. 
						
  9. 50个SQL语句(MySQL版) 问题十六
			
    --------------------------表结构-------------------------- student(StuId,StuName,StuAge,StuSex) 学生表 tea ...
    
			
    10. 
						
  10. 分享按钮（QQ，微信，微博等）移入动画效果
			
    ps:最近写的很多博客都是在以前在项目里写过的,之所以现在写出来,最大的目的就是希望自己以后用到的时候比较容易找,而且现在再写一遍,有助于加深印象! 很简单的效果,说先实现方式: 1.图标来自 阿里巴 ...
    
			
    11.