如何实现HTML页面可视化编辑_随笔

<html xmlns="

<head>

<title>直接双击页面元素进行修改的HTML代码</title>

function ShowElement(element)

{

var oldhtml = element.innerHTML //获得元素之前的内容

var newobj = document.createElement('input') //创建一个input元素

newobj.type = 'text' //为newobj元素添加类型

newobj.value=oldhtml

//设置newobj失去焦点的事件

newobj.onblur = function(){

element.innerHTML = this.value ? this.value : oldhtml //当触发时判断newobj的值是否为空，为空则不修改，并返回oldhtml。

}

element.innerHTML = '' //设置元素内容为空

element.appendChild(newobj) //添加子元素

newobj.focus() //获得焦点

}

</script>

</head>

<body>

<dl>

<dd ondblclick="ShowElement(this)">这里是用户名</dd>

<dd ondblclick="ShowElement(this)">这里是个人宣言</dd>

</body>

</html>

导入方法如下：

1、使用embed标签，这个是官方推荐的用法，但是这个官方是Adobe官方，不是W3C官方，现在的HTML标准里还没有这个标签。

2、使用object标签，这个是W3C的规范，在HTML标准里有这个标签，这个标签里面不能使用js。

3、使用iframe标签，这个标签可工作在任何浏览器中。

欢迎分享，转载请注明来源：内存溢出

如何实现HTML页面可视化编辑