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

html-css06

如何实现HTML页面可视化编辑,第1张

<html xmlns="

<head>

<meta http-equiv="Content-Type" content="text/html charset=gb2312" />

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

<script type="text/javascript">

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>

  <dt>用户名</dt>

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

  <dt>个人宣言</dt>

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

</body>

</html>

导入方法如下:

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

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

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

可以呀,html5 和 webgl 技术都可以用于三维可bai视化开发。

Hightopo 提供了一套独特的 WebGL 层抽象,将 Model–View–Presenter (MVP) 的设计模型延伸应用到了 3D 图形领域。

HT是由图扑软件 独立自主研发的,基于HTML5技术标准的前端2D、3D图形开发框架。其提供了从SDK的API组件库到2D 、3D编辑器到矢量图标和三维模型资源库,构成一站式的数据可视化解决方案。

可搜索 图扑软件 申请试用!

更多资料

图扑软件(Hightopo)是由厦门图扑软件科技有限公司独立自主研发,基于HTML5标准技术的Web前端2D和3D图形界面开发框架。非常适用于实时监控系统的界面呈现,广泛应用于电信网络拓扑和设备管理,以及电力、燃气等工业自动化 (HMI/SCADA) 领域。

多年来数百个工业互联网可视化项目实施经验形成了一整套实践证明的高效开发流程和生态体系,可快速实现现代化的、高性能的、跨平台桌面Mouse/移动Touch/虚拟现实VR图形展示效果及交互体验。