如何实现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，选择菜单: windows ->preferences

2，在d出窗口中选择General->Editors ->File Associations

3，在右侧找到*.jsp，然后在下面的列表中选择：MyEclipse Visual JSP Designer

MyEclipse html可视化编辑器如何关闭：

1、打开mye的jsp文件，默认是这样子的，如图

2、找到mye的window--preferences

3、在搜索框搜索file，找到如图画圈处，双击ta

4、要修改jsp文件，就在下图中找到.jsp，点击ta

5、图示中介绍的很详细了，注意看哦

6、将非可视化那个设置为default(默认)，点击ok

7、关闭已经启动的jsp文件，重启ta，看效果

8、此处已经没有可视化编辑窗口了

9、修改html文件，与之类同。

1、打开“我的电脑”，进入到页面以后，双击“属性”，进入到下一个页面。

2、在页面中找到控制面板这个选项，然后双击进入。

3、然后在控制面板的界面中找到“外观和个性化”的这个图标，双击进入下一界面。在新的界面里找到“文件资源管理器选项”的图标，在此图标有两个选项，选择“显示隐藏的文件和文件夹”。单击进入。

4、最后在文件资源管理器选项左上角的菜单一栏里，单击“查看”选项。再从下面的“高级设置”的栏目里下拉，找到“隐藏已知文件类型的扩展名”这一行，把前面的打勾去掉，就可以直接修改html网页内容了。

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

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