1. 利用jQuery实现最简单的编辑器
  2.  
  3. 我试了很多种方法，目前最快捷能够实现及其简单的编辑可以使用 document.execCommand("ForeColor", "false", sColor);就能实现。
    但是看到 MDN web文档上提示该方法已经废弃。这个方法并不是很好，有时间会去选择更好的方法。
  1.  
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title></title>
  6.     </head>
  7.     <style type="text/css">
  8.         .editor_div {
  9.             border: 1px solid #ccc;
  10.         }
  11.  
  12.         .btn_div {
  13.             border-bottom: 1px solid #ccc;
  14.             height: 28px;
  15.         }
  16.  
  17.         .span_btn {
  18.             -webkit-user-select: none;
  19.             -moz-user-select: none;
  20.             -ms-user-select: none;
  21.             user-select: none;
  22.             font-size: 21px;
  23.             font-weight: 400;
  24.             display: inline-block;
  25.             margin-left: 21px;
  26.             cursor: pointer;
  27.             position: relative;
  28.         }
  29.  
  30.         .editor_content {
  31.             height: 200px;
  32.             width: 100%;
  33.             overflow: hidden;
  34.         }
  35.  
  36.         .header_con {
  37.             position: absolute;
  38.             top: 28px;
  39.             left: 0;
  40.             background-color: #e8e8e8;
  41.             display: none;
  42.             width: 50px;
  43.             text-align: center;
  44.         }
  45.  
  46.         .header_hcon {
  47.             height: 19px;
  48.             width: 50px;
  49.             border-top: 1px solid #ccc;
  50.             display: inline-block;
  51.         }
  52.     </style>
  53.     <body>
  54.         <div class="editor_div">
  55.             <div class="btn_div">
  56.                 <span class="span_btn" onclick="tobebold()" id="tobebold">加粗B</span>
  57.                 <span class="span_btn" onclick="showchildren(this)">标签H
  58.                     <span class="header_con">
  59.                         <span class="header_hcon" onclick="clcikthis(this)" data-type="H5">H5</span>
  60.                         <span class="header_hcon" onclick="clcikthis(this)" data-type="H4">H4</span>
  61.                         <span class="header_hcon" onclick="clcikthis(this)" data-type="H3">H3</span>
  62.                         <span class="header_hcon" onclick="clcikthis(this)" data-type="H2">H2</span>
  63.                         <span class="header_hcon" onclick="clcikthis(this)" data-type="H1">H1</span>
  64.                         <span class="header_hcon" onclick="clcikthis(this)" data-type="p">正文</span>
  65.                     </span>
  66.                 </span>
  67.                 <span class="span_btn" onclick="showchildren(this)">颜色C
  68.                     <span class="header_con">
  69.                         <span class="header_hcon" onclick="changecolor(this)">red</span>
  70.                         <span class="header_hcon" onclick="changecolor(this)">blue</span>
  71.                         <span class="header_hcon" onclick="changecolor(this)">pink</span>
  72.                         <span class="header_hcon" onclick="changecolor(this)">gold</span>
  73.                     </span>
  74.                 </span>
  75.             </div>
  76.             <div class="editor_content" id="editor_content" tabindex="0" contenteditable="true">
  77.  
  78.             </div>
  79.         </div>
  80.     </body>
  81.     <script src="./jquery.min.js" type="text/javascript" charset="utf-8"></script>
  82.     <script type="text/javascript">
  83.         if (window.getSelection) { //一般浏览器
  84.             userSelection = window.getSelection();
  85.         } else if (document.selection) { //IE浏览器、Opera
  86.             userSelection = document.selection.createRange();
  87.         }
  88.         var oldHtml = ""
  89.         var oldStr = ""
  90.         var newHtml = ""
  91.         var newStr = ""
  92.         const tobebold = () => {
  93.             document.execCommand("Bold", "false", null);
  94.         }
  95.  
  96.         const showchildren = (e) => {
  97.             $(e).children("span").css({
  98.                 "display": "inline-block"
  99.             })
  100.         }
  101.         const clcikthis = (e) => {
  102.             let hheader = $(e).attr("data-type")
  103.             if (userSelection.toString().length != 0) {
  104.                 document.execCommand("FormatBlock", "false", hheader);
  105.             }
  106.             event.stopPropagation();
  107.             $(e).parent().hide()
  108.             return false
  109.         }
  110.         const changecolor = (e) => {
  111.             let sColor = $(e).html().toLowerCase()
  112.             document.execCommand("ForeColor", "false", sColor);
  113.             event.stopPropagation();
  114.             $(e).parent().hide()
  115.             return false
  116.         }
  117.         // 点击后除指定位置外其他地方都会隐藏
  118.         $("body").click(function(e) {
  119.             if (!$(e.target).closest(".span_btn").length) {
  120.                 $(".header_con").hide();
  121.             }
  122.         });
  123.  
  124.     </script>
  125. </html>

