真人一级毛片国产_亚洲av毛片在线免费观看_在线观看国产黄网国内视频_日本极品少妇的粉嫩SEⅩ_欧美成人综合一区二区三区_国产不伦激情在线_男女啪啪激烈高潮免费动态图_av动漫无码观看_山村三级在线播放_国产婷婷素人在线视频网

在線 HTML 編輯器是內(nèi)容管理系統(tǒng)的最核心功能之一,它采用與 Word 類似的可視化編輯方式,實(shí)現(xiàn)對(duì)文章內(nèi)容的“所見即所得”的在線編輯效果。

對(duì)于編輯人員而言,“文章編輯頁(yè)面”是他們使用時(shí)間最長(zhǎng)的地方,而在線編輯器作為“文章編輯頁(yè)面”的核心功能,其設(shè)計(jì)優(yōu)劣將直接影響編輯人員的工作效率。

盡管市面上有許多開源的在線 HTML 編輯器(例如百度 UEditor),但如何讓編輯器更貼近用戶的操作習(xí)慣,仍然是產(chǎn)品設(shè)計(jì)中的一個(gè)挑戰(zhàn)。動(dòng)易遵循業(yè)界普遍做法將百度 UEditor 整合進(jìn)內(nèi)容管理系統(tǒng)里。但動(dòng)易不僅僅是簡(jiǎn)單的整合,而是在此基礎(chǔ)上進(jìn)行深度改進(jìn)和優(yōu)化,從而在功能和用戶體驗(yàn)上有了質(zhì)的飛躍,達(dá)到了“人無(wú)我有,人有我優(yōu)”的效果。

亮點(diǎn)設(shè)計(jì)

重新整理和調(diào)整了工具欄上的按鈕位置和順序

百度 UEditor 的設(shè)計(jì)注重功能的完備性和廣泛適用性,提供了相當(dāng)豐富的按鈕,但這些按鈕的位置和順序并無(wú)優(yōu)化,甚至有些按鈕式多余的,導(dǎo)致編輯器工具欄占用了較多頁(yè)面空間。

我們對(duì)編輯中的每一個(gè)按鈕進(jìn)行了認(rèn)真評(píng)估,根據(jù)使用頻率調(diào)整了按鈕的位置和順序,將相近功能的按鈕進(jìn)行了合并和分組(比如幾種對(duì)齊方式),將“插入圖片、視頻、音頻”等12+項(xiàng)與“插入”相關(guān)的按鈕統(tǒng)一移至“插入”按鈕的下拉菜單中,刪減了部分幾乎用不到的按鈕,以確保在各種分辨率下,最常用的功能按鈕能直接顯示出來(lái),而無(wú)需展開工具欄。從而大幅改善了編輯器在低分辨率下的用戶體驗(yàn)。

  • WebFuture 的 HTML 編輯器(工具欄默認(rèn)狀態(tài))
    百度默認(rèn)的 HTML 編輯器
  • “插入”下拉菜單
  • 特定按鈕固定在工具欄右側(cè)
  • 點(diǎn)擊展開后按鈕顯示第二行

自動(dòng)隱藏顯示工具欄上的按鈕

當(dāng)屏幕分辨率較低時(shí),工具欄上的按鈕如果無(wú)法全部顯示,會(huì)有一部分自動(dòng)隱藏,用戶點(diǎn)擊展開后這些按鈕將顯示在第二行。同時(shí),查找與替換、分頁(yè)、不常見字體提醒、全屏等特定按鈕則固定在工具欄右側(cè),始終保持可見狀態(tài)。

提供多種模式,適配不同場(chǎng)景

百度 UEditor 默認(rèn)處于“全功能模式”,這雖然提供了最豐富的功能,但在某些場(chǎng)景下并不適合使用(過(guò)多的功能反而會(huì)干擾用戶操作)。例如,在添加或修改節(jié)點(diǎn)描述時(shí),使用一個(gè)簡(jiǎn)潔的編輯器來(lái)支持 HTML 即可,無(wú)需像處理文章內(nèi)容那樣需要全功能的 HTML 編輯器。

