当前位置:首页 » 网页前端 » 前端的富文本
扩展阅读
webinf下怎么引入js 2023-08-31 21:54:13
堡垒机怎么打开web 2023-08-31 21:54:11

前端的富文本

发布时间: 2023-08-24 03:58:48

‘壹’ layui富文本上传图片后获取不到焦点

layui富文慧谨本上传图片后获取不到焦点通过以下方法解决。
1、使用spring3,springmvc,基碧拦前端layui,jdk7,tomcat7。
2、下载框架,引入js和css。
3、下载安装3个必备的jar包,用于上传图片和json数据返回。1>:json-20131018.jar;搏胡2>:commons-fileupload-1.3.1.jar;3>:commons-io-2.2.jar

‘贰’ 前端用jQuery怎么获取到富文本ueditor web编辑器里面的文字,图片内容

UE.getPlainTxt() 可获取到编辑器中的纯文本内容,有段落格式

UE.getContentTxt() 可获取到编辑器中的纯文本内容,没有段落格式;


ueditor 没有提供直接获取图片的功能,可以UE.getContent() 获取全部内容,使用正则表达式 筛选出图片,我提供一个使用JAVA写的筛选方法,前台js代码类似:

Patternp_img=Pattern.compile("(<img[^>]+src\s*=\s*['"]([^'"]+)['"][^>]*>)");
Matcherm_img=p_img.matcher(content);
while(m_img.find()){
Stringimg=m_img.group(1);//m_img.group(1)为获得整个img标签m_img.group(2)为获得src的值
}

可以打开ueditor.all.min.js 查看,里面有所有支持的方法 注释也都很明白

‘叁’ 富文本编辑器是什么意思

富文本编辑器,Rich Text Editor, 简称 RTE, 是一种可内嵌于浏览器,所见即所得的文本编辑器。它是一种解决可一般的用户不同html等网页标记但是需要在网页上设置字体的颜色、大小、样式等信息问题一个文本编辑器。下面简单的介绍一下富文本编辑器的用法和简要的原理。

1、什么是富文本编辑器?

抛开专业的定义,用自己的话来介绍一下到底什么是富文本编辑器。先举个简单的例子,大家大多都使用过网上的一些博客系统或者论坛贴吧吧,那我们要发布一则文章或者消息的时候我们需要在后台设置一下这段文本的格式还有字体的大小粗细颜色等样式,此时网页上会有一个设置这些信息的菜单或者是一个网页的文本编辑器,这个就是富文本编辑器的常见应用,如下图:

富文本编辑器不同于我们平时的文本编辑器,但是其功能确实和我们的平时使用的word的是类似的,只不过富文本编辑器设置是解决不会编写 HTML 的用户并需要设置各种文本格式在我们的网页上。

2、富文本编辑器的原理和应用

关于富文本编辑器的原理,一些人可能以为富文本编辑器的原理十分的复杂,事实上也并非如此,当然功能强大的编辑器自然会很难实现。网页上的富文本编辑器的大致原理是使用JavaScript技术将用户的输入的内容和设置的样式转换为html、css等浏览器可以认识的代码,其核心的实现技术就是JavaScript和html 、css等前端技术。

富文本编辑器的应用,比如做为一个网站的开发者,当我们需要一个发布文章的功能时候,用户可能不知道html代码,此时我们可以使用一些别人写好的富文本编辑器嵌入到我们的程序中即可解决这一问题。

‘肆’ 请教前端达人,知乎的编辑器是怎样实现这个功能的

在线富文本编辑器里面,做以下操作:
选中一串文字,点击“ B ”把它加粗。
把游标移到这串文字的中间,再点“ B ”。
输入一些文字。
在大部分其他的编辑器里面,到第二步的时候,刚才加粗的所有文字都回复了正常状态:
step1: some bold text
step2: some bold text
step3: some inserted text bold text
而知乎的编辑器的效果是这样:
step1: some bold text
step2: some bold text
step3: some inserted text bold text
从 HTML 上面看,它是把一个<b></b>节点拆成了三个节点:
<b>some</b>inserted text<b>bold text</b>.
问题是:在 contentEditable 上的编辑操作只能更新当前节点的文本内容,也就是说如果没有 js 干预,效果是这样:
<b>some inserted text bold text</b>
知乎的编辑器是怎样完成分拆动作的?
监听 keypress 事件?那输入中文怎样实现?
监听 change ?

‘伍’ 前端用jQuery怎么获取到富文本ueditor web编辑器里面的文字和图片内容

在线文档对UEditor说明不够全面,收集了一些常用的方法和基本设置,以供参考。

1、创建编辑器

UE.getEditor('editor', {

initialFrameWidth:"100%" //初始化选项

})

精简版

UE.getEditor('editor')

2、删除编辑器

UE.getEditor('editor').destroy();

3、设置焦点

UE.getEditor('editor').focus();

4、获取编辑器内容

UE.getEditor('editor').getContent()

5、编辑器是否有内容

UE.getEditor('editor').hasContents()

6、获取编辑器内容纯文本格式

UE.getEditor('editor').getContentTxt()

7、获取带格式的纯文本

UE.getEditor('editor').getPlainTxt()

8、启用编辑器

UE.getEditor('editor').setEnabled();

9、禁止编辑

UE.getEditor('editor').setDisabled('fullscreen');

10、获取整个html内容

UE.getEditor('editor').getAllHtml()

11、常用设置

imageUrl:UEDITOR_HOME_URL + "../yunserver/yunImageUp.php", //图片上传接口

imagePath:"http://",

scrawlUrl:UEDITOR_HOME_URL + "../yunserver/yunScrawlUp.php",//涂鸦接口

scrawlPath:"http://",

fileUrl:UEDITOR_HOME_URL + "../yunserver/yunFileUp.php",//文件上传接口

filePath:"http://",

catcherUrl:UEDITOR_HOME_URL + "php/getRemoteImage.php",//获取远程图片接口

catcherPath:UEDITOR_HOME_URL + "php/",

imageManagerUrl:UEDITOR_HOME_URL + "../yunserver/yunImgManage.php",//图片管理接口

imageManagerPath:"http://",

snapscreenHost:'ueditor..com',

snapscreenServerUrl:UEDITOR_HOME_URL + "../yunserver/yunSnapImgUp.php",//截图接口

snapscreenPath:"http://",

wordImageUrl:UEDITOR_HOME_URL + "../yunserver/yunImageUp.php",//word图片转存接口

wordImagePath:"http://", //

getMovieUrl:UEDITOR_HOME_URL + "../yunserver/getMovie.php",//获取视频接口

lang:/^zh/.test(navigator.language || navigator.browserLanguage || navigator.userLanguage) ? 'zh-cn' : 'en',

langPath:UEDITOR_HOME_URL + "lang/",

webAppKey:"9HrmGf2ul4mlyK8ktO2Ziayd",

initialFrameWidth:860, //初始化宽度

initialFrameHeight:420, //初始化高度

focus:true //是否焦点

‘陆’ ueditor富文本编辑器上传图片怎么配置

1. 前端配置项
前端需要配置 serverUrl 参数,修改 ueditor.config.js 里的 serverUrl 参数,改成服务器端路径,参考:URL + 'php/controller.php'
2. 后端配置项
后端配置项在 php/config.json 里配置,不同的上传有各自的配置项。
修改上传图片路径的参数是 imagePathFormat ,改成你的图片文件夹路径即可。

‘柒’ 前端富文本如何分页显示

使用Spannable 设置样式Spannable 可以对颜色和字体粗细等属性进行样式设置。首先使用 SpannableStringBuilder 构造文本内容,然后为文本设置 android.text.style 包中定义的样式,常见的样式有StrikethroughSpan、StyleSpan、ForegroundColorSpan等。例如,为某段文字内容加上带颜色和删除线的粗体样式。最后,项目中用到了格式化字符串,所以只能采取第一种方式来避免样式信息被清除。这里遇到一个非常奇葩的坑, fromHtml(String)无法正常显示带<strike>标签的格式。解决办法是结合使用spannable,这里通过其他span对象来确定样式字符串的位置,然后采用方式进行处理。