替换富文本编辑器中输入的半角空格

正则替换(防止替换html元素里的空格)

\s(?=[^>]*<)

HTML提供了5种空格实体(space entity),它们拥有不同的宽度,非断行空格( )是常规空格的宽度,可运行于所有主流浏览器。其他几种空格( ? ? ? ??)在不同浏览器中宽度各异。

&nbsp;

它叫不换行空格,全称No-Break Space,它是最常见和我们使用最多的空格,大多数的人可能只接触了 ,它是按下space键产生的空格。在HTML中,如果你用空格键产生此空格,空格是不会累加的(只算1个)。要使用html实体表示才可累加,

该空格占据宽度受字体影响明显而强烈。

&ensp;  

它叫“半角空格”,全称是En Space,en是字体排印学的计量单位,为em宽度的一半。根据定义,它等同于字体度的一半(如16px字体中就是8px)。名义上是小写字母n的宽度。此空格传承空格家族一贯的特性:透明的,此空格有个相当稳健的特性,

就是其占据的宽度正好是1/2个中文宽度,而且基本上不受字体影响。

&emsp;    

它叫“全角空格”,全称是Em Space,em是字体排印学的计量单位,相当于当前指定的点数。例如,1 em在16px的字体中就是16px。此空格也传承空格家族一贯的特性:透明的,此空格也有个相当稳健的特性,

就是其占据的宽度正好是1个中文宽度,而且基本上不受字体影响。

&thinsp;  

它叫窄空格,全称是Thin Space。我们不妨称之为“瘦弱空格”,就是该空格长得比较瘦弱,身体单薄,占据的宽度比较小。它是em之六分之一宽。

原文地址:https://www.cnblogs.com/amuro/p/9834872.html

时间: 2024-11-07 03:45:25

替换富文本编辑器中输入的半角空格的相关文章

富文本编辑器ckeditor使用(angular中)

1.下载ckeditor 地址:https://ckeditor.com/ckeditor-4/download/,选择合适的版本 2.将下载的压缩文件解压后放在项目相关目录下 3.在index.html中引入 <!-- 引入ckeditor --> <script src="assets/ckeditor/ckeditor.js"></script> 4.在需要使用富文本编辑器的html文件中写 <!-- 富文本框 --><cke

BBS第四天之文章详情,点赞点踩,根子评论,后台展示,文章添加(富文本编辑器)

一.文章详情 路由url.py: url(r'^(?P<username>\w+)/article/(?P<pk>\d+)$', views.article_detail), 点击个人站点文章title即可关联到文章详情路由找到其视图函数 views.py: def article_detail(request,username,pk): user = models.UserInfo.objects.filter(username=username).first() if not

kindEditor 富文本编辑器 使用介绍

第一版:存放位置:  ---->把该创建的文件包放到javaWeb 过程的 WEB_INF 下:如图所示. 第二步:< kindEditor 插件的引用> :JS引用 1 <script type="text/javascript" charset="utf-8" src="/js/kindeditor-4.1.10/kindeditor-all-min.js"></script> 2 <scrip

如何做一个富文本编辑器

很久以前就想做一个富文本编辑器,但是感觉比较难,一直没有实现.直到了解了html5的contenteditable属性可以设置一个div为可编辑状态,利用这个特性做富文本编辑器就比较简单了 首先 认识一下 contenteditable 它是一个属性 可以这样使一个DIV的编辑状态被激活 <div contenteditable="true"></div> 然后这个div就可以被编辑了 而我们要想获得它的html源码可以使用innerHTML来取得 举个例子如下

富文本编辑器和fastdfs的使用

宜立方商城的系统架构a) 功能介绍(项目架构,有哪些功能模块,这些功能模块如何实现?)b) 架构讲解工程搭建-后台工程c) 使用maven搭建工程(后台工程如何搭建?)d) 使用maven的tomcat插件启动工程SSM框架整合. 服务中间件dubbo,使用dubbo实现soa架构.项目改造为基于SOA架构(什么是SOA架构,有什么好处,如何使用),面向服务的架构 图片上传功能分析,图片服务器,如何保存图片,如何访问图片?nginx的安装:反向代理服务器.Nginx配置虚拟机,Nginx实现反向

ASP.NET MVC实现layui富文本编辑器应用

先看看视图层 在视图层,使用的是视图助手--HtmlHelper,代替我们网页中传统的表单标签元素,其中的m代表实体模型.通过视图助手,为我们生成id和name属性相同的textarea标签. 备注: 在ASP.NET MVC中,能提交表单数据的元素(各种类型的input标签,textarea等),其属性name的值于实体模型中的属性名相同时,传递到控制器中的实体模型或参数,会自动进行映射,方便前端到后台的数据传递. 1 <div class="layui-row"> 2

vue项目富文本编辑器vue-quill-editor之自定义图片上传

使用富文本编辑器的第一步肯定是先安装依赖 npm i vue-quill-editor 1.如果按照官网富文本编辑器中的图片上传是将图片转为base64格式的,如果需要上传图片到自己的服务器,需要修改配置. 创建一个quill-config.js的文件,里面写自定义图片上传.代码如下 /*富文本编辑图片上传配置*/ const uploadConfig = { action: '', // 必填参数 图片上传地址 methods: 'POST', // 必填参数 图片上传方式 token: ''

react引入富文本编辑器TinyMCE

这周做了一个PC端的service后台需求,要求有富文本编辑器,插入图片.表格,字体字号背景色等等, 最后引入了富文本编辑器TinyMCE 对于TinyMCE的简介: TinyMCE是一款易用.且功能强大的所见即所得的富文本编辑器.同类程序有:UEditor.Kindeditor.Simditor.CKEditor.wangEditor.Suneditor.froala等等. TinyMCE的优势: 开源可商用,基于LGPL2.1 插件丰富,自带插件基本涵盖日常所需功能 接口丰富,可扩展性强,有

ASP.NET MVC 中使用 UEditor 富文本编辑器

在上篇<使用ASP.NET MVC+Entity Framework快速搭建博客系统>中,已经基本上可以实现博客分类和博客文章的CURD.但是,文章编辑界面实在是-- 好吧,咱得搞专业点.来个传说中的富文本编辑器,度娘了一下,发现 KISSY Editor 和 UEditor 貌似比较简单的样子,既然这样就用百度的 UEditor 吧,到这里下载最新的.NET版. 解压后,将默认目录名称改为 ueditor 然后复制到项目的 Content 目录中,大概就像下图中的样子 打开~/Views/P