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

MR00009 2013-11-28 03:06:20


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

就是希望在后台管理时,能使编辑的静态页面上的每个元素点击后弹出修改框进行修改。
...全文
4360 9 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
9 条回复
切换为时间正序
请发表友善的回复…
发表回复
likevs 2013-12-02
  • 打赏
  • 举报
回复
我觉得可视化编辑本身就是 在线编辑器 楼主可以谷歌一下 在线编辑器的原理,,提醒一点,它也是使用iframe这玩意的 楼主你弄个 在线编辑器 出来,保证你上面的需求不再是问题
junlinfushi 2013-11-29
  • 打赏
  • 举报
回复
不太懂,帮顶
MR00009 2013-11-29
  • 打赏
  • 举报
回复
求助呀~~自顶~
liuxibei1987 2013-11-28
  • 打赏
  • 举报
回复
以前做过一个类似的。 具体做法是自己定义一些需求模块 比如布局模块,文字类列表,图片轮播等等,看你的需求了。 编辑页面的时候把这些模块拖到页面上生成相对应的标签。 因为这些数据还是存在数据库的 所以最后一步是在后台解析这些标签生成html页面。 当时也是参考了一些cms的做法来做的。
  • 打赏
  • 举报
回复
织梦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 ,想咋改就咋改

62,244

社区成员

发帖
与我相关
我的任务
社区描述
.NET技术交流专区
javascript云原生 企业社区
社区管理员
  • ASP.NET
  • .Net开发者社区
  • R小R
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告

.NET 社区是一个围绕开源 .NET 的开放、热情、创新、包容的技术社区。社区致力于为广大 .NET 爱好者提供一个良好的知识共享、协同互助的 .NET 技术交流环境。我们尊重不同意见,支持健康理性的辩论和互动,反对歧视和攻击。

希望和大家一起共同营造一个活跃、友好的社区氛围。

试试用AI创作助手写篇文章吧