1. 前端用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
//是否焦点
2. 如何读取富文本中的内容然后存到mongodb中
界面代码
<img src="@ViewData["html"]" />
作为测试代码，我就在界面上面写了一个image框，用来显示从MongoDB数据库中读取出来的图片。
HomeController代码
public ActionResult Index() { ViewData["html"] = "/MongodbHelp/ProcessRequest?actions=DOWNLOAD&value=lf.png"; return View(); }
后面的代码组成相信凡是接触过MVC的读者都能看懂这个东西，后面我就直接写死了一个图片的名称。
MongodbHelpController
连接数据库的方法
private static MongoDatabase DB; public static string fileTable = "fs";//数据库中的表名称 //Sets up the environment. public void Init() {
//我们可以在配置文件中读取 string ConnectionString = "127.0.0.1"; //ConfigurationManager.AppSettings["mondoDbConnection"]; if (String.IsNullOrEmpty(ConnectionString)) { throw new ArgumentNullException("Connection string not found."); } MongoServerSettings mongoSetting = new MongoServerSettings(); mongoSetting.MaxConnectionPoolSize = 15000;//设定最大连接池 mongoSetting.WaitQueueSize = 500;//设定等待队列数 mongoSetting.Server = new MongoServerAddress(ConnectionString, 27017); int count = MongoServer.MaxServerCount; MongoServer server = MongoServer.Create(mongoSetting);//创建连接数据文件 DB = server.GetDatabase("local");//创建数据库连接 }
用来判断我们进行的方法是哪一个，上传文件还是下载文件，在这只给大家介绍下载的方法；
public void ProcessRequest() { Init();//initialize the mongo string action = Request.QueryString["actions"]; switch (action) { case "LIST": GetFileList(); break; //获取文件列表 case "UPLOAD": Upload(); break; //上传文件 case "DELETE": Delete(); break;//删除文件 case "DOWNLOAD": DownFile(); break; //下载文件 } }
下载文件的类
//下载文件 public void DownFile() { string filename = Request.QueryString["value"]; Response.ContentType = "application/octet-stream"; //context.Response.ContentType = "audio/mpeg"; Response.AddHeader("Content-Disposition", "attachment; filename=" + filename); MongoGridFSSettings fsSetting = new MongoGridFSSettings() { Root = fileTable }; MongoGridFS fs = new MongoGridFS(DB, fsSetting); MongoGridFSFileInfo gfInfo = new MongoGridFSFileInfo(fs, filename); //方法一，很简洁 fs.Download(Response.OutputStream, filename); Response.End(); }
通过这几段代码，我们就轻松的完成MongoDB数据的文件读取操作。
3. java存储富文本到什么数据库
在接收富文本时，数据库接收含有图片内容，图片会自动转换为Base64编码保存到数据库，导数据库性能降低。
解决：在接收富文本内容时，将接收到的图片转换为文件上传到Minio(Minio具体使用可参考文档)，然后将base64编码替换为图片地址保存
用到的工具类
使用正则表达式提取接收内容的Base64编码工具类
import java.util.ArrayList;
import java.util.List;
import java.util.regex.Matcher;
import java.util.regex.Pattern;
public class ImgBaseUtil {
public static List<String> getImgStr(String htmlStr) {
List<String> list = new ArrayList<>();
String img = "";
Pattern p_image;
Matcher m_image;
// String regEx_img = "<img.*src=(.*?)[^>]*?>"; //图片链接地址
String regEx_img = "<img.*src\\s*=\\s*(.*?)[^>]*?>";
p_image = Pattern.compile(regEx_img, Pattern.CASE_INSENSITIVE);
m_image = p_image.matcher(htmlStr);
while (m_image.find()) {
// 得到<img />数据
img = m_image.group();
// 匹配<img>中的src数据
Matcher m = Pattern.compile("src\\s*=\\s*\"?(.*?)(\"|>|\\s+)").matcher(img);
while (m.find()) {
list.add(m.group(1));
}
}
return list;
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
将Base64编码转换为文件流的工具类
import org.springframework.web.multipart.MultipartFile;
import sun.misc.BASE64Decoder;
import java.io.*;
public class BASE64DecodedMultipartFile implements MultipartFile {
private final byte[] imgContent;
private final String header;
public BASE64DecodedMultipartFile(byte[] imgContent, String header) {
this.imgContent = imgContent;
this.header = header.split(";")[0];
}
@Override
public String getName() {
return System.currentTimeMillis() + Math.random() + "." + header.split("/")[1];
}
@Override
public String getOriginalFilename() {
return System.currentTimeMillis() + (int) Math.random() * 10000 + "." + header.split("/")[1];
}
@Override
public String getContentType() {
return header.split(":")[1];
}
@Override
public boolean isEmpty() {
return imgContent == null || imgContent.length == 0;
}
@Override
public long getSize() {
return imgContent.length;
}
@Override
public byte[] getBytes() throws IOException {
return imgContent;
}
@Override
public InputStream getInputStream() throws IOException {
return new ByteArrayInputStream(imgContent);
}
@Override
public void transferTo(File dest) throws IOException, IllegalStateException {
new FileOutputStream(dest).write(imgContent);
}
public static MultipartFile base64ToMultipart(String base64) {
try {
String[] baseStrs = base64.split(",");
BASE64Decoder decoder = new BASE64Decoder();
byte[] b = new byte[0];
b = decoder.decodeBuffer(baseStrs[1]);
for (int i = 0; i < b.length; ++i) {
if (b[i] < 0) {
b[i] += 256;
}
}
return new BASE64DecodedMultipartFile(b, baseStrs[0]);
} catch (IOException e) {
e.printStackTrace();
return null;
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
内容接收并完成处理工具类
public class RichTextUtil {
/**
*
* @param text 富文本内容
* @return 返回处理图片后的数据
*/
public String richText(String text,MinioUtils minioUtils,MinioConfig minioConfig){
String s=new String(text);
String result=null;//返回结果
List<String> imgStr = ImgBaseUtil.getImgStr(s); //每组base64编码图片
if (imgStr.isEmpty()){
return text;
}
for (String s1:imgStr){ //每个base64转换并上传
String s2= UUID.randomUUID().toString().replaceAll("-","")+".jpg"; //新的文件链接
//上传
MultipartFile multipartFile = BASE64DecodedMultipartFile.base64ToMultipart(s1);
assert multipartFile != null;
minioUtils.putObject1(multipartFile,minioConfig.getBucketName(),s2);
String foreverUrl=minioConfig.getEndpoint()+":"+minioConfig.getPort()+"/"+minioConfig.getBucketName()+"/"+s2;//永久链接
if (Objects.isNull(result)){
result=s.replace(s1,foreverUrl); //第一次替换
}
result=result.replace(s1,foreverUrl); //前边替换过，继续替换
}
return result;
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
配合Minio工具类使用
@GetMapping("/tss")
public String dmo(@RequestBody Entity entity) throws IOException {
String s=entity.getContent();//接收到的内容
RichTextUtil richTextUtil = new RichTextUtil();
String s1 = richTextUtil.richText(s,minioUtils,minioConfig);
entity.setContent(s1);//最后将转换过的内容替换就行
//数据库保存一下实体类内容
return entity;
}
1
2
3
4
5
6
7
8
9
1
2
3
4
5
6
7
8
9
Minio使用可查询相关资料或了解本博客SpringBoot对Minio的简单使用链接: http://t.csdn.cn/IJA0G
文章知识点与官方知识档案匹配
Java技能树使用JDBC操作数据库数据库操作
95211 人正在系统学习中
打开CSDN APP，看更多技术内容
...如D:\tmp)并回显_静静看大海的博客_java 富文本保存...
1、项目需求: 使用网络富文本编辑器实现“重要节假日高速出行指南内容”编辑,功能涉及图片、视频上传。 2、存在问题 网络富文本编辑器默认将图片、视频上传至项目里,如果使用Tomcat作为服务器的时候,如果不配置图片保存路径,将图片保存在项...
继续访问
java 保存富文本_如何从Web应用程序保存富文本并将其显示在富文本框中...
我建议弹出打开的写字板(开始 - >运行... - > wordpad),并乱用不同的字体样式等 . 然后将其保存为某处的RTF文档 . 在您选择的纯文本编辑器中打开该文档(我使用Notepad++),这将帮助您更轻松地找出RTF . ...
继续访问
Bootstrap富文本组件wysiwyg数据保存到mysql的方法
Bootstrap提供了一个叫wysiwyg的富文本组件，用来显示和编辑富文本数据，但如何将编辑后的数据保存到MySQL数据库，却不得而知。另外，如何将mysql数据库中的数据显示到wysiwyg也不得而知，对于这两个问题，让我来告诉你解决方案！ 一、效果展示 首先，我们先来看看效果如何： 富文本中有一张图片，还有一个数字列表 我们可以看到编辑后的数据保存成功，以及保存后对应的展示。 二、富文本 度娘对于富文本的解释如下： 富文本格式（Rich Text Format, 一般简称为RTF）是由微软公司开发的跨平台文档格式。大多数的文字处理软件都能读取和保存RTF文档。RTF是Rich
富文本保存到数据库
标题 富文本保存到数据库 -idea String html = "<p wx:nodeid='135'>1.地方</p><p wx:nodeid='156'>2.第三方"; // 前端传过来的富文本内容 String temp = HtmlUtils.htmlEscapeHex(html); System.err.println("存数据库=\r\n" + temp); resume.setExperience(temp); Strin
继续访问
java中使用poi如何导富文本,Apache的POI - 读取和存储DB富文本内容
Using your favorite Java-to-database framework (JDBC, Hibernate, etc.), store the String value into contents in rich_text_string, and the associated FormattingRun object data into rt_formatting_runs. ...
继续访问
富文本保存到数据库_黑潮之羽的博客_富文本保存到数据库
富文本保存到数据库 String html = "1.地方2.第三方"; // 前端传过来的富文本内容 String temp = HtmlUtils.htmlEscapeHex(html); System.err.println("存数据库=\r\n" + temp); resume.setExperience(temp); String returnHt...
继续访问
java富文本
【代码】java富文本。
继续访问
富文本编辑器存MYSQL数据库
一、MYSQL数据库对应数据类型选用 longtest类型，对应java和mybatis框架类型为string。 二、富文本编辑器有特殊字符，存数据库会转义 在java代码中，添加org.springframework.web.util.HtmlUtils 包下的 HtmlUtils.htmlEscapeHex(String)；把html的特殊字符转换成符合Intel HEX文件的字符串 HtmlUtils.htmlUnescape(...
继续访问
Java开发之富文本编辑器TinyMCE
一、题外话 最近负责了一个cms网站的运维，里面存在很多和编辑器有关的问题，比如编辑一些新闻博客，论文模块。系统采用的是FCKEditor，自我感觉不是很好，如下图 特别是在用户想插入一个图片的话，就很麻烦，所有用户共享一个文件目录，这样就不好了，于是便想到了TinyMCE编辑器，博客园默认的也是这个编辑器，接下 来，我们开始吧 二、TinyMCE编辑器集成步骤 2.1：下载相关文件...
继续访问
Java实现多文件上传下载，kindeditor富文本保存为word文件,文件列表分页显示
介绍 SpringBoot+Thymeleaf+Myts项目部分功能， 实现文件的多文件上传和下载，以及将kindeditor富文本内容保存为.doc文件 文件上传/创建后以列表形式显示，并且可以分页显示 提示 简单记录，仅供参考，代码并不完整，需要简单修改后才能使用（没提供.css文件，需要删除html中的class；另外部分变量通过session获取，可以适当修改） 关键代码 html： <!DOCTYPE html> <html lang="en" xmlns:th="http
继续访问
JAVA：富文本框截图，将图片的Base64转File文件进行保存
代码】JAVA：富文本框截图，将图片的Base64转File文件进行保存。
继续访问
java 富文本框内容 保存与恢复,将富文本框内容直接保存到文件中。（不使用savefile对话框）...
how can I save the contents of a rich text box without needing to open the save file dialog.i think its something like:richTextBox1.SaveFile(@"\Documents\save_file_here.rtf");but it cant find the file...
继续访问
java富文本编辑数据存储到数据库简单实现
java富文本编辑数据存储到数据库简单实现-小白日记 前端代码 <link rel="stylesheet" href="../themes/default/default.css" /> <script charset="utf-8" src="../kindeditor-all.js"></script> <script charset="utf-8" src="../lang/zh-CN.js"></script> ...
继续访问
Java解析富文本
富文本Java解析
继续访问
java 关于处理富文本保存,查询,更新过慢问题
java 关于处理富文本保存,查询,更新过慢问题 首先了解为什么富文本保存,查询,更新会过慢 数据库富文本字段类型为：longtext 类型 假如富文本里面只保存文字的话,保存,查询,更新都会很快 注意：只有富文本里面插入图片或者视频的时候才会变的很慢–因为前端富文本组件会把图片或视频直接转化为base64编码,这样保存量数据就会变的极大！ 解决方案： 后端提供一个文件上传的接口,前端富文本要插入图片的时候直接调上传接口，先把图片或者视频上传到服务器，返回图片的url，前端把url直接放到 <im
继续访问
记一次富文本编辑器保存内容到数据库转换内容的问题
项目上要用到富文本编辑器，保存到数据库的时候它会自动转换成非HTML的格式，再次从数据库读取到页面后格式全乱了。如图：如果我们要按一开始我们输入的格式正常显示需要对保存的内容进行转换，转换成正常的HTML的格式方法是需要用到commons-lang3-3.3.2.jar 这个jar包下面的一个工具类String qualiHtml=StringEscapeUtils.unescapeHtml4(r...
继续访问
java 富文本 word_Java导出富文本到word
源码地址：背景最近用java开发一个中车项目管理系统，里面有一个维修单word导出功能。可用方案在网上查找资料，总结出两种比较可行的方案。(1) 制作word模板，导出成mht文件(单页面网页格式)，然后往模板里渲染数据，最终生成word文档。(2) 制作word模板，导出成xml文件，然后往模板里渲染数据，最终生成word文档。两种都是采用模板的思想，比用poi去组织word格式简单的很多很多。...
继续访问
191210P4 Java富文本编辑之图片链接本地化
Java富文本编辑之图片链接本地化 作者：邵发 官网：http://afanihao.cn/java 本文介绍在图文混编项目中（博客、新闻等），如何将富文本中的图片外链转为本地链接的问题。本文是Java学习指南系列教程的官方配套文档，项目源码在本文末尾说明。 所谓富文本Rich Text，就是以HTML形式表示的文本。在前端通常由富文本编辑器得到，比如UEditor，KindEditor，w...
继续访问
java 富文本框内容 保存与恢复_使用富文本编辑器保存数据后进行fastjson格式转换异常及序列化处理...
最近线上的ELK日志监控爆出几个异常问题，jsonException的解析问题。如下:message: 2019-04-10 23:37:43,952 ERROR aop.AspectAdvice eid=410724004 not match : - ,com.alibaba.fastjson.JSONException: not match : - , atcom.alibaba.fastjs...
继续访问
富文本编辑器内容存储至Mysql
文章目录概述获取富文本编辑器内容后端数据处理 概述 在所有的编辑器中，大概最受欢迎的就是富文本编辑器和MarkDown编辑器了，无论哪一种编辑器，我们需要知道的是，发给后端的内容是带着html标签的字符串，而我们需要把这些字符串存储到数据库中，其实原理非常简单，为了便于理解，我们首先创建一张表： CREATE TABLE `tb_title` ( `title_id` int(11) NOT NULL COMMENT '文章Id', `sort_id` int(11) DEFAULT NULL CO
继续访问
富文本数据保存
原文：https://blog.csdn.net/qing_gee/article/details/49331543 Bootstrap提供了一个叫wysiwyg的富文本组件，用来显示和编辑富文本数据，但如何将编辑后的数据保存到mysql数据库，却不得而知。另外，如何将mysql数据库中的数据显示到wysiwyg也不得而知，对于这两个问题，让我来告诉你解决方案！ 一、效果展示 首先，我们先来看...
继续访问
最新发布 java 将富文本转化为word，保留原本格式
通过java，将富文本转化为word
继续访问
热门推荐 Bootstrap wysiwyg，将富文本数据保存到mysql
Bootstrap提供了一个叫[wysiwyg](http://www.bootcss.com/p/bootstrap-wysiwyg/)的富文本组件，用来显示和编辑富文本数据，但如何将编辑后的数据保存到mysql数据库，却不得而知
继续访问
java富文本框信息如何保存
java
开发语言
写评论
评论
10
3
踩
分享
4. 前端开发的难点到底在什么地方
一般意义上的前端项目：
-从0到1，治理晒哦为健全点的都能捣鼓出来；
-从1到60，后后端或者设计岗位勉强能兼任；
-从60到80，需要比较专业的前端；
-从80到100，这么好的前端可遇不可求。
从0到1就是从无到有的过程，很多人用WordPress，建站之星就差不多就能搞个demo了，可以拿去骗投资人的钱。
从1到60，就是勉强可用，基本上让后端工程师或者UI设计师找一套bootstrap的模板东拼西凑的也能勉强应付到第一版本上线。
从60到80，就是真正要做一款能完备、性能优良、架构合理的中小规模产品，没有专业的设计、前端、后端、产品、运营是走不到这步的，差不多到A轮了。
从80到100，那就是追求各方面的极致，与竞争对手一较高下，各个方面没有顶尖的人才都会影响整体的战斗力，木桶效应。
解释一下：
1. 核心竞争力的主体是工程经验。
其实这个结论可以推广到其他研发岗位，就是每个研发岗位的知识体系都是由基础学科知识＋领域工程经验构成，彼此不可替代的就是工程经验部分。一个后端工程师一时间不能替代同等级前端工程师到不是基础或者智商的问题，主要是工程经验不足，你让一个前端一个后端分别实现对方领域中一个有明确输入输出的功能函数，二者通过简单学习新语言新语法，加上开发手册查询，一般都能比较正常的实现业务逻辑，但你让他们hold住对方领域的完整项目就很困难了，技术选型，系统设计，模块拆分，平台特性，宿主环境，性能优化，构建部署，系统测试等等都是领域工程经验问题。
2. 工程经验的等级是能cover项目从0发展到80+。
这个很好解释，因为从0-60的非专业前端也能做到，60+的才是专业前端。
所以不用担心核心竞争力问题，60+的前端现在都很抢手啊。工程经验只有60-的话确实压力比较大。
5. 富文本编辑器编辑后的文字如何保存到数据库
<div id = "content1" hidden="hidden">
${content}
</div>
<div id = "content2">
</div>
<script type="text/javascript">
$(function() {
$("#content2").html($("#content1").text());
});
</script>
6. 富文本编辑器内容在mysql数据库以什么类型保存，在程序用是用string类型吗
程序里面用 string，在mysql里面，一般用 text，如果内容一般不会太多，用 varchar 也是可以的~
7. 前端用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 查看，里面有所有支持的方法 注释也都很明白
8. markdown文本，在数据库里如何存储，是存成html，还是存储原始内容
markdown文本，在数据库里如何存储，是存成html，还是存储原始内容
如果你确定只用md且以后一定不会换富文本的话，可以直接放md。 如果要考虑混入html的话，可以参考typecho的处理，加一个标记。 反正不要让他们之间互相影响。