W3C的那个所见即所得是怎么做呢？

叫我 Teacher 周 2014-10-23 12:19:13

公司也要求做一个类似的功能

左边是html，右边是显示的界面

编辑了html，点【预览】，右边显示效果

http://www.w3schools.com/html/tryit.asp?filename=tryhtml_intro

类似于这样的

求助思路

...全文

144 13 打赏收藏转发到动态举报

写回复

用AI写文章

13 条回复

切换为时间正序

请发表友善的回复…

发表回复

feiyun0112 2014-10-23

打赏
举报

提交的form有个属性target
<form id="tryitform" onsubmit="validateForm();" name="tryitform" target="view"

等于右边的iframe的name
<iframe id="iframeResult" class="result_output" frameborder="0" src="tryhtml_intro.htm" name="view">

qzyf1992 2014-10-23

打赏
举报

右边html发错了是这样的

qzyf1992 2014-10-23

打赏
举报

右键审查元素经过我的分析内容html是


  <textarea autocomplete="off" class="code_input" id="textareaCode" wrap="logical" rows="30" cols="50"><!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>
</textarea>

然而显示html内容页面也就是右边的页面是


<textarea autocomplete="off" class="code_input" id="textareaCode" wrap="logical" rows="30" cols="50"><!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>
</textarea>

我不懂电脑 2014-10-23

打赏
举报

右边放个webbrowser点的时候加载你的页面就可以了

叫我 Teacher 周 2014-10-23

打赏
举报

引用 8 楼 sp1234 的回复:

想知道什么是“所见即所得”的开发工具，你可以学习一下 Blend 等专业的开发工具。许多年前，我们开发过一个让用户用鼠标拖拉就能生成企业网站的工具。用户打开一个“白板”网页，然后从工具箱里把企业自己的“栏目”拖到网页上，从工具箱中搜索到文章再拖到网页上，从工具箱里查询出照片然后拖到网页上，从工具箱里把“栏目导航”拖到网页上，把“文章评论”拖到网页上，等等，顶多再简单地设置几个属性，用户自己就能开发企业网站了。每一个企业里的党委办公室的文秘、或者车间工人人员，都可以向企业的网站群里边添加自己的网站。网站改版其实就跟出一版报纸（例如人民日报）差不多。这种给我们这些傻瓜用的、不需要写 html 代码的开发工具，才叫做所见即所得的开发工具。

恍然大悟，不过目前没有时间做这么细致……

以专业开发人员为伍 2014-10-23

打赏
举报

引用 9 楼 zhanxueguang 的回复:


<title>所见即所得</title>
<style type="text/css">
	.box
	{
		width:500px; 
		height:300px; 
		border-style:solid; 
		border-color:#000; 
		border-width:1px;
	}
</style>
</head>
	<textarea id="code" class="box" onkeyup="coding();"></textarea>
	<div id="show" class="box"></div>
    
	<script type="text/javascript">
    	function coding(){
			document.getElementById("show").innerHTML = document.getElementById("code").value;
			}
    </script>
<body>

人家的页面上有自己的css、自己的id分配，甚至自己的脚本，等等。不能跟宿主页面纠结在一起。

以专业开发人员为伍 2014-10-23

打赏
举报

而且大部分 html 在线编辑器也支持简单的类似 Word 那样的文本编辑。它的模式也算是“所见即所得”De。你们的公司，才想到让用户自己从网站上敲入代码的方式，叫做“所见即所得”。这个缺乏创意啊。应该有更好的想法！

Rajesh_James 2014-10-23

打赏
举报

楼主根据自己的需求进行修改吧，不知道你要的是不是这个

Rajesh_James 2014-10-23

打赏
举报


<title>所见即所得</title>
<style type="text/css">
	.box
	{
		width:500px; 
		height:300px; 
		border-style:solid; 
		border-color:#000; 
		border-width:1px;
	}
</style>
</head>
	<textarea id="code" class="box" onkeyup="coding();"></textarea>
	<div id="show" class="box"></div>
    
	<script type="text/javascript">
    	function coding(){
			document.getElementById("show").innerHTML = document.getElementById("code").value;
			}
    </script>
<body>

以专业开发人员为伍 2014-10-23

打赏
举报

想知道什么是“所见即所得”的开发工具，你可以学习一下 Blend 等专业的开发工具。许多年前，我们开发过一个让用户用鼠标拖拉就能生成企业网站的工具。用户打开一个“白板”网页，然后从工具箱里把企业自己的“栏目”拖到网页上，从工具箱中搜索到文章再拖到网页上，从工具箱里查询出照片然后拖到网页上，从工具箱里把“栏目导航”拖到网页上，把“文章评论”拖到网页上，等等，顶多再简单地设置几个属性，用户自己就能开发企业网站了。每一个企业里的党委办公室的文秘、或者车间工人人员，都可以向企业的网站群里边添加自己的网站。网站改版其实就跟出一版报纸（例如人民日报）差不多。这种给我们这些傻瓜用的、不需要写 html 代码的开发工具，才叫做所见即所得的开发工具。

以专业开发人员为伍 2014-10-23

打赏
举报

那可不是所见即所得，那充其量叫做“预览”。就是两个 IFrame，一个是 html 编辑器，另一个是页面就行了。所见即所得，是wpf/winform/silverlight/asp.net webform的设计器的那种（虽然asp.net设计器做的不太好），是美工板，使用鼠标拖拉就能画界面布局，才叫做“所见即所得”。

叫我 Teacher 周 2014-10-23