富文字編輯器貼上複製Word

2021-09-24 10:25:48 字數 2841 閱讀 5972

我希望開啟文件doc直接複製貼上到富文字編輯器,直接發布 

在網上查了很多資料,ueditor和其它的web編輯器(富文字編輯器)在chrome中可以支援單張貼上。但是我們的使用者需要處理的是word中的和文字,一般情況下word中的可能有十幾張。有時候有幾十張。特別是使用者發一些教程或者使用說明類的文件時都是大幾十張的。

在網上找到說ueditor支援word貼上,試了一下,只支援一張的貼上。多張貼上還需要使用者自已手動選擇。也就是說如果使用者貼上的word中包含20張的話,那麼使用者就需要手動選擇20次,這種操作使用者是不可能接受的。

網上找了很久,大部分都有一些不成熟的問題,皇天不負有心人終於讓我找到了乙個成熟的專案。

1、前台頁面引用**

請求

檔案上傳的預設請求是乙個檔案,作為具有「upload」欄位的表單資料。

響應:檔案已成功上傳

當檔案成功上傳時的json響應:

uploaded- 設定為1。

filename - 上傳檔案的名稱。

url - 上傳檔案的url。

響應:檔案無法上傳

uploaded- 設定為0。

error.message - 要顯示給使用者的錯誤訊息。

2、貼上word裡面的路徑是fill://d 這種格式 我理解這種是非瀏覽器安全的 許多瀏覽器也不支援

目前專案是用了一種變通的方式:

先把word上傳到後台 、poi解析、儲存 、轉換html、替換、放到富文字框裡顯示

(富文字顯示有個坑:沒找到直接給富文字賦值的方法 要先銷毀 記錄下

success : function(data)      

ckeditor.replace('content'); //替換編輯器,editorid為ckeditor的"id"屬性的值

$("#content").val(result);    //對editor賦值

"#content").text());

}

3.接收上傳的並儲存在服務端

//只支援上傳

}}http協議

請求頭資料:

請求表單資料:

前端效果:

接下來就看一下具體操作吧

1、開啟工程:

對於文件的上傳我們需要知道這個專案的邏輯是否符合我們的構造。

執行:

嘗試使用文件複製後貼上進來:

上傳進度

看來這個工程完全符合我們的預期,全部使用img標籤統一。傳輸進度條的效果超出了我的意料。

被統一放置在資料夾。

由此看來這個專案的實際效果大大超出了我的意料了,帶入工程後完美的優化了工程專案

工程目錄截圖:

控制項包:

ie(x86):

ie(x64):

chrome:

firefox:

exe:

fckeditor2x:

ckeditor3x:

ckeditor4x:

cuteeditor6x:

kindeditor3x:

kindeditor4x:

tinymce3x:

tinymce4x:

ueditor1x:

xheditor1x:

ewebeditor:

富文字編輯器

關於使用富文字編輯器的一些小坑 官網 1.專案 片 editor fail function xhr,editor,result custominsert function insertimg,result,editor this.editor.create this.editor.txt.html...

富文字編輯器

富文字編輯器,rich text editor,簡稱 rte,它提供類似於 microsoft word 的編輯功能。常用的富文字編輯器 kindeditor ueditor ckeditor 在頁面中新增js 用於初始化kindeditorallowfilemanager 是否允許瀏覽伺服器已上傳...

富文字編輯器

富文字編輯器,rich text editor,簡稱 rte,它提供類似於 microsoft word 的編輯功能。常用的富文字編輯器 kindeditor ueditor ckeditor 在頁面中新增js 用於初始化kindeditor allowfilemanager 是否允許瀏覽伺服器已上...