數據傳輸POST心法分享，做前端的你還解決不了這個b

數據傳輸POST心法分享，做前端的你還解決不了這個bug？

景

隨時隨地給大家提供技術支持的葡萄又來了。這次的事情是這樣的，提供demo屬于是常規操作，但是前兩天客戶突然反饋壓縮傳輸模塊拋出異常，具體情況是壓縮內容傳輸到服務端后無法解壓。

由于代碼沒有發生任何變動，前端相關依賴也沒有升級，服務端java版本也沒有變化，所以我們可以推定為環境問題；進一步仔細檢查，經過反復對比后突然發現服務端收到的壓縮內容變長了；和前端請求內容進行對比，發現所有的\r和\n都變成了\r\n。

綜合以上分析我們初步判斷：問題出在了瀏覽器轉譯之中。為了驗證猜想是否正確，葡萄將chrome版本回退到92版，異常消失，服務端接收的內容也沒有被替換。

問題是順利解決了，但是Chrome POST數據內容居然會在傳輸過程中發生變化。一直擅長大前端技術的葡萄絕不認輸，為了弄明白這一原因，我們來看看POST的細節操作到底有什么。

控制字符

首先我們需要搞清楚幾個控制字符的含義。

· 回車符（CR）和換行符（LF）是文本文件用于標記換行的控制字符（control characters）或字節碼（bytecode）。
CR=Carriage Return，回車符號（\r，十六進制 ascii 碼為0x0D，十進制 ascii 碼為13），用于將鼠標移動到行首，并不前進至下一行。
LF=Line Feed，換行符號（ \n, 十六進制 ascii 碼為 0x0A，十進制 ascii 碼為10）。

緊鄰的 CR 和 LF（組成 CRLF，\r\n，或十六進制 0x0D0A）將鼠標移動到下一行行首。（Windows 操作系統默認的文本換行符為 CRLF；Linux 以及 macOS 系統默認使用 LF，早期的 mac os 系統使用 CR 換行。）

在代碼管理中，在不同操作系統下CRLF會有很大不同。下面在不同系統中為大家實際演示一下：

在Mac Visual Code中新建一個文檔默認為LF，而Windows中為CRLF，可以選擇切換行尾序列的內容的類型。

Mac版Visual Code

Windows 版

面對這種情況，需要開發者統一CRLF，以免不同操作系統開發導致代碼管理的混亂。

POST傳輸的數據變化

弄明白了在不同系統中，控制字符會出現不同的原因，接下來我們就需要搞清楚為什么POST的數據在傳輸過程中發生了變化。

我們來寫個簡單Demo測試一下。先在頁面上放一個允許換行的textarea，輸入帶換行的文本，獲取內容看到只有\n轉譯。通過FormData直接post數據到服務端，然后直接返回，看到\n全部變成了\r\n。

瀏覽器標識：

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/99.0.4844.83 Safari/537.36

回退Chrome到92版本，發送和接收文本此時編為一致：

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.107 Safari/537.36三種解決方式

深入探究這一原因，我們了解到互聯網請求意見稿2046（RFC 2046）4.1.1.中有明確說明：

“ The canonical form of any MIME‘text’ subtype MUST always represent a

line break as a CRLF sequence. ”

這里我們可以看到所有的文本類型都要使用CRLF，而Chrome只是修復了一個“bug”，對于用戶而言，在普通文本中用戶感知不到CR、LF和CRLF的區別，但是當使用場景轉換到解壓的文本內容就變得十分重要。

三種解決方式

大家都知道POST是HTTP的一個常用方法，而另一個我們常用的方法是GET。

關于GET和POST區別以及使用相關問題這里不做贅述，要解決POTS傳輸的數據變化問題，最相關的是Content-Type。在POST中常用的Content-Type有application/x-www-form-urlencoded、multipart/form-data和application/json。

首先我們來了解Content-Type和MIME分別是什么：

Content-Type，內容類型，一般是指網頁中存在的Content-Type，用于定義網絡文件的類型和網頁的編碼，決定瀏覽器將以什么形式、什么編碼讀取這個文件，這就是經常看到一些Asp網頁點擊的結果卻是下載到的一個文件或一張圖片的原因。

1、 application/x-www-form-urlencoded

