如何实现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、Notepad

notepad（记事本）是代码编辑器或WINDOWS中的小程序，用于文本编辑，在文字编辑方面与Windows写字板功能相当。是一款开源、小巧、免费的纯文本编辑器。

2、Sublime Text

是一个代码编辑器，也是HTML和散文先进的文本编辑器。Sublime Text是由程序员Jon Skinner于2008年1月份所开发出来，它最初被设计为一个具有丰富扩展功能的Vim。

3、HBuilder

是DCloud（数字天堂）推出的一款支持HTML5的Web开发IDE。 [1] HBuilder的编写用到了Java、C、Web和Ruby。HBuilder本身主体是由Java编写。

4、Adobe Dreamweaver

DW是集网页制作和管理网站于一身的所见即所得网页代码编辑器。利用对 HTML、CSS、JavaScript等内容的支持，设计师和程序员可以在几乎任何地方快速制作和进行网站建设。

5、CoffeeCup HTML Editor

是CoffeeCup Software公司推出的一款体积较小的易用的html代码编辑器。

参考资料来源：百度百科-notepad

参考资料来源：百度百科-Sublime Text

参考资料来源：百度百科-HBuilder

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

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