動(dòng)易改進(jìn)后的在線 HTML 編輯器根據(jù)不同功能模塊的需求,提供了標(biāo)準(zhǔn)、完整、簡(jiǎn)潔、極簡(jiǎn)、微信等多種模式,以適應(yīng)不同的應(yīng)用場(chǎng)景。

  • 標(biāo)準(zhǔn)模式
  • 完整模式
  • 簡(jiǎn)潔模式
  • 極簡(jiǎn)模式
  • 微信模式
  • 標(biāo)準(zhǔn)模式

    保留了完整的操作按鈕,但默認(rèn)僅顯示一行常用按鈕(可根據(jù)分辨率自動(dòng)調(diào)整),并可展開顯示所有按鈕,主要用于文章內(nèi)容以外的表單字段的復(fù)雜 HTML 編輯。

  • 完整模式

    基于標(biāo)準(zhǔn)模式,增加了內(nèi)容分頁(yè)和內(nèi)容大綱(目錄)功能,主要用于文章內(nèi)容編輯。

  • 簡(jiǎn)潔模式

    僅保留常用操作按鈕,適用于只需簡(jiǎn)單編輯 HTML 的表單字段(如節(jié)點(diǎn)描述)。

  • 極簡(jiǎn)模式

    在簡(jiǎn)潔模式基礎(chǔ)上進(jìn)一步減少不常用按鈕。

  • 微信模式

    專為微信發(fā)布內(nèi)容編輯設(shè)計(jì),增加了調(diào)用第三方編輯工具的功能按鈕。

針對(duì)手機(jī)使用進(jìn)行適配和優(yōu)化

針對(duì)在手機(jī)上使用在線編輯器進(jìn)行錄入的場(chǎng)景(如通過(guò)手機(jī)進(jìn)行用戶投稿,或在后臺(tái)管理文章時(shí)進(jìn)行文章錄入/編輯),進(jìn)行了全面的適配和優(yōu)化,確保在這些情況下也能提供良好的用戶體驗(yàn)。標(biāo)準(zhǔn)、全功能、簡(jiǎn)潔、極簡(jiǎn)等每一種模式都具備相應(yīng)的手機(jī)版本,以滿足不同模式下的移動(dòng)端使用需求。

整合錯(cuò)別字和敏感字檢查

系統(tǒng)支持錯(cuò)別字和敏感詞的檢查功能。當(dāng)發(fā)現(xiàn)錯(cuò)別字或者敏感字時(shí),點(diǎn)擊結(jié)果時(shí)會(huì)自動(dòng)定位到編輯器中的具體位置,并將其標(biāo)注出來(lái)。編輯人員可以手動(dòng)確認(rèn),確認(rèn)是錯(cuò)別字和敏感字時(shí)可點(diǎn)擊“更正”按鈕由系統(tǒng)自動(dòng)修正這些錯(cuò)誤。

一鍵導(dǎo)入 Word 文檔

支持一鍵導(dǎo)入 Word 文檔功能,導(dǎo)入時(shí)文檔內(nèi)容會(huì)直接保留原有格式和表格并呈現(xiàn)在編輯器中,文檔中的圖片也會(huì)自動(dòng)上傳到服務(wù)器。系統(tǒng)支持多種 Word 文檔格式,包括 .docx、.doc 和.wps(金山 WPS 的文檔格式)。導(dǎo)入過(guò)程中還可以進(jìn)行個(gè)性化設(shè)置,如將文件名或內(nèi)容的第一行作為標(biāo)題、從內(nèi)容中移除標(biāo)題、自動(dòng)提取第一張圖片作為封面,以及清理格式(包括清除格式、首行縮進(jìn)、字號(hào)、字體、鏈接和圖片)等。

一鍵自動(dòng)排版

點(diǎn)擊“自動(dòng)排版”按鈕,系統(tǒng)會(huì)根據(jù)預(yù)設(shè)的條件智能自動(dòng)排版。預(yù)設(shè)條件包括:合并空行、清除空行、首行縮進(jìn)、清除字號(hào)、清除字體、清除樣式、清除冗余 HTML 代碼、清除冗余 Class、清除 Word 復(fù)制過(guò)來(lái)的特殊格式和符號(hào)、文本對(duì)齊方式、圖片對(duì)齊方式、符號(hào)轉(zhuǎn)換等