將需要內容提交表單后，內容會按照name1=value1&name2=value2的方式編碼，并且key和valu e都會進行URL轉碼。

對于"\n"和"\r" 會被轉碼為'%0A'和'%0D'，通過這種傳輸方式，避免了瀏覽器的對CRLF的修正可以解決以上問題。

但是這樣轉碼會增加文本長度，原本1個字符變成了3個，結果是壓縮的文本又變長了。

2、multipart/form-data

當需要向服務器提交文件時，就需要使用這種方式。前面代碼中我們可以看到當formData是普通文本是會被修正，為了解決這個情況我們可以將string內容封裝到Blob中作為文件流傳輸，來避免修正。

這樣傳輸，服務端會以文件方式收到內容，直接讀取Stream內容；對于壓縮文本，這種處理方式最優。

var formData=new FormData();

formData.append("data", uploadData)

formData.append("data1", new Blob( [uploadData]))

上圖展示了同樣的內容，使用不同方式進行傳輸。

3、 application/json

Json也是目前比較流行的傳輸方式，json的內容在post傳輸中也不會被改變，如果文本內容不長，也是不錯的方式。

總結

作為一個前端er，除了HTML、CSS和Javascript三大件，熟練使用Axios等類庫調用API，更不可忽視的是要了解如何調試網絡請求，在項目出現問題時能快速定位到問題的所在。

我們還為大家提供了在 Angular 框架下動態加載js文件時返回 Content-Type 為text/html 的Demo，大家感興趣的可以后臺私信小編領取哦。

arkdown工具Typora 完全使用詳解

Matrix 精選

Matrix 是少數派的寫作社區，我們主張分享真實的產品體驗，有實用價值的經驗與思考。我們會不定期挑選 Matrix 最優質的文章，展示來自用戶的最真實的體驗和觀點。

文章代表作者個人觀點，少數派僅對標題和排版略作修改。

Typora 一直是我認為桌面端筆記應用應有的終極形態。用我之前一篇文章中的話來說就是，「它的功能之強大、設計之冷靜、體驗之美妙、理念之先進，我認為值得所有筆記應用廠商學習。」

但一件很尷尬的事情是，由于它極簡的設計理念，有許多使用者并沒能完全地了解到 Typora 的全部強大功能。我想在這篇文章中由淺入深地介紹 Typora 的功能亮點。無論你從未用過 Typora，還是已經體驗了很久，我相信你都能在這篇文章中發現 Typora 新的驚喜。

Typora 是什么？

Typora 是一款支持實時預覽的 Markdown 文本編輯器。它有 OS X、Windows、Linux 三個平臺的版本，并且由于仍在測試中，是完全免費的。

在這篇文章中，我希望以「Typora 是什么」這個問題為線索，向大家全面介紹這款令人愛不釋手的筆記應用。

一個 Markdown 文本編輯器

Typora 首先是一個 Markdown 文本編輯器，它支持且僅支持 Markdown 語法的文本編輯。在 Typora 官網上他們將 Typora 描述為「A truly minimal markdown editor. 」。

官網首頁

關于 Markdown

Markdown 是用來編寫結構化文檔的一種純文本格式，它使我們在雙手不離開鍵盤的情況下，可以對文本進行一定程度的格式排版。你可以在這篇文章中快速入門 Markdown。

由于目前還沒有一個權威機構對 Markdown 的語法進行規范，各應用廠商制作時遵循的 Markdown 語法也是不盡相同的。其中比較受到認可的是 GFM 標準，它是由著名代碼托管網站 GitHub 所制定的。Typora 主要使用的也是 GFM 標準。同時，你還可以在文件 - 偏好設置 - Markdown 語法偏好 - 嚴格模式中將標準設置為「更嚴格地遵循 GFM 標準」。具體內容你可以在官方的這篇文檔中查看。

嚴格模式

寫得舒服

一個文本編輯器，寫得舒服是關鍵。我曾說過，「更有趣的是，一個筆記應用不會因為它支持 Markdown 語法而高級或易用很多。」，細枝末節處的人性化考慮才是最重要的。而 Typora 的編輯體驗顯然是經過深思熟慮設計的產物。

我認為：一個優秀的筆記應用應該給用戶選擇 Markdown 語法風格的權利。而 Typora 在這一點上是我目前見過所有 Markdown 筆記應用中做得最好的。

