热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

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

这几天在写在线编辑器,碰到个问题,当使用回车换行时不是你希望的<br>而是<p><p>对或是<div><div>对。使用google搜索,在网上找不到满意的答案。
有的是使用“return false”解决了ie的插入
问题,但是firefox并没有解决。而且这个问题连fckeditor都没解决。呵呵,不知是否有意为之。
可能看了以上的描述还不太明白什么问题。我们做个实验,打开fckeditor切换到源码模式输入
test test test test test test
,再切换回设计模式,然后在这句的任意地方输入个回车,比如在第3个test后,你会发现源码内得到的是
test test test
test test test
,并且如果是
这形式,自动生成的也是这种形式,这样会增加许多无用代码,而且这问题在我所能找到的在线编辑器都有。
为什么一定要使用
换行呢?简单,而且灵活不像

换行空行间距大,需要大空行多输入几个回车就行。而且假如使用自动提取文章部分内容的话不怕tag没有闭包(可能'
'别切割,但只有很少的内容,显示不正常。而且'
'被切割中的概率很低,除非使用连续多个
,当然这也很容易修补)。这样在使用自定义层时可以使用

,好处是不怕被切割而使得tag没有闭包。这样可以避免使用

。如果使用
的话自动截取的文章内容而使得有个
没有闭包(如果一个div内的内容多,这情况很容易出现),将会对整个页面效果产生不好的影响。而去除tag,再截取内容的话也不是一个好选择,比如csdn的blog就是先去除了tag,然后截取文章,这个效果大家都看到了,肯定不好。当然如果要保证tag的完整,比如img,a还有些工作要做,那也会简单得多。记住通过这样处理后在截取文章内容存入数据库还要对用户可能使用源码编辑的
标签替换为

标签。
到底如何能得到

test test test
test test test
呢?
呵呵,问题的解决其实也很简单。那就是屏蔽浏览器的默认动作,而不是return false(网上搜得到这种方式,但这只能解决ie下的问题)。
使用onkeydown事件绑定函数(兼容ie,firefox)
function cancelEnter (e)
{
var keyCode = e.charCode || e.keyCode;
if(keyCode == 13)
{
// 此处使用插入字符函数加上
(当然也可以是其他)比如document.execCommand(cmd, false, '
');
// 注意ie不支持这个command
// 由于实现可能是iframe或div代码有所不同,看您的具体情况(要兼容ie,firefox这里也一定需要兼容)
// 在网上也能搜索到代码就不多说了
if(e.preventDefault) e.preventDefault(); // 禁止浏览器默认动作(这里是关键)
else e.returnValue = false;
}
}
这样就可以得到
test test test
test test test

推荐阅读
  • 本文介绍如何使用Perl编写一个简单的爬虫,从丁香园网站获取意大利的新冠病毒感染情况。通过LWP::UserAgent模块模拟浏览器访问并解析网页内容,最终提取所需数据。 ... [详细]
  • 深入理解Shell脚本编程
    本文详细介绍了Shell脚本编程的基础概念、语法结构及其在操作系统中的应用。通过具体的示例代码,帮助读者掌握如何编写和执行Shell脚本。 ... [详细]
  • Unity编辑器插件:NGUI资源引用检测工具
    本文介绍了一款基于NGUI的资源引用检测工具,该工具能够帮助开发者快速查找和管理项目中的资源引用。其功能涵盖Atlas/Sprite、字库、UITexture及组件的引用检测,并提供了替换和修复功能。文末提供源码下载链接。 ... [详细]
  • 本文介绍了ArcXML配置文件的分类及其在不同服务中的应用,详细解释了地图配置文件的结构和功能,包括其在Image Service、Feature Service以及ArcMap Server中的使用方法。 ... [详细]
  • 如何使用PyCharm及常用配置详解
    对于一枚pycharm工具的使用新手,正确了解这门工具的配置及其使用,在使用过程中遇到的很多问题也可以迎刃而解,文中有非常详细的介绍, ... [详细]
  • SPSS操作指南:双变量相关性分析的详细步骤
    本教程将详细介绍如何使用IBM SPSS Statistics进行双变量相关性分析。通过实例演示,帮助读者理解变量间的关系及其统计意义。 ... [详细]
  • Python处理Word文档的高效技巧
    本文详细介绍了如何使用Python处理Word文档,涵盖从基础操作到高级功能的各种技巧。我们将探讨如何生成文档、定义样式、提取表格数据以及处理超链接和图片等内容。 ... [详细]
  • 如何在CAD查看器中同时打开并对比两张DWG图纸
    本文将详细介绍如何使用专业的CAD查看软件,如迅捷CAD看图,来同时打开和对比两张DWG格式的CAD图纸。无论是在设计审核还是项目管理中,掌握这一技能都能显著提高工作效率。 ... [详细]
  • 编写了几个500行左右代码的程序,但基本上解决问题还是面向过程的思维,如何从问题中抽象出类,形成类的划分和设计,从而用面向对象的思维解决问题?有这方面的入门好书吗?最好是结合几个具体的案例分析的 ... [详细]
  • Qt QTableView 内嵌控件的实现方法
    本文详细介绍了在 Qt QTableView 中嵌入控件的多种方法,包括使用 QItemDelegate、setIndexWidget 和 setIndexWidget 结合布局管理器。每种方法都有其适用场景和优缺点。 ... [详细]
  • Ulysses Mac v29:革新文本编辑与写作体验
    探索Ulysses Mac v29,这款先进的纯文本编辑器为Mac用户带来了全新的写作和编辑环境。它不仅具备简洁直观的界面,还融合了Markdown等标记语言的最佳特性,支持多种格式导出,并提供强大的组织和同步功能。 ... [详细]
  • 本文详细介绍了Vim编辑器的三种主要模式及其常用命令,帮助用户更好地掌握这一强大的文本编辑工具。 ... [详细]
  • 解决Windows 10开机频繁自检问题的实用方法
    许多用户在使用Windows 10系统时,经常会遇到开机时自动进行磁盘检查的情况。这不仅影响了开机速度,还可能带来不必要的麻烦。本文将详细介绍如何通过简单的注册表修改来避免每次开机时的磁盘自检,提升系统启动效率。 ... [详细]
  • 本文详细介绍了流编辑器sed中的G、H、g、h命令,探讨了它们的工作原理及应用场景。通过实例解析和图解分析,帮助读者掌握这些高级命令的使用方法。 ... [详细]
  • HTML基础入门指南
    本文将深入浅出地介绍HTML的基础知识,包括其定义、开发工具、制定机构、特性、基本标签及更多实用内容。 ... [详细]
author-avatar
手机用户2502893535
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有