基于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所见即所得的编辑器,或 ...
随机推荐
- 织梦系统dedecms实现列表页双样式,列表样式循环交替变化
有时候做列表页需要交替变换样式,那如何实现列表页双样式呢? 在DeDeCMS里面有这样一个函数,可以循环赋予html代码不同的样式,如下: [field:global function=MagicVa ...
- C#万能排序法
利用下面的方法可以对C#中任何类型的变量.甚至是自定义类型的变量做冒泡排序:原理是使用了C#的Func委托,使用时只要将比较的函数当作参数传进去就能够获取最终的排序结果.
- Java程序员的两项通用能力
工作这几年来,经历了很多.从小白到中级(手机里有一款叫中国象棋的游戏,里面给对弈中电脑水平分为小白.菜鸟.新手.入门.初级.中级.高级.大师.特级大师,编程我暂且按照这样来区分). 学校教给我的是从小 ...
- java class 字节码
java class 字节码 协议: class文件 魔数(Magic):4byte -> 0xCAFEBABE 类似2f3f 版本(Version):4Byte -> 0x0000003 ...
- ketchup服务治理
ketcup git地址:https://github.com/simple-gr/ketchup 服务治理是什么 企业为了确保事情顺利完成而实施的过程,包括最佳实践.架构原则.治理规程.规律以及其 ...
- 中文的csv文件的编码改成utf-8的方法
直奔主题:把包含中文的csv文件的编码改成utf-8的方法: https://stackoverflow.com/questions/191359/how-to-convert-a-file-to-u ...
- BST and Heap详解
BST(Binary Search Tree) 基本特点: 二叉树 集合中的数据具有可比较大小的关键码 数据之间满足BST特性 中序遍历可得到一个递增的数据序列(可作为判断一棵二叉树是否是BST的方法 ...
- DM7的聚簇索引和非聚簇索引(cluster属性)
早期的DM7或者DM8在创建带有主键的表时,默认会加上cluster属性:后期版本则全部为默认非cluster属性. 下面为显示的指定cluster属性: 1.创建主键的为聚集索引. create t ...
- 循序渐进VUE+Element 前端应用开发(6）--- 常规Element 界面组件的使用
在我们开发BS页面的时候,往往需要了解常规界面组件的使用,小到最普通的单文本输入框.多文本框.下拉列表,以及按钮.图片展示.弹出对话框.表单处理.条码二维码等等,本篇随笔基于普通表格业务的展示录入的场 ...
- Rocket - regmapper - RegMapper
https://mp.weixin.qq.com/s/aXxgzWwh6unuztjgyVX0iQ 简单介绍RegMapper的实现. 1. 简单介绍 RegMapper使用指定的输入接口,为一组寄存 ...