文本編輯設置

通過打開文件 - 偏好設置你會發現 Typora 為編輯體驗的考慮細致到了令人嘆為觀止的程度。Typora 中提供了大量有關 Markdown 偏好的設置，據此，你可以構建一個幾乎完全適合自己的 Markdown 編輯器。下面我將依次介紹一些與文本編輯體驗有關的功能亮點。

智能標點

我認為「智能標點」是比較有趣的一點。它可以自動幫你將不是很美觀的直引號 " ' 轉化為更美觀的彎引號 “ ‘ ’ ”。具體內容你可以在官方的這篇文檔中查看。關于直彎引號在 macOS 上如何輸入你也可以看這篇文章。

圖片插入

Typora 的圖片插入功能是廣受好評的。要知道，Markdown 原生不太注重圖片插入的功能，但你可以在 Typora 中：

直接使用右鍵 - 復制 Ctrl + V 將網絡圖片、剪貼板圖片復制到文檔中
拖動本地圖片到文檔中

Typora 會自動幫你插入符合 Markdown 語法的圖片語句，并給它加上標題。

復制圖片

你也完全可以使用圖床來保證文檔在分享后圖片仍能正常顯示。

更強大的是，Typora 支持在拖動或 Ctrl + V 網絡圖片后自動將其保存到本地。你可以在文件 - 偏好設置 - 編輯器 - 圖片插入中選擇復制到哪個路徑，什么情況下需要復制。

圖片插入

這一功能保證了即使網絡圖片源失效了，你還有本地的備份可用。同時也能使你的文檔文件夾更合理、完整。

打字機模式和專注模式

「打字機模式」使得你所編輯的那一行永遠處于屏幕正中。

「專注模式」使你正在編輯的那一行保留顏色，而其他行的字體呈灰色。

你可以在視圖 - 專注模式 / 打字機模式中勾選使用這兩個模式。

兩種模式

實時預覽

我想很果斷地下這個結論：到現在還不支持編輯界面實時預覽的 Markdown 編輯器基本可以退出市場了。Typora 在這一方面顯然已經領先了一大步——他們連 Markdown 語法的標記都在實時預覽中消去了。當你離開正在編輯的有格式的文本段后，Typora 會自動隱藏 Markdown 標記，只留下「所見即所得」的美妙。他們把這稱為 Hybrid View。

所見即所得

為了防止一些程序 bug 的發生（雖然在我使用下來感到是很少的）導致格式問題無法修改，Typora 保留了一個「源代碼模式」。你可以通過視圖 - 源代碼模式或左下角的 </> 按鈕進入。

源代碼模式

大綱 / 文件側邊欄

側邊欄

Typora 會根據你 Markdown 標記的 H1、H2、H3…… 各級標題為你呈現一個大綱。

你也可以選擇查看文件夾中的文件，但由于目前 Typora 只支持查看 md 文件，因此我認為文件側邊欄這個功能還是很雞肋的。

空格與換行

Typora 在空格與換行部分主要是使用 CommonMark 作為標注規范。與前文提到的 GFM 一樣，CommonMark 也是比較流行的 Markdown 語言規范（解析器）之一。

空格：在輸入連續的空格后，Typora 會在編輯器視圖里為你保留這些空格，但當你打印或導出時，這些空格會被省略成一個。
你可以在源代碼模式下，為每個空格前加一個 \ 轉義符，或者直接使用 HTML 風格的 &nbps; 來保持連續的空格。
軟換行：需要說明的是，在 Markdown 語法中，換行（line break）與換段是不同的。且換行分為軟換行和硬換行。在 Typora 中，你可以通過 Shift + Enter 完成一次軟換行。軟換行只在編輯界面可見，當文檔被導出時換行會被省略。
硬換行：你可以通過空格 + 空格 + Shift + Enter 完成一次硬換行，而這也是許多 Markdown 編輯器所原生支持的。硬換行在文檔被導出時將被保留，且沒有換段的段后距。
換段：你可以通過 Enter 完成一次換段。Typora 會自動幫你完成兩次 Shift + Enter 的軟換行，從而完成一次換段。這也意味著在 Markdown 語法下，換段是通過在段與段之間加入空行來實現的。
Windows 風格（CR+LF）與 Unix 風格（CR）的換行符：CR 表示回車 \r ，即回到一行的開頭，而 LF 表示換行 \n ，即另起一行。
所以 Windows 風格的換行符本質是「回車 + 換行」，而 Unix 風格的換行符是「換行」。這也是為什么 Unix / Mac 系統下的文件，如果在 Windows 系統直接打開會全部在同一行內。你可以在文件 - 偏好設置 - 編輯器 - 默認換行符中對此進行切換。

