javascript实现可编辑样式的文本

发布时间:2025-05-25 05:53:39 发布人:远客网络

你要的是所见即所得HTML编辑器，简单来说需要几个基本步骤：

1，需要一个可以编辑同时又可显效果的编辑框。textarea不行，它只能用来输入纯文本，不能显示颜色、斜体之类的文字样式，就像记事本。

你可以使用iframe来实现，修改iframe的designMode属性使其可以被编辑。

这样你就可以在这个iframe区域里写字了。

2，选中要添加样式的文字。通常我们用WORD编辑一段文字的样式时，一般是先打字，再编辑样式。所以你需要一个选中要处理文本的方法。JS的selection.createRange()可以选中文本，返回一个对象，你可以通过访问该对象的text属性得到被选中的文本。

myEditer.document.designMode='on';

var sel= myEditer.document.selection.createRange();

3，改变被选中文本的样式。selection.createRange()选中文本，返回一个对象，该对象有一个方法execCommand()，可以用来改变被选中文本的样式。

myEditer.document.designMode='on';

var sel= myEditer.document.selection.createRange();

execCommand("fontname","",字体)

execCommand("fontsize","",字号)

取消操作--IE5.0以后可以无限取消

把上面的每个用法用按钮来实现，你就已经完成了一个简单的可视文本编辑器。

<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""">

<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.0 Transitional//EN">就可以了

""是标明该页面以及其css js都符合标准XHTML规范.

<div style="top:35">在不声明的时候是对的`

声明后必须写为<div style="top:35px">

至于你的情况感觉你是否是在火狐和IE不同的浏览器上测的呢?

个人建议如果不是需要特别严谨和规范,不用加""

但加""可以养成良好的编码规范,自己选择咯.

document.createElement()是在对象中创建一个对象，要与appendChild()或 insertBefore()方法联合使用。

其中，appendChild()方法在节点的子节点列表末添加新的子节点。insertBefore()方法在节点的子节点列表任意位置插入新的节点。

//如果原来有“divCell”这个图层，先删除这个图层

var newdiv= document.createElement("divCell");

document.body.appendChild(newdiv);

//通过样式指定该div的位置方式,若是想要自己设置div的位置,这句话必须有,把它注释掉你就可以知道效果拉~试试看

newdiv.style.position="absolute";

//通过样式指定x坐标(随机数0~450)

newdiv.style.top= Math.round(Math.random()*450);

//通过样式指定y坐标(随机数0~700)

newdiv.style.left= Math.round(Math.random()*700);

//通过样式指定背景颜色,,若是背景图片例为 newdiv.style.backgroundImage="url(img/3.jpg)"

newdiv.style.backgroundColor="#ffffcc";

newdiv.style.filter="alpha(opacity=50)";

var my= document.getElementById("divCell");

my.parentNode.removeChild(my);