当然不得不说这是一个被问烂的问题,可是被问烂那说明这个问题经常出现。度娘的结果却是是五花八门,有采用类似Fckeditor ,Ckeditor,和百度的 Ueditor. 这样的网页文本格式编辑器插件的,我也用过一个,不过对于小型项目来说太烦,把js的包加载进去启动项目时非常耗时;当然也有很多就用textarea的,还有用div的contentable属性让div可以编辑的。。。不能说错,但用在自己身上总有不对的地方。之后的还得自己慢慢调试!
首先解释一下在不同的区域他们现实的不同格式吧。当然本篇先仅讨论“回车”这个字符。
1.在<textarea>中,“回车”(实际意义是换行)这一字符是"\n",如果存在”<br/>“,在其中也显示为”<br/>“,我猜想”\r\n“也显示为换行;
2.在mysql数据库中可以存放很多种"回车",但是“回车”代表了不同的含义,一个是换行,一个就是回车本身。如果你将带有换行的文本复制到数据库中,你可以明显的看出是有换行的一个特点的。
,在数据库中换行是“\r\n”,当然你存的时候是,取出来也是。
3.html中“回车“,是换行符”<br/>"。
4.在td中的title中,如果设置了值,它的换行是“\r\n”,回车是“\n”
5.最后的重点是java后台:
在传到后台的时候呢,我用一个输出ASCII码的方法输出了“回车”,然而并没有什么卵用。但是后来我发现不是后台无法输出的问题,而是在前台传递参数时用的是get方式,如果使用post,这些格式是都可以传过来的。再次尝试发现“回车”这个字符在java后台中输出是一个“”+“13”+“10"。对照ASCII码表,由于一些符号是不允许输出的所以“”代表了空,"13"代表的是回车符,"10"代表的是换行符。所以显而易见,如果使用post方式,传到后台,存入数据库都没有问题。但是在html中就有问题。
解决方法就很明显:
最简单的方式就是用post传递方式,在textarea不会存在问题,但是在html中显示会存在没有换行的问题。
空格也将会只显示一个" ",度娘的结果很少说用post传参,只有一些大神直接说了句,”传递的是什么,后台拿到的就是什么呀“,回答了等于没回答。。。。。PS:后补部分:之后发现,只要在html中显示的地方,只要将数据库中的数据直接放在<pre></pre>标签中。即可显示正常。
pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。
<pre> 标签的一个常见应用就是用来表示计算机的源代码。
提示:制表符(tab)在 <pre> 标签定义的块当中可以起到应有的作用,每个制表符占据 8 个字符的位置。但是我们不推荐使用它,因为在不同的浏览器中,Tab 的实现各不相同。在用 <pre> 标签格式化的文档段中使用空格,可以确保文本正确的水平位置。
提示:如果您希望使用 <pre> 标签来定义计算机源代码,比如 HTML 源代码,请使用符号实体来表示特殊字符,比如 "<" 代表 "<",">" 代表 ">","&" 代表 "&"。
或者采用评论区的网友给的:在显示时,给显示数据套上一个<div>,然后设置style的white-space: pre-wrap。效果类似与上述的pre标签,非常感谢。
这里再补充一下,由于回车是一个换行的标识,那么数据在标签中也必须应该有自动换行的效果,而不会撑爆一个div或者其他容器,这里就要对容器设置style中的width:600px;,同时还有WORD-WRAP: break-word;这个属性值,那么数据到达宽度长度时就会自动换行,测试时建议不要使用连续的字母和数字,因为没有空格,就被认定为是一个单词,这样 换行就会出现 提前换行的效果。这也是我们不愿意看到的。
我觉得最好的方式是修改格式,存入数据库时,"\n"换行全部替换为"<br/>",这样的好处是,如果有其他人做前台显示时,放在html中就可以直接显示,不会出现格式问题。
修改显示方式也很麻烦,如下:
1.在前台用get方式传递回车时,需要把content内容中的“\n”替换为“<br/>”或者"<br>";
while(-1!=content.indexOf("\n")) { content = content.replace("\n","<br/>"); <}
2.在前台需要编辑修改content内容时,后台从数据中取后要将相反操作,即将“<br/>”或者"<br>"替换为”\n”:
content =content.replace("<br/>", "\n");
content同样放在<textarea>中。
3.当然也可以放入<textarea>中显示,但是最好设置<textarea>的disable为disable;
4.如果是在html中显示的话,那么就不需要做任何处理,直接获取就可以了,其中的"<br/>"在html中就自然的是换行的行为。
写的比较仓促,也许有很多错误,或者错乱的地方。发现有问题可以留言给我。。。。工作如狗啊。后期还会修改。
相关推荐
编辑框中可以识别的字符,在普通的标签里面没办法识别到,所以要转换成可以识别的<br> 方法1 string.replace(/(rn|n|r)/gm, ) 然后再用v-html=转换之后的string,就可以正常展示换行了 方法2 第二种方
<textarea cols="每行中的字符数" rows="显示的行数"> 文本内容 </textarea> 描述 <textarea> 标记定义多行的文本输入控件。有两个比较重要的属性cols和rows, 语法格式 说明 属性 值 描述 cols number 规定文本区内...
83、<textarea> 定义 textarea。 84、<tfoot> 定义表格的脚注。 85、<th> 定义表头。 86、<thead> 定义表头。 87、<time> 定义日期/时间。 88、<title> 定义文档的标题。 89、<tr> 定义表格行。 90、<ul> 定义无序...
<textarea cols="每行中的字符数" rows="显示的行数"> 文本内容 </textarea> 表单控件 textarea可选属性 属性 属性值 描述 name 由用户自定义 控件的名称 readonly readonly 该控件内容为只读(不能编辑修改) ...
追米网在线投稿系统<br><br>程序很简单<br>版权不究<br>管理密码:admin admin888<br>其实editarticle.asp也是一个文章修改文件<br>,您找到<%=rs("content")%>替换成下面代码就可以:<br><br><textarea name=...
引入这两个文件:<script type="text/javascript" src="tinymce\js\tinymce\tinymce.min.js"></script> <script type="text/javascript" src="tinymce\js\tinymce\...<li><textarea>Your content here.</textarea></li>
<br> }<br> </script><br></head><br><body><br> <form id="dataform" method="post" action="target.aspx"><br> <textarea id="content"></textarea><br> </form><br></body><br></html><br><br>说明:<br><br>...
<br>}<br></script><br></head><br><body><br><form id="dataform" method="post" action="target.aspx"><br><textarea id="content"></textarea><br></form><br></body><br></html><br><br>说明:<br><br><script ...
5.3. <a>标签 target属性:在窗口中打开链接 17 5.4. <table>家族:为网页添加表格 18 5.5. <thead>、<tbody>、<tfoot>标签:定义表格的表头、表身、表尾 19 6. HTML5表单标签 20 6.1. <form>标签:创建表单,与用户...
1、在页面<head>中引入ckeditor核心文件ckeditor.js <script type="text/javascript" src="ckeditor/ckeditor.js"></script> <script type="text/javascript" src="ckfinder/ckfinder.js"></script> 2、在使用...
修正当UBB模式日志中含有textarea时的错位显示问题<br> 7. 增加评论搜索功能<br> 8. 加入代码高亮显示 高亮脚本修改自webcoding<br> 9. 修正样式设置中的截断显示不读取设置值的遗漏<br> 10. 修正翻页的小BUG 来自...
53、回车键换行 把如下代码加入<body>区域中 <script type="text/javascript"> function handleEnter (field, event) { var keyCode = event.keyCode ? event.keyCode : event.which ?...<textarea>回车换行
<TEXTAREA NAME="comment" rows=4 cols=30 >请输入附注</TEXTAREA></p> <P ALIGN="CENTER"> <INPUT TYPE="submit" value="提交此表单" > <INPUT TYPE="reset" value="重置"></P> </FORM></BODY> </html>
第一步,下载依赖 yarn add kindeditor 第二步,建立kindeditor.vue组件 <template> <div class="kindeditor"> <textarea :id="id" name="content" v-model="outContent"></textarea> </div> </template> ...
<div><br />被替换过文件路径列表↓<textarea id="txtreple" style="height:300px;overflow:auto">诚信自助链 http://www.fillseo.com</textarea> </div> <div id="copyr"><br /> </div> </div> </div>
></textarea></td> <td align="center">运输路线:</td> <td ><textarea name="car_road" cols="30" rows="5" id="car_road"><?php echo $yih[carluxian]?></textarea></td> </tr> <tr> <td> </td> <td ...
问题解决1: 一开始是提交数据的时候格式是AAA<BR>BBB,但是这是显示换行,其实在TextArea里面并不是真正按行存放的,因为这个时候再提交给另外一个TextArea的时候就是显示AAABBB,而不是换行显示了,因此仅仅是显示...
Vue实现动态显示textarea剩余文字数量,具体内容如下 这里我们假设允许用户输入的最多数量为200个 html代码如下: <textarea maxlength="200" @input="descInput" v-model="desc" /> <span>{{remnant}}/200...
<br><br>功能特点:<br><br>两行代码轻松集成<br>可以通过主题和插件实现自定义<br>可以自定义XHTNL 1.0输出,屏蔽非法的元素<br>支持国际语言<br>多浏览器支持,目前支持 Mozilla, MSIE, FireFox, Opera and Safari...
You can also create your own policy files that define arbitrary permission sets.<br/><br/>Comparison of the sample security policy file <br/><br/> <br/>Permissions/Resource Setting Admin Default ...