html+js富文本

最新推荐文章于 2024-06-26 09:32:40 发布

Juliet_xmj

最新推荐文章于 2024-06-26 09:32:40 发布

阅读量1.6k

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/Juliet_xmj/article/details/108123976

版权

js 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

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命令操作

Juliet_xmj

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
html+js富文本

html+js富文本rtf是Rich Text Format的缩写，意即多文本格式。这是一种类似DOC格式（Word文档）的文件，有很好的兼容性，使用Windows“附件”中的“写字板”就能打开并进行编辑。div方式实现简单富文本依赖方法是doucument.execCommand()<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta nam
复制链接

扫一扫

专栏目录