基于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所见即所得的编辑器,或 ...
随机推荐
- Spring Boot 教程(2) - Mybatis
Spring Boot 教程 - Mybatis 1. 什么是Mybatis? MyBatis 是一款优秀的持久层框架,它支持自定义 SQL.存储过程以及高级映射.MyBatis 免除了几乎所有的 J ...
- 【百度网盘活动】扩容2T+7天会员
https://pan.baidu.com/component/view?id=455 https://pan.baidu.com/union/smartProgramShare?scheme=bdn ...
- MarkDown语法使用(效果版本)
function syntaxHighlighting() { var n = 33; var s = "hello, こんにちは"; console.log(s); } plai ...
- Spring Boot集成Shrio实现权限管理
Spring Boot集成Shrio实现权限管理 项目地址:https://gitee.com/dsxiecn/spring-boot-shiro.git Apache Shiro是一个强大且 ...
- Qt版本中国象棋开发（四）
内容:走法产生 中国象棋基础搜索AI, 极大值,极小值剪枝搜索, 静态估值函数 理论基础: (一)人机博弈走法产生: 先遍历某一方的所有棋子,再遍历整个棋盘,得到每个棋子的所有走棋情况(效率不高,可以 ...
- P1057 传球游戏 - 完美错解
//作者:pb2 博客:https://www.luogu.com.cn/blog/pb2/ 或 http://www.cnblogs.com/p2blog//博客新闻1:"WPS开机自启, ...
- 离散数学 II（最全面的知识点汇总）
离散数学 II(知识点汇总) 目录 离散数学 II(知识点汇总) 代数系统 代数系统定义 例子 二元运算定义 运算及其性质 二元运算的性质 封闭性 可交换性 可结合性 可分配性 吸收律 等幂性 消去律 ...
- Redis详解（十一）------ 过期删除策略和内存淘汰策略
在介绍这篇文章之前,我们先来看如下几个问题: ①.如何设置Redis键的过期时间? ②.设置完一个键的过期时间后,到了这个时间,这个键还能获取到么?假如获取不到那这个键还占据着内存吗? ③.如何设置R ...
- 【MetaPruning】2019-ICCV-MetaPruning Meta Learning for Automatic Neural Network Channel Pruning-论文阅读
MetaPruning 2019-ICCV-MetaPruning Meta Learning for Automatic Neural Network Channel Pruning Zechun ...
- VNC下载，Windows系统下VNC如何下载和安装！
IIS7服务器管理工具是一款VNC viewer的客户端,能够操作VNC,进行日常的功能实现:同时还可进行FTP的日常操作,能够高效地利用FTP的传输功能:也可以批量操作Windows.Linux系统 ...