在线编辑器中换行与内容自动提取

有的是使用“return false”解决了ie的插入<br>问题,但是firefox并没有解决。而且这个问题连fckeditor都没解决。呵呵,不知是否有意为之。
可能看了以上的描述还不太明白什么问题。我们做个实验，打开fckeditor切换到源码模式输入<div>test test test test test test</div>，再切换回设计模式，然后在这句的任意地方输入个回车，比如在第3个test后，你会发现源码内得到的是<div>test test test </div><div>test test test</div>，并且如果是<div style="">这形式，自动生成的也是这种形式，这样会增加许多无用代码，而且这问题在我所能找到的在线编辑器都有。
为什么一定要使用<br>换行呢？简单，而且灵活不像<p>换行空行间距大，需要大空行多输入几个回车就行。而且假如使用自动提取文章部分内容的话不怕tag没有闭包(可能'<br>'别切割，但只有很少的内容，显示不正常。而且'<br>'被切割中的概率很低，除非使用连续多个<br>，当然这也很容易修补)。这样在使用自定义层时可以使用<p>，好处是不怕被切割而使得tag没有闭包。这样可以避免使用<div>。如果使用<div>的话自动截取的文章内容而使得有个<div>没有闭包（如果一个div内的内容多，这情况很容易出现），将会对整个页面效果产生不好的影响。而去除tag，再截取内容的话也不是一个好选择，比如csdn的blog就是先去除了tag，然后截取文章,这个效果大家都看到了，肯定不好。当然如果要保证tag的完整，比如img，a还有些工作要做，那也会简单得多。记住通过这样处理后在截取文章内容存入数据库还要对用户可能使用源码编辑的<div>标签替换为<p>标签。
到底如何能得到<div>test test test <br>test test test</div>呢？
呵呵，问题的解决其实也很简单。那就是屏蔽浏览器的默认动作，而不是return false（网上搜得到这种方式，但这只能解决ie下的问题）。
使用onkeydown事件绑定函数(兼容ie,firefox)
function cancelEnter (e)
{
var keyCode = e.charCode || e.keyCode;
if(keyCode == 13)
{
// 此处使用插入字符函数加上<br>（当然也可以是其他）比如document.execCommand(cmd, false, '<br>');
// 注意ie不支持这个command
// 由于实现可能是iframe或div代码有所不同，看您的具体情况(要兼容ie,firefox这里也一定需要兼容)
// 在网上也能搜索到代码就不多说了
if(e.preventDefault) e.preventDefault(); // 禁止浏览器默认动作（这里是关键）
else e.returnValue = false;
}
}
这样就可以得到<div>test test test <br>test test test</div>。

赞 (0)