下附以上各空格、換行、換段的測試結果圖。具體內容你可以在官網的這篇文檔中查閱。

空格、換行、換段

emoji 表情

如今 emoji 表情越來越多地出現在一些網站文章中，但在桌面端（特別是 Windows 系統）文本編輯器上插入 emoji 是一件十分麻煩的事情。在使用 Typora 之前，我打出 emoji 表情的辦法基本有兩個：

輸入法聯想：優點是比較方便，但會插入一張圖片而不是一個字符，在許多情景下都不是很合適。
復制 emoji 符號：優點是能保證符號的形式，但顯然每次用都需要去復制，比較麻煩。

輸入法聯想

在 Typora 中，你可以用 :emoji: 的形式來打出 emoji，軟件會自動給出圖形的提示，還是比較好用的。

Typora 中輸入 emoji

一個學術文檔編輯器

除了基本的文本編輯體驗極佳之外，Typora 還是一個非常優秀的學術文檔編輯器。當然作為一個輕量級的、基于 Markdown 的編輯器，它不能與那些 LaTeX 編輯器相提并論，但它仍支持了許多可用于學術寫作的功能。

LaTeX

LaTeX 是一種基于 TeX 的排版系統，由于它易于快速生成復雜表格和數學公式，非常適用于生成高印刷質量的科技和數學類文檔。如果你常閱讀數學、計算機等領域的學術論文，你一定對 LaTeX 不陌生。

Typora 原生支持 LaTeX 語法，你有兩種方式輸入 LaTeX 風格的數學公式：

行內公式（inline）：用 $...$ 括起公式，公式會出現在行內。
塊間公式（display）：用 $$...$$ 括起公式（注意 $$ 后需要換行），公式會默認顯示在行中間。

具體的 LaTeX 語法在此不贅述了，你可以在這篇文章中查看。

代碼高亮

Typora 中代碼的插入也可以分為行內和塊間兩種：

