avascript支持WORD上傳的富文本編輯器,JS支持word上傳的富文本編輯器,html支持word上傳的富文本編輯器,前端支持word上傳的富文本編輯器,vue支持word上傳的富文本編輯器,HTML編輯器粘貼word圖片,web編輯器粘貼word圖片,web富文本編輯器粘貼word,javascript粘貼word圖片,js粘貼word圖片,javascript導(dǎo)入word,js導(dǎo)入word
粘貼word內(nèi)容,粘貼word圖片,粘貼word圖文,用戶發(fā)布新聞的時(shí)候是從word里面復(fù)制圖片和文字,然后將word圖文內(nèi)容粘貼到web富文本編輯器中,希望能夠?qū)ord的圖片自動(dòng)上傳到服務(wù)器中,服務(wù)器地址能夠自定義,后端的話需要支持任意開發(fā)語言,比如ASP,ASP.NET,JSP,PHP,PYTHON等。只要是基于標(biāo)準(zhǔn)HTTP協(xié)議的都要支持。如果能夠不裝控件最好,
1.下載示例:
http://www.ncmem.com/webapp/wordpaster/versions.aspx
2.復(fù)制WordPaster插件目錄
3.引入插件文件
注意:不要重復(fù)引入jquery,如果您的項(xiàng)目已經(jīng)引入了jq,則不用再引入jq-1.4
4.在工具欄中增加插件按鈕
6.初始化控件
注意:
1.如果接口字段名稱不是file,請(qǐng)配置FileFieldName。ueditor接口中使用的upfile字段
參考:http://www.ncmem.com/doc/view.aspx?id=c3ad06c2ae31454cb418ceb2b8da7c45
2.如果接口返回JSON,請(qǐng)配置ImageMatch
參考:http://www.ncmem.com/doc/view.aspx?id=07e3f323d22d4571ad213441ab8530d1
3.如果接口返回的圖片地址沒有域名,請(qǐng)配置ImageUrl
參考:http://www.ncmem.com/doc/view.aspx?id=704cd302ebd346b486adf39cf4553936
4.如果接口有權(quán)限驗(yàn)證(登陸驗(yàn)證,SESSION驗(yàn)證),請(qǐng)配置COOKIE。或取消權(quán)限驗(yàn)證。
參考:http://www.ncmem.com/doc/view.aspx?id=8602DDBF62374D189725BF17367125F3
效果
隨著時(shí)間的推移,瀏覽器已經(jīng)實(shí)現(xiàn)了多個(gè)剪貼板 API,并且在各種舊的和當(dāng)前的瀏覽器中寫入剪貼板而不觸發(fā)錯(cuò)誤是相當(dāng)棘手的。在每個(gè)支持以某種方式復(fù)制到剪貼板的瀏覽器中,clipboard-polyfill都會(huì)嘗試盡可能接近異步剪貼板 API。
github地址:https://github.com/lgarron/clipboard-polyfill
特別提醒:
以前有個(gè)類庫叫clipboard-js,已經(jīng)被廢棄,遷移到了clipboard-polyfill
安裝
npm install clipboard-polyfill
引入
import * as clipboard from "clipboard-polyfill"
使用
文本編輯器(Rich Text Editor)是在網(wǎng)頁上使用的一種所見即所得的文本編輯器,是 Web 應(yīng)用開發(fā)中很常見的需求。
在 HTML 文檔上共有 2 中方式實(shí)現(xiàn)富文本編輯器。一種是使用 iframe,另一種是使用 contenteditable 屬性指定 HTML 文檔元素。
第一種方式是使用 iframe 標(biāo)簽。
在空白的 HTML 文檔中嵌入一個(gè) iframe,并將 designMode 屬性設(shè)置為 "on",文檔就會(huì)變成可編輯的,實(shí)際編輯的則是 <body> 元素的 HTML,默認(rèn)值是 "off"。文檔變成可編輯后,就可以像使用文字處理程序一樣編輯文本,通過鍵盤將文本標(biāo)記為粗體、斜體等等。
作為 iframe 源的是一個(gè)非常簡(jiǎn)單的空白 HTML 頁面。下面是一個(gè)例子:
<!DOCTYPE html>
<html>
<head>
<title>Blank Page for Rich Text Editing</title>
</head>
<body>
</body>
</html>
這個(gè)頁面會(huì)像其他任何頁面一樣加載到 iframe 里。為了可以編輯,必須將文檔的 designMode 屬性設(shè)置為 "on"。不過,只有在文檔完全加載之后可以設(shè)置。在這個(gè)包含頁面內(nèi),需要使用 onload 事件處理程序在適當(dāng)時(shí)機(jī)設(shè)置 designMode,如下面的例子所示:
<iframe name="editor" style="height: 100px; width: 100px"></iframe>
<script>
window.addEventListener("load", () => {
frames["editor"].document.designMode = "on";
});
</script>
以上代碼加載之后,可以在頁面上看到一個(gè)類似文本框的區(qū)域。這個(gè)框的樣式具有網(wǎng)頁默認(rèn)樣式,不過可以通過 CSS 調(diào)整。
第二種方式是使用 contenteditable 屬性指定 HTML 文檔中的元素。該方式是 IE 最早實(shí)現(xiàn)的。使用方式是在一個(gè)元素上添加 contenteditable 屬性并設(shè)置為 true 或者空字符串"",然后該元素會(huì)立即被用戶編輯。如下所示:
<div class="editor" id="editorId" contenteditable="true"></div>
元素中包含的任何文本都會(huì)自動(dòng)被編輯, 元素本身類似于<textarea> 元素。通過設(shè)置contentEditable 屬性,也可以隨時(shí)切換元素的可編輯狀態(tài):
let div = document.getElementById("editorId");
richedit.contentEditable = "true";
contentEditable 屬性有3 個(gè)可能的值:"true" 表示開啟,"false" 表示關(guān)閉,"inherit" 表示繼承父元素的設(shè)置。主流瀏覽器都支持 contentEditable 屬性。
<small>注意:contenteditable 是一個(gè)非常多才多藝的屬性。比如,訪問偽 URL data:text/html, <html contenteditable>可以把瀏覽器窗口轉(zhuǎn)換為一個(gè)記事本。這是因?yàn)檫@樣會(huì)臨時(shí)創(chuàng)建 DOM 樹并將整個(gè)文檔變成可編輯區(qū)域。<small>
上面講到了如何在 HTML 文檔中實(shí)現(xiàn)富文本編輯器,而現(xiàn)在需要了解要使用什么方式與富文本編輯器交互。document 提供了 execCommand() 方法,該方法會(huì)影響使用 contentEditable 屬性實(shí)現(xiàn)可編輯區(qū)域的元素。方法說明如下所示:
execCommand(commandId: string, showUI?: boolean, value?: string): boolean;
該方法執(zhí)行后,會(huì)返回 boolean 值,如果是 false,表示操作不被支持或未被啟用。
注意:在調(diào)用一個(gè)命令前,不要嘗試使用返回值去校驗(yàn)瀏覽器的兼容性
不同瀏覽器支持的命令也不一樣。下標(biāo)列出了最常用的命令。
命令 | 作用 | 可選值 |
backColor | 設(shè)置文檔背景顏色。在styleWithCss模式下,則只影響容器元素的背景顏色。 | 顏色值<color>字符串(IE使用這個(gè)命令設(shè)置文本背景色) |
bold | 切換選中文本的粗體樣式 | null |
copy | 將選中內(nèi)容復(fù)制到剪貼板 | null |
createLink | 將選中內(nèi)容轉(zhuǎn)換為指向給定URL的鏈接 | URL鏈接值,至少包含一個(gè)字符 |
cut | 將選中內(nèi)容剪切到剪貼板 | null |
delete | 刪除選中的內(nèi)容 | null |
fontName | 將選中文本改為使用指定字體 | 字體名(例如:"Arial") |
fontSize | 將選中文本改為指定字體大小 | 提供HTML字體尺寸(1-7) |
foreColor | 將選中文本改為指定顏色 | 顏色值<color>字符串 |
formatBlock | 將選中文本包含在指定的HTML標(biāo)簽中 | 提供HTML標(biāo)簽,如<h1> |
indent | 縮進(jìn)文本 | null |
insertHorizontalRule | 在光標(biāo)位置插入<hr>元素 | null |
insertImage | 在光標(biāo)位置插入圖片 | 圖片的URL鏈接 |
insertOrderedList | 在光標(biāo)位置插入<ol>元素 | null |
insertunorderedlist | 在光標(biāo)位置插入<ul>元素 | null |
insertParagraph | 在光標(biāo)位置插入<p>元素 | null |
italic | 切換選中文本的斜體樣式 | null |
justifyCenter | 在光標(biāo)位置或者所選內(nèi)容進(jìn)行文字居中 | null |
justifyFull | 在光標(biāo)位置或者所選內(nèi)容進(jìn)行文本對(duì)齊 | null |
justifyLeft | 在光標(biāo)位置或者所選內(nèi)容進(jìn)行左對(duì)齊 | null |
justifyRight | 在光標(biāo)位置或者所選內(nèi)容進(jìn)行右對(duì)齊 | null |
outdent | 減小縮進(jìn) | null |
paste | 在光標(biāo)位置粘貼剪貼板內(nèi)容,如果有被選中的內(nèi)容,會(huì)被替換 | null |
redo | 重做被撤銷的操作 | null |
removeFormat | 對(duì)所選內(nèi)容去除HTML格式。這是formatBlock的反操作 | null |
selectAll | 選中編輯區(qū)里的全部?jī)?nèi)容 | null |
strikeThrough | 切換刪除線 | null |
subscript | 切換下角標(biāo) | null |
superscript | 切換上角標(biāo) | null |
underline | 切換下劃線 | null |
undo | 撤銷最近執(zhí)行的命令 | null |
unlink | 取出所選鏈接的<a>標(biāo)簽 | null |
styleWithCSS | 用這個(gè)取代useCSS命令。切換使用HTML tags還是CSS來生成標(biāo)記。 | Boolean值,false使用CSS,true使用HTML |
剪貼板相關(guān)的命令與瀏覽器關(guān)系密切。雖然這些命令并不都可以通過 document.execCommand() 使用,但相應(yīng)的鍵盤快捷鍵都是可以用的。
這些命令可以用于修改 iframe 中富文本區(qū)域的外觀,如下面的例子所示:
// 在內(nèi)嵌窗格中切換粗體文本樣式
frames["editor"].document.execCommand("bold", false, null);
// 在內(nèi)嵌窗格中切換斜體文本樣式
frames["editor"].document.execCommand("italic", false, null);
// 在內(nèi)嵌窗格中創(chuàng)建指向www.wrox.com 的鏈接
frames["editor"].document.execCommand("createlink", false, "http://www.wrox.com");
// 在內(nèi)嵌窗格中為內(nèi)容添加<h1>標(biāo)簽
frames["editor"].document.execCommand("formatblock", false, "<h1>");
同樣的方法也可以用于頁面中添加了 contenteditable 屬性的元素,只不過要使用當(dāng)前窗口而不是內(nèi)嵌窗格中的 document 對(duì)象:
// 切換粗體文本樣式
document.execCommand("bold", false, null);
// 切換斜體文本樣式
document.execCommand("italic", false, null);
// 創(chuàng)建指向www.wrox.com 的鏈接
document.execCommand("createlink", false, "http://www.wrox.com");
// 為內(nèi)容添加<h1>標(biāo)簽
document.execCommand("formatblock", false, "<h1>");
注意:使用bold的命令在瀏覽器中生成的 HTML 差別很大。如在 IE 和 Opera 中使用<strong>標(biāo)簽,在 Safari 和 Chrome 中使用<b>標(biāo)簽,在 Firefox 中使用 <span> 標(biāo)簽。
document 中提供了 queryCommandEnabled() 方法:
queryCommandEnabled(commandId: string): boolean;
該方法用于確定對(duì)當(dāng)前選中文本或光標(biāo)所在位置是否可以執(zhí)行相關(guān)命令。true 指令可用,false 不可用。如下所示:
let result = document.queryCommandEnabled("selectAll");
但要注意,返回 true 并不代表允許執(zhí)行相關(guān)命令,只代表當(dāng)前選區(qū)適合執(zhí)行相關(guān)命令。在 Firefox 中,queryCommandEnabled("cut") 即使默認(rèn)不允許剪切也會(huì)返回 true。
document 還提供 queryCommandState() 方法:
queryCommandState(commandId: string): boolean;
該方法用于確定相關(guān)命令是否應(yīng)用到了當(dāng)前文本選區(qū)。如下所示:
let isBold = document.queryCommandState("selectAll");
富文本編輯器可以利用這個(gè)方法更新粗體、斜體等按鈕。
在介紹一下 queryCommandValue() 方法:
queryCommandValue(commandId: string): string;
這個(gè)方法用于返回執(zhí)行命令時(shí)使用的值,參考 execCommand() 方法使用的第三個(gè)參數(shù)。如下所示,如果一段選中文本應(yīng)用了值為 5 的 "fontsize" 命令,使用該方法會(huì)返回 5:
let fontSize = document.queryCommandValue("fontsize");
這個(gè)方法可用于確定如何將命令應(yīng)用于文本選區(qū),從而進(jìn)一步?jīng)Q定是否需要執(zhí)行下一個(gè)命令。
Selection 對(duì)象表示用戶選中的文本范圍或光標(biāo)的位置,它代表頁面中的文本選區(qū)。可以使用 window 或 document 對(duì)象調(diào)用 getSelection() 方法獲取文本選區(qū)。Selection 對(duì)象擁有以下屬性。
Selection 的屬性并沒有包含很多有用的信息。好在它的以下方法提供了更多信息,并允許操作選區(qū)。
下面介紹一個(gè)例子,是使用 Selection 對(duì)象實(shí)現(xiàn)選中文本高亮:
function highlight() {
let selection = document.getSelection();
// 取得表示選區(qū)的范圍
let range = selection.getRangeAt(0);
// 高亮選中的文本
let span = document.createElement("span");
span.style.backgroundColor = "yellow";
// 給選中文本添加背景為黃色的<span>標(biāo)簽
range.surroundContents(span);
}
效果如下:
因?yàn)楦晃谋揪庉嫴皇窃诒韱慰丶袑?shí)現(xiàn),這意味著要將富文本編輯結(jié)果提交給服務(wù)器,就要手動(dòng)進(jìn)行。我們會(huì)在表單中添加一個(gè) type="hidden" 的字段,在提交表單時(shí),通過監(jiān)聽器,從元素中提取出 HTML 并插入隱藏字段中。如下所示:
// form 實(shí)例是`<form>` 元素,可以使用DOM獲取
form.addEventListener("submit", (event) => {
let target = event.target;
target.elements["content"].value = frames["editor"].document.body.innerHTML;
});
上述從編輯器中獲取了 HTML 后,將其插入名為 content 的字段中。下面是對(duì)于 contenteditable 元素實(shí)現(xiàn)的方式:
這里,代碼使用文檔主體的 innerHTML 屬性取得了 iframe 的 HTML,然后將其插入名為 "comments" 的表單字段中。這樣做可以確保在提交表單之前給表單字段賦值。如果使用 submit() 方法手工提交表單,那么要注意在提交前先執(zhí)行上述操作。對(duì)于 contenteditable 元素,執(zhí)行這一操作的代碼是類似的:
// form 實(shí)例是`<form>` 元素,可以使用DOM獲取
form.addEventListener("submit", (event) => {
let target = event.target;
target.elements["content"].value = document.getElementsByClassName("editor")[0].innerHTML;
});
本文介紹了實(shí)現(xiàn)富文本編輯器有兩種方式:使用 iframe 和 contenteditable 屬性。介紹了使用 document.execCommand() 方法來實(shí)現(xiàn)加粗、斜體樣式等功能,還有一些相應(yīng)的功能。而且富文本編輯的內(nèi)容要上傳到服務(wù)器,還要將內(nèi)容先復(fù)制到表單中的一個(gè)字段上,然后在提交。
*請(qǐng)認(rèn)真填寫需求信息,我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。