相关推荐

  • 在线编辑器中换行与内容自动提取

    有的是使用"return false"解决了ie的插入<br>问题,但是firefox并没有解决.而且这个问题连fckeditor都没解决.呵呵,不知是否有意为之. 可能看了以上的描述还不太明白什么问题.我们做个实验,打开fckeditor切换到源码模式输入<div>test test test test test test</div>,再切换回设计模式,然后在这句的任意地方输入个回车,比如在第3个test后,你会发现源码内得到的是<div&g

  • 在WordPress的文章编辑器中设置默认内容的方法

    在WordPress的文章编辑器中设置默认内容的方法

    很多时候我们需要在给 WordPress 文章编辑器设置默认内容,比如把常用的开头或者文章注意事项放进去,本文就教你给 WordPress 编辑器设置默认内容. /** *WordPress 给文章编辑器设置默认内容 *http://www.endskin.com/default-content-title/ */ function Bing_default_content(){ return '要设置的默认内容'; } add_filter( 'default_content', 'Bing_

  • ASP下使用FCKeditor在线编辑器的方法

    先说一下我的测试环境:XPSP2,IIS5.1,FCKeditor2.0 在IIS上建立一个新的站点,我直接取名为FCKeditor 在DW里建立一个相对应的站点,测试服务器为本机,支持VBScript 下载FCKeditor2.0,这个东西是开源的,网上能下到的地方很多,自己找去-- 下载下来的应该是压缩包,解压到FCKeditor站点根目录,什么都不需要更改,直接就可以开始调用了.等你会了的时候,会发现简单得要死去! 在站点根目录下,新建一个index.asp页面,段内加如下代码(调用编辑器

  • ASP.NET中FCKEDITOR在线编辑器的用法

    你可以将FCKEDITOR放置到任何文件夹,默认情况下,将其放入到FCKEDITOR文件夹是最为简单的方法.如果你放入的文件夹使用别的名称,请修改配置文件夹中编辑器BasePath参数,如下所示: oFckeditor.BasePath="/Components/fckeditor/"; 另外,FCKEDITOR文件夹中所有以下划线开头的文件夹及文件,都是可选的,可以安全的从你的发布中删除.它们并不是编辑器运行时必需的 如何将FCKEDITOR整合进我的页面? 由于目前的版本提供的FC

  • 自己打造HTML在线编辑器的实现难点分析

    HTML在线编辑器实际上是什么 其实有好几种实现方式,目前用得最多.兼容性最好的还是iframe方式. <iframe src="" frameborder="0"></iframe> 只有这个空iframe是不行的,还要用Javascript把它设成可编辑: iframe.contentWindow.document.designMode = "on";iframe.contentWindow.document.cont

  • 制作WEB在线编辑器-插入HTML标签

    以前认为WEB的在线编辑器无非就是对输入内容的替换以及快捷的插入HTML代码,但是做的时候却发现虽然原理是那样,但是实现方法并非我想的那么死板.由于很少做UI上的东西所以到现在才知道在document中有execCommand方法可以解决插入HTML标签的问题,这个方法可以在光标所在位置插入需要的HTML标签,并且要注意的是,如果在一个限制的范围内插入标签需要先让该范围获得焦点,例如: a.focus(); a.document.execCommand('insertButton','','bt

  • js制作xml在线编辑器实例

    js制作xml在线编辑器实例

    目录 前言 在线XML编辑器的需求 技术预研 可视化编程 VSCODE插件 在线编辑器 最初形态:简单的在线XML编辑器 用CodeMirror做编辑器 学习XML,并提取出tags规则 进化形态:加载树形文件结构和全文件校验功能的在线XML编辑器 左侧文件树 全文件校验功能 非递归遍历树 IndexDB保存文件内容 究极进化形态:突破浏览器沙盒限制,实现对电脑本地文件的增删改 更多的功能与细节 不足与总结 前言 一年多没更新博客了,原因是疫情期间<骑马与砍杀2>发售,然后去写游戏MOD去了.

  • ASP FCKeditor在线编辑器使用方法

    本文使用的是最新的FCKeditor 2.3.1版本 官方网站下载: http://ckeditor.com/download[建议直接在官方网站下载最新版本] 下面就开始用了: 第一项工作就是对这个功能宏大的编辑器进行精简,当然是文件精简而非功能精简化.在这里我以asp版的FCKeditor为例进行,进入到FCKeditor 文件夹下,先把以"_"为开头的文件夹统统删除,这些文件夹里放的是范例或是一些其它工具.其实也就是只保留editor文件夹.fckconfig.js.fckedi

  • 只需一行代码,轻松实现一个在线编辑器

    只需一行代码,轻松实现一个在线编辑器

    在大部分人眼里,技术宅给人的印象是沉默寡言,总摸不透他心里想些什么,彼此都保持距离.作为半个程序员,我觉得真正的技术宅大部分时间都在找乐子,鼓捣各种想法,和大部分人的极客心理是一样的,程序员也还爱讲笑话,也喜欢烧菜做饭,虽然大多是为了减减压,这样看来和常人没什么不一样. 不一样的地方,技术宅崇尚极致,喜欢极简,又希望简约不简单,背后就是技术宅满心思的不断的尝试,我正在看着一出好戏在上演: "程序员 Jose Jesus Perez Aguinaga 在 CoderWall 分享了一个小技巧:在浏

  • 让IE8和IE9支持eWebEditor在线编辑器的方法

    最近在做网站的时候,发现eWebEditor在线文本编辑器不支持IE9,点击编辑器中的按钮都没有反应,之前本站发布过一篇<解决IE8不支持eWebEditor在线文本编辑器的方法>,但貌似在IE9下方法就失效了,在网上找到了终级解决方法,拿来给大家分享. 首先找到eWebEditor编辑器所在的目录,然后搜索到editor.js文件并用文本编辑器打开,然后找到BtnMouseUp()函数,将该函数代码替换成如下代码即可: 复制代码 代码如下: function BtnMouseUp() {  

随机推荐