基于JQuery的简单富文本编辑器
利用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的简单富文本编辑器的更多相关文章
- 基于jquery的bootstrap在线文本编辑器插件Summernote
Summernote是一个基于jquery的bootstrap超级简单WYSIWYG在线编辑器.Summernote非常的轻量级,大小只有30KB,支持Safari,Chrome,Firefox.Op ...
- 原生JS实现简单富文本编辑器2
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 原生JS实现简单富文本编辑器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 基于jquery的bootstrap在线文本编辑器插件Summernote 简单强大
Summernote是一个基于jquery的bootstrap超级简单WYSIWYG在线编辑器.Summernote非常的轻量级,大小只有30KB,支持Safari,Chrome,Firefox.Op ...
- 基于jquery的bootstrap在线文本编辑器插件Summernote （转）
Summernote是一个基于jquery的bootstrap超级简单WYSIWYG在线编辑器.Summernote非常的轻量级,大小只有30KB,支持Safari,Chrome,Firefox.Op ...
- Jquery的bootstrap在线文本编辑器插件Summernote
http://www.jqcool.net/demo/201407/bootstrap-summernote/ Summernote是一个基于jquery的bootstrap超级简单WYSIWYG在线 ...
- Android - 富文本编辑器
Android富文本编辑器(一):基础知识 目前主流的基于Android富文本开发方式思路如下: 基于TextView图文混排 使用方式: TextView textView = new TextVi ...
- 基于ABP做一个简单的系统——实战篇：4.基于富文本编辑器，Razor模板引擎生成内容并导出Word 填坑记录
起因 需求是这样的,有一种协议需要生成,协议的模板是可配置的,在生成过程中,模板中的内容可以根据约定的标记进行替换(就像mvc的razor模板一样).生成后的内容还需要导出成word或pdf. 常见的 ...
- N个富文本编辑器/基于Web的HTML编辑器
转自:http://www.cnblogs.com/lingyuan/archive/2010/11/15/1877447.html 基于WEB的HTML 编辑器,WYSIWYG所见即所得的编辑器,或 ...
随机推荐
- Android中的成员变量与局部变量
简单说一下吧, note:java中的成员变量就是c++中的全局变量 1.可以在全局范围内使用:局部变量只能在其定义的方法里使用. 2.成员变量可以不赋初值使用,调用时有系统的默认的初值,比如int类 ...
- SVN强制添加备注
1.进入仓库project1/hooks目录,找到pre-commit.tmpl文件 cp pre-commit.tmpl pre-commit 2.编辑pre-commit文件, 将: $SVNLO ...
- jq代替jsdom操作部分
接触js后学习了一些js操作html的方法 js可以配合css完成许多动画和操作.初次接触jquery感觉不是很习惯,毕竟js有了习惯,但是jq还是省去了很多繁琐的操作步骤. 首先使用之前 ...
- vue使用IntersectionObserver实现无限下拉信息流
基于 IntersectionObserver 异步监听方法,实现无线信息流下拉加载, https://developer.mozilla.org/zh-CN/docs/Web/API/Interse ...
- 需求：一个页面中需要用到多个字典数据。用于下拉选项，同时，需要将其保存为json格式。以便于key，value的相互转换。记录在实现过程中踩的坑
本文涉及到的知识: Promise,all()的使用 js处理机制 reduce的用法 map的用法 同步异步 需求: 一个页面中需要用到多个字典数据.用于下拉选项,同时,需要将其保存为json格式. ...
- 分布式项目开发-springmvc.xmll基础配置
基础步骤: 1 包扫描 2 驱动开发 3 视图解析器 4 文件上传解析器 5 拦截器 6 静态资源 <beans xmlns="http://www.springframework.o ...
- java方式实现选择排序
一.基本思想 每一趟找到未排序序列的最小(大)值,把它存放在已排序序列末尾,直到把所有的数据排序完,即是第k趟找到剩余未排序数据的最小(大)值,然后把这个最小(大)值存放在数组的第k(k=1,2... ...
- Rocket - util - Replacement
https://mp.weixin.qq.com/s/zCP7wPuxgQ-r94Tr6BV5iw 简单介绍Replacement的实现. 1. 基本介绍 用于实现Cache替换 ...
- Java实现蓝桥杯凑算式（全排列）
题目6.凑算式 凑算式 B DEF A + - + ------- = 10 C GHI (如果显示有问题,可以参见[图1.jpg]) 这个算式中AI代表19的数字,不同的字母代表不同的数字. 比如: ...
- Java实现 LeetCode 503 下一个更大元素 II
503. 下一个更大元素 II 给定一个循环数组(最后一个元素的下一个元素是数组的第一个元素),输出每个元素的下一个更大元素.数字 x 的下一个更大的元素是按数组遍历顺序,这个数字之后的第一个比它更大 ...