图片效果如下

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

  1. 基于jquery的bootstrap在线文本编辑器插件Summernote

    Summernote是一个基于jquery的bootstrap超级简单WYSIWYG在线编辑器.Summernote非常的轻量级,大小只有30KB,支持Safari,Chrome,Firefox.Op ...

  2. 原生JS实现简单富文本编辑器2

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. 原生JS实现简单富文本编辑器

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. 基于jquery的bootstrap在线文本编辑器插件Summernote 简单强大

    Summernote是一个基于jquery的bootstrap超级简单WYSIWYG在线编辑器.Summernote非常的轻量级,大小只有30KB,支持Safari,Chrome,Firefox.Op ...

  5. 基于jquery的bootstrap在线文本编辑器插件Summernote （转）

    Summernote是一个基于jquery的bootstrap超级简单WYSIWYG在线编辑器.Summernote非常的轻量级,大小只有30KB,支持Safari,Chrome,Firefox.Op ...

  6. Jquery的bootstrap在线文本编辑器插件Summernote

    http://www.jqcool.net/demo/201407/bootstrap-summernote/ Summernote是一个基于jquery的bootstrap超级简单WYSIWYG在线 ...

  7. Android - 富文本编辑器

    Android富文本编辑器(一):基础知识 目前主流的基于Android富文本开发方式思路如下: 基于TextView图文混排 使用方式: TextView textView = new TextVi ...

  8. 基于ABP做一个简单的系统——实战篇：4.基于富文本编辑器，Razor模板引擎生成内容并导出Word 填坑记录

    起因 需求是这样的,有一种协议需要生成,协议的模板是可配置的,在生成过程中,模板中的内容可以根据约定的标记进行替换(就像mvc的razor模板一样).生成后的内容还需要导出成word或pdf. 常见的 ...

  9. N个富文本编辑器/基于Web的HTML编辑器

    转自:http://www.cnblogs.com/lingyuan/archive/2010/11/15/1877447.html 基于WEB的HTML 编辑器,WYSIWYG所见即所得的编辑器,或 ...

随机推荐

  1. EL表达式用法---查询博客

    jsp脚本:<%=request.getAttribute(name)%>EL表达式替代上面的脚本:${requestScope.name} 使用EL最主要的作用是获得四大域中的数据,格式 ...

  2. 特效 css3 渐变背景框

    .box{ 子级 position: relative; width: 300px; height: 400px; display: flex; justify-content: center; al ...

  3. 5.CSS的引入方式

    CSS的三种样式表 按照CSS样式书写的位置(或者引入的方式),CSS的样式表可以分为三大类: 1.行内样式表(行内式) <div style="color:red: font-siz ...

  4. 解码问题--leetcode:91 (2019商汤笔试)

    题目:有一种将字母编码成数字的方式:'a'->1, 'b->2', ... , 'z->26'. 现在给一串数字,给出有多少种可能的译码结果. 想法: 该题就是动态规划问题,建议在写 ...

  5. python argparse总结

    python2.7废除optparse,原因:http://code.google.com/p/argparse/ 说了半天好像是重开了个小号练级 抓紧写下来一会又得忘了 用法: import arg ...

  6. k-means聚类分析 python 代码实现(不使用现成聚类库)

    一.实验目标 1.使用 K-means 模型进行聚类,尝试使用不同的类别个数 K,并分析聚类结果. ​ 2.按照 8:2 的比例随机将数据划分为训练集和测试集,至少尝试 3 个不同的 K 值,并画出不 ...

  7. 对象调用 push 方法

    /* Array.prototype.push = function A(val) { this[this.length] = val; // =>this.length 在原来的基础上加1 r ...

  8. DOM表单，下拉菜单和表格

    DOM访问表单控件的常用属性和方法如下: action 返回该表单的提交地址 elements 返回表单内全部表单控件所组成的数组,通过数组可以访问表单内的任何表单控件. length 返回表单内表单 ...

  9. MySQL 高级—— Join 、索引 、优化

    个人博客网:https://wushaopei.github.io/    (你想要这里多有) 一.Join 查询 1.SQL执行顺序(一般情况下) 1.1 手写顺序: SELECT DISTINCT ...

  10. Java实现 LeetCode 828 统计子串中的唯一字符（暴力+转数组）

    828. 统计子串中的唯一字符 我们定义了一个函数 countUniqueChars(s) 来统计字符串 s 中的唯一字符,并返回唯一字符的个数. 例如:s = "LEETCODE" ...