html+js富文本
rtf是Rich Text Format的缩写,意即多文本格式。这是一种 类似DOC格式(Word文档) 的文件,有很好的兼容性,使用Windows“附件”中的“写字板”就能打开并进行编辑。
div方式实现简单富文本
依赖方法是doucument.execCommand()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="button" value="剪切" id="btn1" onclick="cut()">
<input type="button" value="删除" id="btn2" onclick="del()">
<input type="button" value="字体+" id="btn3" onclick="big()">
<input type="button" value="字体-" id="btn4" onclick="small()">
<input type="button" value="插入P" id="btn5" onclick="insertP()">
<input type="button" value="插入图片" id="btn6" onclick="insertPic()">
//contenteditable="true"是实现富文本的关键
<div class="box" contenteditable="true" style="width:500px;height:500px;border:1px solid #333"></div>
</body>
<script>
function cut() {
document.execCommand("cut", true, null)
}
function del() {
document.execCommand("delete", false, null)
}
function big() {
document.execCommand("fontsize", false, 7)
}
function small() {
document.execCommand("fontsize", false, 1)
}
function insertP() {
document.execCommand("insertparagraph", false, null)
}
function insertPic() {
document.execCommand("insertimage", false,
"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1597916349459&di=7197367ba8f42a954ea72f9358ece593&imgtype=0&src=http%3A%2F%2Ft8.baidu.com%2Fit%2Fu%3D1484500186%2C1503043093%26fm%3D79%26app%3D86%26f%3DJPEG%3Fw%3D1280%26h%3D853"
)
}
</script>
</html>
executeCommand常用命令值
3个参数(“命令值”,是否显示对话框,修改值)
命令值 | 第三个参数 | 说明 |
---|---|---|
backcolor | 颜色字串(例:#333) | 设置文档背景颜色 |
bold | null | 将选中文字设置为粗体 |
italic | null | 将选中的文字转换为斜体 |
undeline | null | 为选中的文字添加下划线 |
selectall | null | 选中文档中所有文本 |
fontname | 字体名称 | 将选中的文字转换为指定字体 |
fontsize | 1~7 | 将选中文字转换为指定大小 |
fontcolor | 颜色字串 | 将选中的文字转换为指定颜色 |
copy | null | 将选中的文字复制到剪贴板 |
paste | null | 粘贴剪贴板内的文字 |
cut | null | 剪切文本到剪贴板 |
delete | null | 删除所选文字或删除光标前一个文字(类似于键盘delete键) |
indent | null | 缩进文本 |
outdent | null | 减少缩进,凸排文本 |
formatblock | 要包围当前文本块的html标签(例:<h2></h2> ) | 使用指定的html标签格式化选择文字块 |
removeformat | null | 移除文字块的块几格式,撤销formatblock命令 |
insertthorizontalrule | null | 在插入字符处插入一个<hr> 元素 |
insertorderadlist | null | 在插入字符处插入一个<ol> 元素 |
insertunorderedlist | null | 在插入字符处插入一个<ul> 元素 |
insertparagraph | null | 在插入字符处插入一个<p> 元素 |
insertimage | 图像的url | 在插入字符处插入一个图像 |
createlink | url字符串 | 将选择文本转成链接,指向url |
unlink | null | 移除文本链接,撤销createlink命令操作 |