行內代碼：用 `...` 或 ``...`` 括起代碼，代碼會以主題中設置的樣式出現在行內，但不會實現代碼高亮。
代碼塊：輸入 ``` 后并輸入語言名，換行，開始寫代碼，Typora 就會自動幫你實現代碼高亮。Typora 原生支持許多編程語言代碼塊的語法高亮，基本日常常用的編程語言它都能很好地支持。
除此以外，你也可以直接換行開始寫，而后再選擇語言。

代碼塊

表格

在 Markdown 中插入表格一直是一件比較頭疼的事情。在一般的 Markdown 編輯器中，你可以通過以下的格式插入表格：

| 左對齊 | 右對齊 | 居中對齊 |
| :-----| ----: | :----: |
| 單元格 | 單元格 | 單元格 |
| 單元格 | 單元格 | 單元格 |

乍一看還挺直觀好用的是吧？但想想，一旦表格內容層次不齊，又或是表格長得難以下手，直接用鍵盤輸入表格就顯得十分麻煩和痛苦了。

好在 Typora 為我們提供了圖形界面的插入表格的功能，你只需要在行內鼠標右鍵 - 插入 - 表格，并輸入行數和列數，Typora 就會自動生成一張樣式不錯的空表格。

Typora 表格

鏈接引用與腳注

鏈接引用類似于我們常在論文末尾看到的「參考文獻」的寫法，你可以通過 []: 的語法來為你的文檔加上鏈接引用。

腳注在少數派的文章中也很常見，即某段話結尾右上角標有數字標記，頁面底部進行注釋的寫法。你可以在需要插入腳注標號的位置寫 [^ number ] ，再在下方通過 [^ number ]: 在文檔中插入腳注。注意不要遺漏了腳注編號 number 前后的空格。

鏈接引用和腳注

文件系統

除了前文提到的文件側邊欄，Typora 還提供了一些耦合度不高的文件系統。

快速打開：你可以通過文件 - 快速打開... 或 Ctrl + P 快捷鍵快速打開最近的文檔。
保存：Typora 支持自動保存，一般很少有寫好的文檔丟失的情況。同時它也提供了諸如「保存」、「另存為」、「保存全部打開的文件...」之類的功能。
導入：Typora 支持非常多的文件格式：.docx, .latex, .tex, .ltx, .rst, .rest, .org, .wiki, .dokuwiki, .textile, .opml, .epub。
導出：Typora 原生支持導出 PDF，HTML等格式。你可以根據軟件內提示安裝 Pandoc 插件來導出更多例如 docx，LaTeX 等格式。

導出

一個偽裝成文本編輯器的瀏覽器

當我的一個朋友問我「Typora 有什么好寫的？」時，我回答「Typora 是一個偽裝成文本編輯器的瀏覽器」。是的，事實上如果你有一定的計算機基礎，你可以找到許多有關于「Typora 其實是一個瀏覽器」的蛛絲馬跡。

圖片插入

在圖片插入的選項中，Typora 用了「復制圖片到 ./${filename}.assets 文件夾」的說法，而這其實是網頁前端常用的 Javascript 字符串模板語法的風格。

再比如，Typora 將更遵循 GFM 標準的 Markdown 語法模式稱為「嚴格模式 Strict Mode」，這一說法常見于 HTML 和 JavaScript 編程中。類似「源代碼模式」的說法也是同理。

當然，最明顯的一點是當你按下 Shift + F12 快捷鍵時，頁面會彈出一個基于 Chrome 的開發者工具欄，也就是我們在瀏覽器中常說的「審查元素」。

審查元素

偽裝從何而來？

當我們把視角放在「Typora 是一個支持 Markdown 語言的文本編輯器」的出發點來考慮這個問題，一切就都顯得很明白了。

John Gruber 在 2004 年用 Perl 創造了 Markdown 語言，這個語言的目的是希望大家使用「易于閱讀、易于撰寫的純文字格式，并選擇性的轉換成有效的 XHTML（或是 HTML）」。也就是說，在 Markdown 誕生之初，它就是為了被瀏覽器閱讀而設計的。

我們在用 Markdown 語言撰寫文稿的時候，其實本質上是在借助某種編程語言的轉化（解析器）來編寫一個 HTML 網頁。Markdown 從它誕生之初就與 Web 技術有著及其緊密的聯系。

如果我說，我們每一篇文稿都是一個網頁，那就很好理解了。Typora 利用解析器先將我們寫的 Markdown 文檔解析成為 HTML 文檔，再為它嵌入一個 CSS 樣式，最后再加上可能需要的腳本等。

HTML

HTML 是一種標記語言，主要負責構成網頁的骨架，它包含所有不加裝飾的網頁元素。在 Typora 的使用場景下則是所有的文本、段落、標題等的記號。

你可以把一張網頁想象成一幅數字油畫，HTML 就是那個黑白線條的底，上面寫滿了數字標記，示意你哪一塊區域要涂什么顏色。而 CSS 則負責在對應的區域涂上顏色，甚至加上一些裝飾等。

數字油畫

HTML 標簽

Typora 支持許多常用的 HTML 標簽，如果你了解 HTML 語法的話，你可以寫出十分美觀豐富的文檔頁面。

HTML 標簽

事實上你可以在 Typora 中完成許多基本的 HTML 風格的文本輸入，例如 HTML 字符、HTML 塊、HTML 風格的注釋，甚至是視頻和音頻。具體支持的功能和限制請在官方文檔中查閱。

有了這一功能，我們就可以在 Typora 中創造出遠超普通 Markdown 文檔的頁面效果。

導出為 HTML

Typora 原生支持將文檔導出為 HTML 格式的文件，并選擇是否要嵌入 style（也就是后文我將提到的 CSS 的部分）。

除此之外，由于其本身「瀏覽器」的屬性，你可以直接在實時預覽界面用 Ctrl +C 復制到 HTML 代碼。一個實用的用處是將這些 HTML 代碼直接 Ctrl + V 黏貼到微信公眾號后臺，基本可以保證兩邊顯示效果相同。這一點不僅使公眾號推送可以有更自由、美觀的樣式，也讓編輯、排版更輕松了。（由于微信自帶瀏覽器的一些特性，可能有少部分 CSS style 不能生效，建議多多校對。）

公眾號

具體如何用 Typora 完成公眾號寫作，你可以在這篇文章中進一步了解。

CSS

為了讓文檔更美觀，我們可以為其加上 CSS style。我認為 Typora 對 CSS 的支持讓它成為一眾桌面筆記應用中最與眾不同的一個。在 Typora 中 CSS 被稱為「主題」，但其本質仍是 CSS 文件。你可以在文件 - 偏好設置 - 主題 - 打開主題文件夾看到這些 CSS 文件。

主題

主題文件夾

選擇不同的主題可以使文檔擁有不同的外觀，但不會影響內容。Typora 自帶了若干主題，你也可以在官網下載更多的主題。

主題商店

除此以外，如果你有一定的 Web 編程基礎，你當然也可以自己修改、新建適合你使用需求的 CSS 文件。我自己就寫了一份名為 WeChat 的 CSS 文件，來符合我公眾號特定的排版需求，例如正文是 15px，頁邊距是 8，小標題是 18px 等等。

CSS 文件

使用 Typora 的「主題」功能寫公眾號的一個好處是，只需要每次都套用同樣的主題，我們就可以在保證每次排版規范都相同的同時，節省許多重復的工作。

YAML front-matter

Typora 支持在文檔頭部加上基于 YAML 的 front-matter 信息，這一特性適用于把 Markdown 文檔分類歸檔上傳到用 Hexo 框架搭建的博客中。我對于這一點不太了解，這里就不誤導大家了。有所了解的朋友可以在評論區談談！

tips：

我想，能夠潛心三年多打磨、測試一個產品，開發者們一定是傾注了極大的心血到這款筆記應用中。而在使用中，我也能體會到開發者的良苦用心。他們不想做知識的儲備中心，不想做快速的草稿、筆記應用，也不想做任何和生產力無關的功能和特性。對于 Typora 的設計和構想，只有唯一的宗旨——「生產效率」。

因為移動端生產效率低，所以只有桌面端應用。因為左顧右盼的兩欄式預覽影響思路，所以他們甚至去掉了 Markdown 語法標記，只留下最終呈現的樣式。因為 Markdown 是為了 HTML 呈現而設計的，所以他們提供了從入門到高級的一系列 Web 輔助功能…… 這一切都只是為了純粹的生產效率。如果我們回頭想想，Markdown 語言本身，當初不也是為了高效地生成簡單網頁而誕生的嗎？

關注了解更多前沿科技信息！

作者：蝸牛直達

evExpress官方技術團隊預計在11月發布HTML/Markdown 編輯器 (v21.2) 的下一個主要版本，此次更新將包括以下的新特性/功能：

DevExtreme Complete Subscription官方最新版免費下載試用，歷史版本下載，在線文檔和幫助文件下載-慧都網

表格支持的增強功能

支持表格調整大小

v21.2允許開發人員調整在HTML/Markdown編輯器中顯示的表格大小，要啟用此新功能，請將tableResizing.enabled屬性設置為 true。您還可以使用tableResizing.minColumnWidth和tableResizing.minRowHeight屬性限制最小列寬和行高：

Angular

<dx-html-editor>
<dxo-table-resizing
[enabled]="true"
[minColumnWidth]="70"
[minRowHeight]="30">
</dxo-table-resizing>
</dx-html-editor>

Vue

<DxHtmlEditor>
<DxTableResizing
:enabled="true"
:min-column-width="70"
:min-row-height="30"
/>
</DxHtmlEditor>

React

<HtmlEditor>
<TableResizing
enabled={true}
minColumnWidth={70}
minRowHeight={30}
/>
</HtmlEditor>

jQuery

$(function() {
$("#html-editor").dxHtmlEditor({
tableResizing: {
enabled: true,
minColumnWidth: 70,
minRowHeight: 30
}
});
});

表格單元格中的多行文本

在v21.2中，HTML/Markdown 編輯器增加了對表格單元格內多行文本的支持，要添加新行，用戶只需按 Enter 鍵即可。

表格上下文菜單

表格單元格現在包括一個帶有常用表格操作命令的上下文菜單，以前這些命令是使用工具欄控件執行的，此上下文菜單的引入允許您為其他控件/命令釋放工具欄空間。

要激活上下文菜單，請將tableContextMenu.enabled屬性設置為 true。您還可以使用 tableContextMenu.items 數組重新排列或隱藏菜單命令：

Angular

<dx-html-editor>
<dxo-table-context-menu
[enabled]="true">
<dxi-item name="tableProperties"></dxi-item>
<dxi-item name="cellProperties"></dxi-item>
</dxo-table-context-menu>
</dx-html-editor>

Vue

<DxHtmlEditor>
<DxTableContextMenu
:enabled="true">
<DxItem name="tableProperties" />
<DxItem name="cellProperties" />
</DxTableContextMenu>
</DxHtmlEditor>

React

<HtmlEditor>
<TableContextMenu
enabled={true}>
<Item name="tableProperties" />
<Item name="cellProperties" />
</TableContextMenu>
</HtmlEditor>

jQuery

$(function() {
$("#html-editor").dxHtmlEditor({
tableContextMenu: {
enabled: true,
items: [ "tableProperties", "cellProperties" ]
}
});
});

支持表格標題

新版本改進了表格標記處理算法，現在支持表格標題 (<thead>)。

要添加標題行，最終用戶可以單擊Insert Header Row工具欄按鈕，使用以下代碼將按鈕添加到工具欄：

Angular

<dx-html-editor>
<dxo-toolbar>
<dxi-item name="insertHeaderRow"></dxi-item>
</dxo-toolbar>
</dx-html-editor>

Vue

<DxHtmlEditor>
<DxToolbar>
<DxItem name="insertHeaderRow" />
</DxToolbar>
</DxHtmlEditor>

React

<HtmlEditor>
<Toolbar>
<Item name="insertHeaderRow" />
</Toolbar>
</HtmlEditor>

jQuery

$(function() {
$("#html-editor").dxHtmlEditor({
toolbar: {
items: [
// ...
"insertHeaderRow"
]
}
});
});

或者，用戶可以從新引入的表格上下文菜單中選擇插入標題行命令。

表格/單元格外觀定制

新的彈出對話框允許用戶根據要求修改表格和單元格屬性。

可以更改下表屬性：

外邊框（樣式、粗細、顏色）
寬度和高度
對齊
填色

單元格支持以下屬性：

外邊框（樣式、粗細、顏色）
寬度和高度
填色
內容對齊（垂直和水平）
填充（垂直和水平）

HTML/Markdown 編輯器將相應的屬性和樣式保存在輸出標記中，并且可以在輸入標記中指定它們時對其進行解析。

支持軟換行

添加了在塊元素（列表、表格、引號）中插入換行符的功能，要開始新行，用戶必須使用 Shift + Enter 組合鍵，將 true 分配給 allowSoftLineBreak 屬性以啟用此功能：

Angular

<dx-html-editor
[allowSoftLineBreak]="true">
</dx-html-editor>

Vue

<DxHtmlEditor
:allow-soft-line-break="true">
</DxHtmlEditor>

React

<HtmlEditor
allowSoftLineBreak={true}>
</HtmlEditor>

jQuery

$(function() {
$("#html-editor").dxHtmlEditor({
allowSoftLineBreak: true
});
});

DevExtreme

DevExtreme擁有高性能的HTML5 / JavaScript小部件集合，使您可以利用現代Web開發堆棧（包括React，Angular，ASP.NET Core，jQuery，Knockout等）構建交互式的Web應用程序。從Angular和Reac，到ASP.NET Core或Vue，DevExtreme包含全面的高性能和響應式UI小部件集合，可在傳統Web和下一代移動應用程序中使用。該套件附帶功能齊全的數據網格、交互式圖表小部件、數據編輯器等。

在線咨詢

上一篇：ASP.NET WEB API實現簡單的文件下載與上
下一篇：在vue中嵌入的html代碼中圖片使用v-viewe

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

數據傳輸POST心法分享，做前端的你還解決不了這個b

景

控制字符

POST傳輸的數據變化

三種解決方式

1、 application/x-www-form-urlencoded

2、multipart/form-data

3、 application/json

總結

表格支持的增強功能

支持軟換行

您的項目需求