所见即所得编辑器（js版）

最新推荐文章于 2025-08-15 22:56:20 发布

最新推荐文章于 2025-08-15 22:56:20 发布 · 217 阅读

文章标签：

#javascript #ViewUI

本文介绍了一个简单的HTML编辑器操作方法，包括如何使用JavaScript来控制文本的加粗、斜体及改变文字颜色等功能。通过iframe实现富文本编辑，利用execCommand执行具体的文本格式化命令。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " http://www.w3.org/TR/html4/strict.dtd ">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript">
function init()
{
var contentObj = document.getElementById("content");

//取得 iframe 内的窗口对象。firefox 可以直接用 contentObj.document;
var contentDocObj = contentObj.contentWindow.document;

contentDocObj.designMode = "on";
}

function makeBlob()
{
var contentDocObj = document.getElementById("content").contentWindow.document;

contentDocObj.execCommand("Bold",false,null);
}

function makeItalic()
{
var contentDocObj = document.getElementById("content").contentWindow.document;

contentDocObj.execCommand("Italic",false,null);
}

function changeColor()
{
var contentDocObj = document.getElementById("content").contentWindow.document;

contentDocObj.execCommand('ForeColor',false,'#BBDDCC');
}
</script>
</head>
<body _disibledevent=> <p><button _disibledevent=> <button _disibledevent=> <button _disibledevent=> </p>
<iframe id="content" width="400px" height="200px" style="border:1px solid"></iframe>
</body>
</html>