62,244
社区成员
发帖
与我相关
我的任务
分享如何实现HTML页面可视化编辑。
如图所示。
网站里有一部分是静态页面数据展示，不常更改，偶尔会去修改下链接和文字。
看很多CMS的后台模版管理，都可以可视化编辑，不知道怎么实现？
就是希望在后台管理时，能使编辑的静态页面上的每个元素点击后弹出修改框进行修改。
...全文
请发表友善的回复…
发表回复
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>
风一样的大叔 2013-11-28
- 打赏
- 举报
这个需求比较难吧，如果要做成楼主的需求，那就要做个vs的工具箱出来了
MR00009 2013-11-28
- 打赏
- 举报
因为想做好后，让不会HTML代码的人也会修改。likevs 2013-11-28
- 打赏
- 举报
我还是喜欢 在线编辑器， 比如FCK ，想咋改就咋改
