textarea中显示的代码怎样可视化

ly82713 2011-01-25 11:53:14
我想将表格在多行文本框中可视化显示,
不使用编辑器
...全文
101 7 打赏 收藏 转发到动态 举报
写回复
用AI写文章
7 条回复
切换为时间正序
请发表友善的回复…
发表回复
wcwtitxu 2011-01-27
  • 打赏
  • 举报
回复

<table id="tab" border="1">
<tr><th>id</th><th>name</th><th>group</th></tr>
<tr><td>1</td><td>alvin</td><td>lyn</td></tr>
<tr><td>2</td><td>yisin</td><td>yuan</td></tr>
<tr><td>3</td><td>jeff</td><td>sr</td></tr>
</table>

<textarea id="txt" style="width:600px; height:500px;"></textarea>

<script type="text/javascript">

function $(x) { return document.getElementById(x); }

$('txt').appendChild($('tab'));

</script>
Dogfish 2011-01-25
  • 打赏
  • 举报
回复
yes. 楼上说得是。textarea好像不能实现这个。
ChinaXtHuLang 2011-01-25
  • 打赏
  • 举报
回复
告诉你。这是不可能的。
只能用div把那个滚动条搞出来。
发现现在很多人都喜欢注册N个号码啊。。换起来发贴。真TMD的无聊。
ChinaXtHuLang 2011-01-25
  • 打赏
  • 举报
回复
[Quote=引用 5 楼 ly82713 的回复:]

引用 1 楼 chinaxthulang 的回复:
告诉你。这是不可能的。
只能用div把那个滚动条搞出来。
发现现在很多人都喜欢注册N个号码啊。。换起来发贴。真TMD的无聊。

注意素质
本人只有这一个号
[/Quote]
咿呀。。难道这个不是:
http://topic.csdn.net/u/20110124/18/0220d525-8a45-49aa-b4d4-8c4abfc827b6.html
就算不是你。估计也是和你一伙的。。
ly82713 2011-01-25
  • 打赏
  • 举报
回复
[Quote=引用 1 楼 chinaxthulang 的回复:]
告诉你。这是不可能的。
只能用div把那个滚动条搞出来。
发现现在很多人都喜欢注册N个号码啊。。换起来发贴。真TMD的无聊。
[/Quote]
注意素质
本人只有这一个号
  • 打赏
  • 举报
回复
如果楼主是在想,有些在线编辑器里,可以显示表格。就理解错了。在线编辑器不是用TEXTAREA作容器的。

你现在需要说明白,到底是只需要显示,还是需要在显示的同时还提供编辑功能。如果是后者,只能用编辑器(虽然不是唯一选择,但对你来说肯定是唯一的)。如果是前者,只是显示,那就应该不用TEXTAREA,直接把内容输出就可以。
  • 打赏
  • 举报