自動(dòng)下載遠(yuǎn)程圖片

支持將編輯器中的遠(yuǎn)程圖片自動(dòng)下載并保存到服務(wù)器本地。

截圖自動(dòng)上傳

支持將截圖直接粘貼到編輯器中即可自動(dòng)上傳到服務(wù)器上。

從 Word 中復(fù)制內(nèi)容粘貼到編輯器時(shí)自動(dòng)清理格式

支持在將 Word 內(nèi)容粘貼到編輯器后,自動(dòng)彈出清理和排版對(duì)話框

手機(jī)掃碼上傳

通過(guò)掃描二維碼,用戶可直接將手機(jī)中的圖片上傳至網(wǎng)站,無(wú)需借助電腦。

公式編輯器

集成了公式編輯器,支持直接插入公式,公式以 Base64 編碼的圖片格式插入,確保所見即所得。

內(nèi)容分頁(yè)功能

可開啟或關(guān)閉分頁(yè)功能,進(jìn)入分頁(yè)模式后,支持類似 Word 頁(yè)面視圖的效果(紙張效果),允許用戶可以直接在光標(biāo)處分隔頁(yè)面,可以添加、刪除分頁(yè)、可以向下/向上合并分頁(yè),可以移動(dòng)分頁(yè),也可以設(shè)置分頁(yè)標(biāo)題。

內(nèi)容大綱(目錄)

可選擇開啟或關(guān)閉“目錄”功能。開啟后,編輯器左側(cè)顯示內(nèi)容的目錄結(jié)構(gòu)(自動(dòng)根據(jù)內(nèi)容中設(shè)置的“標(biāo)題1~6”來(lái)自動(dòng)生成文檔的目錄結(jié)構(gòu)),并在內(nèi)容結(jié)構(gòu)變化時(shí)自動(dòng)更新。

圖片描述

支持設(shè)置圖片描述(顯示在圖片下方的文字),支持在上傳圖片時(shí)自動(dòng)將文件名做為圖片描述。

編輯器中的視頻可以直接播放

在編輯器中插入的視頻支持直接播放,提升用戶體驗(yàn)。

設(shè)置編輯區(qū)頁(yè)面寬度

允許設(shè)置編輯區(qū)的頁(yè)面寬度,以盡可能的讓后臺(tái)編輯和前臺(tái)顯示效果一致,最大化實(shí)現(xiàn)“所見即所得”。

文本浮動(dòng)工具欄

選中文本時(shí),自動(dòng)彈出浮動(dòng)文本格式浮動(dòng)工具欄,支持設(shè)置粗體、斜體、下劃線、刪除線、字體顏色、背景色、鏈接等屬性。

圖片浮動(dòng)工具欄

選中圖片時(shí),自動(dòng)彈出圖片浮動(dòng)工具欄,支持旋轉(zhuǎn)、裁剪、設(shè)置圖片尺寸、鏈接、描述、對(duì)齊方式、圖片樣式等操作。

視頻浮動(dòng)工具欄

選中視頻時(shí),自動(dòng)彈出視頻浮動(dòng)工具欄,支持打開視頻源、下載視頻、復(fù)制視頻地址、刪除等操作。

表格顯示優(yōu)化

對(duì)于編輯器中過(guò)寬或過(guò)高的表格,前臺(tái)顯示時(shí)自動(dòng)調(diào)整為預(yù)設(shè)大小并添加滾動(dòng)條。

插入圖片/視頻/音頻/PDF/附件彈窗優(yōu)化

對(duì)插入圖片、視頻、音頻、PDF、附件的彈窗進(jìn)行了優(yōu)化,支持直接上傳,也可從已上傳文件或個(gè)人素材庫(kù)中選擇。

不常見字體提醒

當(dāng)設(shè)置了不常見字體時(shí),系統(tǒng)會(huì)閃爍提醒用戶。

×

用戶登錄