度UEDITOR新增的將WORD內容導入到富文本編輯框的功能,
需求之前公司這邊提過,領導提過,主要也是用戶提的,我們的產品之前沒有這個功能,現在用戶提了這個需求,需要能夠直接一鍵導入,產品組那邊在網上也找過一些開源的方案,但是不太令人滿意。沒有技術支持,出了問題找不到人,因為我們產品會經常更新,功能這塊的話是需要配合我們來發布新版本,然后用戶那邊是政府單位和企業單位,都是有一些個性化的需求,需要去定制開發來實現,另外一個就是維護成本,網上找的開源的東西維護成本真的還不如自己重新做一個。
Ueditor集成Word導入功能,Ueditor集成Word導入(富文本編輯器),富文本編輯器實現一鍵導入word,Ueditor富文本實現導入word功能,JAVA+WORD圖片上傳控件,ASP.NET – 支持WORD上傳的富文本編輯器,HTML5 – 支持WORD上傳的富文本編輯器,ASP.NET支持word上傳的富文本編輯器,PHP支持Word上傳的富文本編輯器,百度ueditor編輯器如何導入word文檔,如何實現導入WORD文檔到UEDITOR編輯器中,導入word文檔到百度編輯器中,將word文檔導入到ueditor編輯器中
前端不固定某一種語言和框架,要求全部都能夠支持,比如HTML5,HTML,VUE,React等。
后端的話最好能夠支持任意語言,實際上哪一種開發語言開發的后端都無所謂,因為提供給前端的只是一個接口,前端并不關心后端的具體實現。
在網上搜索過相關的資料,論壇里面也有網友交流過。怎么說呢,一言難盡吧?;举Y料都是非常亂的。
導入后圖片自動上傳到服務器中,圖片和文字HTML自動添加到編輯器中,保留word文檔的格式,字體大小,字體顏色等信息
能夠支持多個系統平臺,比如Windows,macOS,Linux,信創國產化系統,中標麒麟,銀河麒麟,統信UOS,中科方德,龍芯,華為鯤鵬等。
客戶端不用安裝控件。這塊網上資料有一些,找到的論壇里面也有部分交流。
主要的方案就是提供一個轉換接口,轉換接口使用RESTful協議,這樣的話兼容性更好一點,其它的平臺用起來的話更方便簡單一點,而且測試起來也方便。
實際上這個與后端是無關的
現有項目需要為TinyMCE增加導入word文件的功能,導入后word文件里面的圖片自動上傳到服務器中,word里面的文本樣式保留
用戶一般在發新聞和發文章時用到,算是一個高頻使用功能,用戶體驗上來講確實是很好,和以前的發新聞或者發文章的體驗比起來要方便許多,也確實能夠給用戶帶來許多的便利 。
大領導要求提供產品完整源代碼,領導要求能夠自主可控,公司有自己的產品,領導要求能夠集成在自己的產品中給客戶使用。
從使用上來講,確實是非常的方便。
功能:一鍵導入Word轉HTML,不裝控件,不裝Office,
平臺:Windows,macOS,Linux,安卓Android,蘋果iOS,鴻蒙HarmonyOS)
兼容:主流Web編輯器兼容:ckeditor,tinymce,ueditor,wangEditor
優勢:無限授權,完全開源,自主可控,長期維護
場景:OA,CMS,BUG,博客Blog,內容管理平臺,網站,門戶
1.國內唯一商業化開源office轉換解決方案
2.國內唯一免費提供源代碼下載服務
3.國內唯一免費提供授權碼生成器下載服務
4.國內唯一免費提供技術交流群:223813913
5.國內唯一免費提供技術支持服務
6.滿足企業多項目,多產品,多平臺,多終端,多用戶使用需求。
7.滿足企業自主授權,無限授權,變更授權等使用需求。
8.完全開源,滿足企業100%自主安全可控需求。
9.滿足企業自主維護,自主發生,自主開發等需求。
示例下載
https://gitee.com/xproer/zyoffice-ueditor1.5x
主要步驟如下:
1.上傳zyoffice文件夾
2.在工具欄中增加插件按鈕
3.在頁面中引入組件文件,初始化組件
效果
開發文檔:https://drive.weixin.qq.com/s?k=ACoAYgezAAwsDazDKJ
產品比較:https://drive.weixin.qq.com/s?k=ACoAYgezAAwh8oq8Zf
產品源代碼:https://drive.weixin.qq.com/s?k=ACoAYgezAAwjJM8412
授權生成器:https://drive.weixin.qq.com/s?k=ACoAYgezAAwHJfZ8nR
報價單:https://drive.weixin.qq.com/s?k=ACoAYgezAAwsfyDdrf
TML5 元素有多種維度展示方式,常見以下:
根元素
參考文獻:
TML是由多種骨頭(標簽)組成的骨架。
HTML5是更多的新骨頭(標簽),同時去掉了以前覺得不好用的骨頭.
CSS是皮膚。CSS3是更美的皮膚
JS控制單個動作。(抬手,張嘴,放下手,抬腿,轉頭,握拳等)是把一組常用動作編排成了一個招式。
(例如吃飯這個動作里面編排了:拿起勺子,挖一勺飯,把勺子貼近嘴,張嘴,勺子送進嘴,勺子拿出嘴,咀嚼.)
作者:潘韜
鏈接:https://www.zhihu.com/question/20408103/answer/15981004
來源:知乎
著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。
什么是HTML與CSS
超文本標記語言(英文:HyperText Markup Language,HTML) 是為“網頁創建和其它可在網頁瀏覽器中看到的信息”設計的一種標記語言。HTML被用來結構化信息——例如標題、段落和列表等等,也可用來在一定程度上描述文檔的外觀和語義。1982年由蒂姆·伯納斯-李創建,由IETF用簡化的SGML(標準通用標記語言)語法進行進一步發展的HTML,后來成為國際標準,由萬維網聯盟(W3C)維護。
層疊樣式表(英語:Cascading Style Sheets,簡寫CSS) ,又稱串樣式列表,由W3C定義和維護的標準,一種用來為結構化文檔(如HTML文檔或XML應用)添加樣式(字體、間距和顏色等)的計算機語言。目前最新版本是CSS2.1,為W3C的候選推薦標準。CSS3現在已被大部分現代瀏覽器支持,而下一版的CSS4仍在開發過程中。
上面這段引用自維基百科對 HTML 和 CSS 解釋,簡單地向我們闡述了什么是HTML和CSS,但是如果你從來沒有接觸過它們,那請繼續往下看。
來觀察一下你在哪里見過HTML和CSS
其實任何一個使用過電腦的人幾乎都經歷過 HTML 與 CSS,只是可能我們并不知道而已,看下面這些場景:
看看上面的 A,B,C,D 四種情況,其實都和 HTML+CSS有關,怎么知道它有關?很簡單,A會打開一個網頁,其實B也是一個網頁,只不過不是IE打開的而已,C一般也都是進郵箱的網頁界面,而D,看那個情景的最后面說的: 很紅的大號字 ,這也可以知道 HTML+CSS與這肯定有關,雖然你可能還沒有發現,但是很簡單,在上面的任何一種情景下點擊鼠標后鍵,你肯定會看到一個 查看網頁源代碼 或者意思與之相近的選項,點擊它,你就會看到類似下面這樣的開頭的文字:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-hans" version="XHTML+RDFa 1.0" dir="ltr"> <head profile="http://www.w3.org/1999/xhtml/vocab"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> ... </html>
你現在所看到的就是HTML,它是一種超文本標記語言,它的文檔類型為HTML或者相似的如 XHTML 等,我們可以打開任何一個網頁(網頁都是由 HTML構成的),將它另存為,如果不你作任何修改的話,那么你將會得到一個以 .html 結尾的文檔, .html 是最常見的 HTML 文檔后綴,同時使用的還有 .htm ,這是在 DOS 時代,系統最長只能接受三位的后綴,但是現在的你,應該使用 html 。
那CSS又在哪里呢?你問對了,在上面的四個情景下,要說的話,最后那個 很紅的大號字 應該算是最容易說明 CSS 相關性的了,你可以試試,如果你也使用QQ郵箱(其實一般的情況都是可以的),先輸入“給我借十元錢吃早飯”這段文字,然后選擇它,再點擊上面的編輯工具條(這個和Word/WPS等編輯器是很相似的,只不過它是網頁版的),點擊 Tt 這個按鈕,選擇 最大 這個選項,這會把上面這段文字放得到大,然后點擊那個有一個顏色下邊框的大寫的 A 的按鈕,選擇大紅色,這個時候就成了:很大的大號字了?,F在關鍵的地方來了,點擊那個工具條的 <HTML> 按鈕,可以查看到郵件的源代碼,可以看到(餓……)原來不是CSS:
<font size="6" color="#ff0000"> 給我借十元錢吃早飯 </font>
上面這個還是HTML,不過我們可以看到里面有 color="#ff0000" 這樣的(本來還以為會使用標準的CSS呢),這個就表示,這個里面的文字的顏色為 #ff0000,而 #ff0000 是什么?這個以后會說,在這里就直接告訴你,它表示紅色,雖然CSS沒看著,不過沒關系,把上面那三行刪除掉,然后把下面這三行復制到刪除的位置,再點一下編輯框的左上角的 返回編輯器 的按鈕,你會發現,字還更大了一點,顏色也是紅色:
<div style="font-size: 3em; color: #ff0000"> 給我借十元錢吃早飯 </div>
這是為什么呢?在這里, style="font-size: 3em; color: #ff0000" 這一段就是CSS示例了,它的作用就是樣式化HTML元素,在上面的示例中,它樣式化了它所屬于的那一個 DIV 元素(什么是HTML元素?后面慢慢地說,在這里 DIV就是一個元素),讓它的文字大小為 3em (font-size: 3em),文字顏色為 紅色 (color: #ff0000) 。
到現在為止你應該明白一點了:HTML構成網頁,而CSS樣式化HTML元素,所以,CSS樣式化網頁,你現在也應該清楚的知道了,網頁都是由HTML構成的,然后,再想想,CSS是必須的嗎?
簡單的解釋一個網頁
我們現在先使用一個純文本編輯器(如果你使用的是Windows系統,那么就打開記事本軟件)新建一個文件,另存為 demo.html ,然后將下面這一段代碼復制進該文件,再保存:
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8" /> <title>示例網頁</title> </head> <body> <h1>示例網頁</h1> <p>這只是一個很簡單的示例網頁而已,它來自 <a title="Matrix Stack">Matrix Stack</a>。</p> </body> </html>
保存之后,再雙擊該文件看看。發現沒,雙擊它,并不會再打開記事本,而是打開了一個瀏覽器(你系統當前所設置的默認瀏覽器),瀏覽器里面有兩行內容,一行是字體大一些的,內容為 "示例網頁" ,而下面的那一行則是字體小一些的一句話,類似下面這樣的效果
這只是一個很簡單的示例網頁而已,它來自 Matrix Stack 。
為什么我們會看到這樣的內容,我們輸入的那些如 <html> 或者 <h1> 這些內容都云哪里了呢?如果你發現他們不見了,那就像前面說的一樣,在現在的這個網頁里面點一下鼠標的右鍵,然后點擊查看源代碼,你會發現,源代碼就是你輸入的那一段字符。
在上面的這個示例中,那些在網頁里面看不到的內容都是屬于 HTML 標簽,或者稱之為HTML元素,比如 <h1> ,它就是一個HTML標簽,HTML有很多個不同的標簽,不同的標簽有著它存在的特殊意義,比如 <h1> 表示“一級標題”,或者 Heading 1 ,在HTML中,標題有六級,分別為 h1 至 h6 ,同樣的在上面的示例中,那些 <p> ,*<body> 等等的也都是HTML標簽。
我們打開任何一個網址,其實就是瀏覽器在幫你向網絡上的某一臺服務器請求數據,而一般情況下,如果請求到的數據瀏覽器直接為你顯示出來了,那么請求到的數據一般就是HTML文檔(為什么說一般就是HTML文檔,而不是說肯定就是HTML文檔?),就是上面這個示例中這樣的文字,如上面所說的,因為HTML標簽都是有特殊的意義的,瀏覽器會把每一個標簽按它所表示的 意義 展示 給瀏覽器使用者,這里說的展示,并不表現在直接把那些文字顯示出來,比如,你可以做一個下面這樣的示例,在上面的那個 demo.html 文件中的示例網頁那一行下面,加上下面這一行:
<h2>示例網頁</h2> <h3>示例網頁</h3>
保存之后,再使用瀏覽器打開,你就會發現,同樣的文字,因為使用的HTML標簽不同,它的字體大小不同了,這種不同就是瀏覽器給這些標簽作出的解釋,當它遇到<h1> 之后,就知道了,這里面的內容是一個一級標題,我需要把這個文字加粗,并且以最大號兒的字體顯示,但是 <h1; 這個是HTMl標簽,這個文字就不需要顯示。
那么CSS在哪里呢?再來修改一下 demo.html 這個文件,把 <h1; 這一行改成下面這樣的:
<h1 style="color: #ff0000; ">示例網頁</h1>
再使用瀏覽器打開該文件,你會發現,示例網頁這四個字現在變成了紅色的了,在這里,你輸入的 style="color: #ff0000; " 就是一行CSS代碼,從前面關于那個QQ郵箱的示例中你應該已經知道了,這表示這個HTML元素里面的文字要以紅色顯示,看到沒,CSS樣式化了HTML元素,我們再來改一下這一行,改成下面這樣的:
<h1 style="color: #ff0000; font-size: 12px;">示例網頁</h1>
使用瀏覽器打開該文件,看到什么效果了?是不是除了把這四個字改成紅色之后,字體還變得很小了?
稍稍深入理解一下HTML與CSS
在上面的這個示例中,我們創建了一個一級標題,一個二級標題,一個三級標題,以及一個段落( <p> 創建的 ),最開始一級標題很大,還是加粗的,顏色為黑色,后來我們改成了紅色,最后連字體都改成了很小的,那么在我們做這些修改之前,為什么 h1 就比 h2 大呢?原因很簡單,還記得前面說過的瀏覽器看到HTML標簽之后,會根據它的意義展示出該標簽的內容,瀏覽器對于 h1 標簽,它把字體大小改大,再把文字加粗等等,其實就只是為 h1 指定了一個默認的CSS樣式,雖然你沒有明示,但是瀏覽器卻知道,現在開始,你需要安裝一個谷歌瀏覽器(如果不知道怎么安裝,那你就別再繼續往下看了,學學電腦基礎知識要緊),然后使用谷歌瀏覽器打開 demo.html 這個文件(請先把該文件還原成為上面未修改過的那個版本,也就是最開始保存的那個版本,只有一個一級標題和一個段落),打開該文件之后,你也會看到和前面類似的網頁,現在在 示例網頁 四個大字上面點鼠標后鍵,再點擊彈出菜單中的 審查元素 選項,這會在瀏覽器的最下方打開一個分為兩欄的子窗口,后邊的你應該一看就明白,那就是你的網頁源代碼,而右側,有很多選項,點擊第一項 Computed Style 這一項,你就會看到下面這樣的內容:
display: block; font-size: 32px; font-weight: bold; height: 38px; width: 935px;
上面這段內容中的 width: 935px 可能不一樣,為什么不一樣?這一段代碼就是CSS樣式,但是我們并沒有指定過任何樣式,為什么會有?這是因為瀏覽器會為每一個HTML標簽根據其意義添加默認的樣式,而上面這一段CSS樣式就是谷歌瀏覽器為 h1 標簽添加的默認樣式,這個時候你應該知道為什么在上面我們能把它的字體改成很小了吧?還記得嗎?我們把 h1 的 font-size 設置為 12px 之后,字體就變小了,這是因為新的樣式會把舊的樣式覆蓋掉,所以,在上面的示例中,12px 會覆蓋掉32px,所以,字體會變小。
HTML與CSS的版本
HTML與CSS就像我們常常使用的軟件一樣,也是有它們自己的版本的(比如我們中國人用得最多的軟件QQ就有什么2011版,2012版或者2013版等),對于HTML來說,不同的版本體現在它們有很一些特有的標簽,或者同一個標簽的意義不一樣,而對于CSS來說,不同的版本可能有它們各自特有的屬性,事物總是處于發展的過程中,而且一般都是向好的方向發展,HTML與CSS也一樣,新的版本總是提供了很多的功能與特性以滿足現代的需求,比如最開始網頁不能播放視頻,然后可以了,但是在網頁里面加一個視頻很麻煩,而現在,不但可以播放視頻了,而且加入一個視頻也變得很簡單;以前我們如果想做一個美觀的網頁很麻煩,而現在,什么3D技術,動畫等等都可以通過CSS很簡單的實現,所以,對于版本而言,如果你是一個新手,我建議你直接進入到最新版本中來,而我絕大多數情況下,也都是只講最新的版本,但是由于最新版本并不是任何一個瀏覽器都能很好的支持,所以,如果你將來以這些技術為職業,那可能還需要自己云研究其它版本,或者兼容方案,比如在HTML5中,有一個<nav> 標簽,它表示導航,這在HTML5以前是不存在的,所以不支持HTML5的瀏覽器看到這個標簽之后就不知道怎么辦,那么我們要么改用其它替代標簽,要么使用一些特殊的方法告訴老的瀏覽器應該怎么辦。
如何查看以及如何定義一個HTML文檔的HTML版本
比如下面這個示例:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-hans" version="XHTML+RDFa 1.0" dir="ltr"> <head profile="http://www.w3.org/1999/xhtml/vocab"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> ... </html>
這個是某一個網站的HTML代碼片段,中間省略了很多,該網頁所使用的HTML版本可以從第一行查看到,即:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd">
不過有一個好消息是你以后寫任何一個HTML文檔都不再需要在網頁里面加入這么長的一串了,只需要像下面這樣即可:
<!DOCTYPE html>
最新的HTML5只要求你聲明該文檔的類型為HTML即可,不再需要指定HTML的確切版本,不用擔心老瀏覽器不兼容,它們都會知道這是什么東西。
一點小小的擴展
在上面的所有這些示例中,我們都將CSS樣式寫在HTML標簽里面,作為它們的一個屬性,該屬性名稱為 style ,但是,這僅僅只是示例,在以后的文章中,有可能還會出現這種方式,但是請記住,這并不是說我們就應該這么寫,而正好相反,我們不應該這么寫,原因在于:HTML是用來定義文檔結構的,我們不應該在文檔結構中寫入它的樣式,而應該將它們分開,我們稱之為結構與樣式分離,從而達到內容與樣式分離,簡單的實現方法就是把CSS樣式寫進一個單獨的以 .css 為后綴的文件中,然后在HTML文檔中使用一個 link 標簽將該CSS文檔引入到HTML文檔中來,這樣我們如果想修改HTML中元素的樣式就不需要修改HTML文檔了,而僅僅只需要修改它的樣式文件即可。
*請認真填寫需求信息,我們會在24小時內與您取得聯系。