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

MR00009 2013-11-28 03:06:20

如图所示。
网站里有一部分是静态页面数据展示，不常更改，偶尔会去修改下链接和文字。
看很多CMS的后台模版管理，都可以可视化编辑，不知道怎么实现？

就是希望在后台管理时，能使编辑的静态页面上的每个元素点击后弹出修改框进行修改。

...全文

4362 9 打赏收藏转发到动态举报

写回复

用AI写文章

9 条回复

切换为时间正序

请发表友善的回复…

发表回复

likevs 2013-12-02

打赏
举报

我觉得可视化编辑本身就是在线编辑器楼主可以谷歌一下在线编辑器的原理，，提醒一点，它也是使用iframe这玩意的楼主你弄个在线编辑器出来，保证你上面的需求不再是问题

junlinfushi 2013-11-29

打赏
举报

不太懂，帮顶

MR00009 2013-11-29

打赏
举报

求助呀~~自顶~

liuxibei1987 2013-11-28

打赏
举报

以前做过一个类似的。具体做法是自己定义一些需求模块比如布局模块，文字类列表，图片轮播等等，看你的需求了。编辑页面的时候把这些模块拖到页面上生成相对应的标签。因为这些数据还是存在数据库的所以最后一步是在后台解析这些标签生成html页面。当时也是参考了一些cms的做法来做的。

老骥伏枥志在千里o 2013-11-28

打赏
举报

织梦CMS

MR00009 2013-11-28

打赏
举报

现在想到的思路，是读取要修改的HTML页面时，遍历每个元素，只要是A标签，就在后面加一个小图片，小图片点击触发JS事件，弹出窗口修改。之后提交修改时再去掉所有A标签的这个图片，然后提交保存。还没试，不知道可以不。就跟下面这个代码一样：

<html xmlns="http://www.w3.org/1999/xhtml">
<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>