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的處理，加一個標記。 反正不要讓他們之間互相影響。