回复
和一楼同感。那个问题我们都已经回答过了。执着和执拗是不同的。楼主如果认为这里老鸟的回答都不可靠,再问也是没用的。
xhEditor是一个基于jQuery开发的简单迷你并且高效的可视化XHTML编辑器,基于网络访问并且兼容IE 6.0+,Firefox 3.0+,Opera 9.6+,Chrome 1.0+,Safari 3.22+。 xhEditor is a simple,small,fast WYSWYG(What You See What You Get) XHTML editor based by jQuery. that is webbased and compatible with Internet Explorer 6.0+,Firefox 3.0+,Opera 9.6+,Chrome 1.0+,Safari 3.22+ . xhEditor编辑器官方网站:http://xheditor.com/ Features(特点): Small:初始加载4个文件,包括:1个js(50k)+2个css(10k)+1个图片(5k),总共65k。若js和css文件进行gzip压缩传输,可以进一步缩减为24k左右。即使加上jQuery的24K,总共仅加载48K。 Fast:基于jQuery引擎开发,提供高效的代码执行效率 Simple:简单的调用方式,加一个class属性就能将您的textarea立马变成一个功能丰富的可视化编辑器。 Word:实现Word代码自动检测并清理,提供高效完美的Word代码过滤方案,生成代码最优化精简,但是却不丢失任何细节效果。 UBB:提供完美的UBB可视化编辑解决方案,在您获得安全高效代码存储的同时,又能享受可视化编辑的便捷 Demo(演示): 默认模式:http://xheditor.com/demos/demo01.html 自定义按钮:http://xheditor.com/demos/demo02.html 皮肤选择:http://xheditor.com/demos/demo03.html 其它选项:http://xheditor.com/demos/demo04.html Javascript交互:http://xheditor.com/demos/demo05.html 非utf-8编码网页调用:http://xheditor.com/demos/demo06.html UBB可视化编辑:http://xheditor.com/demos/demo07.html Ajax文件上传:http://xheditor.com/demos/demo08.html 插件扩展:http://xheditor.com/demos/demo09.html iframe调用文件上传:http://xheditor.com/demos/demo10.html 异步加载:http://xheditor.com/demos/demo11.html Interactive(交流) QQ交流群:54432536(验证内容:xheditor) Email:yanis.wang#gmail.com(# = @) ver 1.0.0 rc2 Change(2010-4-1) 添加:添加鼠标悬停延迟自动面板显示功能,提高用户操作效率,延迟时间在初始化时用hoverExecDelay参数设置,单位为毫秒,设置为-1表示关闭此功能 添加:按钮对象添加h参数,h设置为1时代表当前按钮支持鼠标悬停自动显示,此参数同样适用于插件开发 添加:在demo07 UBB演示添加Flv视频演示 添加:集成MSN表情,可在demo07 UBB演示查看显示效果 添加:自带Ajax文件上传添加按Esc取消上传功能 添加:pasteHTML和pasteText函数添加第2个参数:bStart,可以是以下值:留空(覆盖粘贴)、true(粘贴在光标选择区域之前)、false(粘贴在光标选择区域之后) 添加:切换到源代码可视化编辑页面的光标对应源代码相应位置的定位功能 添加:扩展jQuery的标准val函数,使之能够直接读取和设置编辑器的最新值 添加:为方便外部应用的扩展,特将编辑器内部的window和document开放外部调用,变量名:win,doc 添加:扩展textarea的change事件,使之可以触发编辑器的change 添加:UBB演示demo07添加字节数统计演示 添加:内置Ajax上传和showIframeModal接口参数的url地址可以使用“{editorRoot}”内置变量,用来定位编辑器文件夹的页面,例如:{editorRoot}xheditor_plugins/test.html 修正:
已编排格式的换行符和制表符丢失问题的修正 
修正:最终代码提交时没有进行压缩问题的修正 
修正:表情没有插入alt信息问题的修正 
修正:表情分组切换时产生右移1像素位移问题的修正 
修正:当按钮的鼠标悬停样式偶尔失效时,按钮面板会产生右移1像素问题的修正 
修正:带面板的按钮包括插件,快捷键触发或者直接外部调用会产生错误问题的修正 
修正:IE浏览器预览时,会跑至页面尾部问题的修正 
修正:Firefox 3.6从源代码切换回来光标丢失问题的修正 
修正:p和div标签内部的 占位符被清除,造成块标签零高度问题的修正 
修正:IE拖动img大小不更新width和height属性值问题的修正 
修正:IE浏览器下在表格粘贴会位置错乱问题的修正 
修正:IE浏览器下超链接的链接文字,在超链接是“http://”开头的情况下,输入“http://”开头文字无效的修正 
修正:UBB模块style="text-align:*"没转换成[align=*]问题的修正 
修正:IE6下打开面板某些情况下会出现方形白色区域问题的修正 
修正:加载多个编辑器时,用于IE粘贴处理的临时隐藏iframe被重复加载问题的修正 
修正:IE6下某些情况下全屏后再取消全屏导致浏览器崩溃问题的修正 
调整:所有img图片强制添加alt标签,以使代码符合XHTML标准 
调整:对ubb插件进行了适当的调整,以兼容以下不标准情况:无[list]和[/list]结尾的[*]标识 
调整:优化formatXHTML函数,提高解析器工作效率 
调整:API函数setSource由原先的延迟写入,修改为立即写入 
调整:更换为更完善的IE光标丢失问题解决方案 
调整:为兼容w3c标准,原xheditor专有属性初始化模式,变更为直接在class写参数,例:class="xheditor {skin:'o2007blue'}" 
调整:为兼容电驴、快播等特殊URL,超链接、图片、FLASH和多媒体4个按钮的批量插入分隔符,由原先的“|”变更为制表符(\t) 
调整:编辑器初始化代码由原先的xheditor(true,参数)精简为xheditor(参数)
编辑器 KindEditor 4.0.4 KindEditor 是一套开源的在线HTML编辑器,主要用于让用户在网站上获得所见即所得编辑效果,开发人员可以用 KindEditor 把传统的多行文本输入框(textarea)替换为可视化的富文本输入框。 KindEditor 使用 JavaScript 编写,可以无缝地与 Java、.NET、PHP、ASP 等程序集成,比较适合在 CMS、商城、论坛、博客、Wiki、电子邮件等互联网应用上使用 主要特点 快速:体积小,加载速度快 开源:开放源代码,高水平,高品质 底层:内置自定义 DOM 类库,精确操作 DOM 扩展:基于插件的设计,所有功能都是插件,可根据需求增减功能 风格:修改编辑器风格非常容易,只需修改一个 CSS 文件 兼容:支持大部分主流浏览器,比如 IE、Firefox、Safari、Chrome、Opera ver 4.0.4 (2011-12-11) 新增: 阿拉伯语语言包。 改善: 上传文件时显示上传提示。 改善: JSON解析失败时,通过弹出层显示服务器返回的HTML页面。 改善: [IE] 弹出框支持阴影效果。 Bugfix: 浏览器使用有些插件时,上传文件提示不正确。 Bugfix: 单独调用图片功能时,点击重置大小图标报错。 Bugfix: 设置了参数filterMode:true,分页符就会丢失样式。 Bugfix: [FF] 撤销全屏后页面会滚动到顶部。 Bugfix: [ASP] demo.asp没有指定编码,导致提交后HTML出现乱码。 Bugfix: 单独调用上传按钮时,无法与旁边输入框对齐。 Bugfix: [WEBKIT] 在图片、视频、flash等前一个光标处右键,在不选节点的状态下也能弹出修改属性。 Bugfix: [IE] 编辑器无内容,加粗,切换到代码模式,再回到可视化模式,加粗,JS报错。 Bugfix: [IE] 插入<input value=”abc"def”/>,会自动变为 <input value=”abc”def”/>。 Bugfix: [WEBKIT] 点击粗体后丢失光标。 Bugfix: [OPERA] 切换到代码模式后不显示部分工具栏图标。 Bugfix: del标签被定义在块级元素里,导致格式化HTML时自动换行。 Bugfix: 开启过滤模式,获取HTML时删除线被过滤。 Bugfix: [IE] 两张相邻图片添加超级链接,修改其一个链接,另外一个链接也会被修改。 Bugfix: 内嵌脚本的小于号会被转义导致脚本错误。 Bugfix: 分页符在不同浏览器下生成的HTML代码不一致。 Bugfix: [IE6-7] 插入URL里有大写字符的图片,右键点击选择图片属性,更改图片属性后图片不能显示
网上只能找到tinyeditor的英文版本,对于国内用户还是不太方便,自己动手汉化了一下,并且将编码改成了gbk,希望可以帮助有需要的朋友。 下面是关于tinyeditor的介绍(摘自网络): 前几日曾给大家介绍过一款国产的xhtml编辑器,今天要给大家推荐的TinyEditor,是国外知名Web设计博客leigeber.com刚发布的一款简洁且易用的html所见即所得编辑器。 TinyEditor有以下特点 •它使用Javascript编写,不依赖于其它类库 •这是一个轻量级的编辑器,要调用的文件仅有8kb •它可以处理大多数的html格式化需求,并且内置的功能使得生成的标记尽量简洁 •编辑器用到的小图标使用了CSS Sprite技术,减少了http连接 •在主流浏览器测试通过 •可个人或商业项目使用,遵循creative commons license 下面来看如何使用: 1,在网页文件引用TinyEditor提供的js文件和css文件 2,在网页文件添加编辑器所需要的标签,其实就是个textarea,如下 <textarea id="input" height:200px"></textarea> 注意textarea定义的长宽也就是编辑器的大小。 3,通过脚本初始化编辑器,并配置各种参数,如下: new TINY.editor.edit('editor',{ id:'input', // (必须)上面第二步定义的textarea的id width:584, // (选填) 编辑器宽度 height:175, // (选填) 编辑器高度 cssclass:'te', // (选填) 编辑器的class,用来通过css控制样式 controlclass:'tecontrol', // (选填) 编辑器上按钮的class rowclass:'teheader', // (选填) 编辑器按钮行的class dividerclass:'tedivider', // (选填) 编辑器按钮间分割线的样式 controls:['bold', 'italic', 'underline', 'strikethrough', '|', 'subscript', 'superscript', '|', 'orderedlist', 'unorderedlist', '|' ,'outdent' ,'indent', '|', 'leftalign', 'centeralign', 'rightalign', 'blockjustify', '|', 'unformat', '|', 'undo', 'redo', 'n', 'font', 'size', 'style', '|', 'image', 'hr', 'link', 'unlink', '|', 'cut', 'copy', 'paste', 'print'], // (必须) 要根据需要在编辑器上添加按钮控件, 其'|'代表功能按钮间的竖分割线,'n'代表按钮行间的分割线 footer:true, // (选填) 是否显示编辑器底部 fonts:['Verdana','Arial','Georgia','Trebuchet MS'], // (选填) 编辑器可选择的字体 xhtml:true, // (选填) 编辑器生成xhtml还是html标记 cssfile:'style.css', // (选填) 要为编辑器附加的外部css文件 content:'starting content', // (选填) 设置编辑器编辑区域的初始内容 css:'body{background-color:#ccc}', // (选填) 设置编辑器编辑区域背景 bodyid:'editor', // (选填) 设置编辑区域ID footerclass:'tefooter', // (选填) 设置编辑器底部class toggle:{text:'源代码',activetext:'可视化',cssclass:'toggle'}, // (选填) 设置源代码浏览切换文字,及切换按钮的class resize:{cssclass:'resize'} // (选填) 设置编辑器大小调整按钮的class }); 可以说的上是高度可配置了,而且配置项都比较清晰。 在TinyEditor的实际应用,需要注意的是,在提交编辑器内容之前,一定调用instance.post()函数,以确保编辑区域最新的可视化内容转化为标记文本。 查看示例:http://sandbox.leigeber.com/tinyeditor/

28,390

社区成员

发帖
与我相关
我的任务
社区描述
ASP即Active Server Pages,是Microsoft公司开发的服务器端脚本环境。
社区管理员
  • ASP
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

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