TML5 – 支持WORD上傳的富文本編輯器，ASP.NET支持word上傳的富文本編輯器，PHP支持Word上傳的富文本編輯器，百度ueditor編輯器如何導入word文檔，如何實現導入WORD文檔到UEDITOR編輯器中，導入word文檔到百度編輯器中，將word文檔導入到ueditor編輯器中

前端不固定某一種語言和框架，要求全部都能夠支持，比如HTML5，HTML，VUE，React等。

后端的話最好能夠支持任意語言，實際上哪一種開發語言開發的后端都無所謂，因為提供給前端的只是一個接口，前端并不關心后端的具體實現。

導入后圖片自動上傳到服務器中，圖片和文字HTML自動添加到編輯器中，保留word文檔的格式，字體大小，字體顏色等信息

能夠支持多個系統平臺，比如Windows，macOS，Linux，信創國產化系統，中標麒麟，銀河麒麟，統信UOS，中科方德，龍芯，華為鯤鵬等。

客戶端不用安裝控件。

主要的方案就是提供一個轉換接口，轉換接口使用RESTful協議，這樣的話兼容性更好一點，其它的平臺用起來的話更方便簡單一點，而且測試起來也方便。

現有項目需要為TinyMCE增加導入word文件的功能，導入后word文件里面的圖片自動上傳到服務器中，word里面的文本樣式保留

用戶一般在發新聞和發文章時用到，算是一個高頻使用功能，用戶體驗上來講確實是很好，和以前的發新聞或者發文章的體驗比起來要方便許多，也確實能夠給用戶帶來許多的便利 。

大領導要求提供產品完整源代碼，領導要求能夠自主可控，公司有自己的產品，領導要求能夠集成在自己的產品中給客戶使用。

示例下載

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=ACoAYgezAAwsfyDdrf

持word上傳的富文本編輯器，web編輯器，HTML編輯器，前端編輯器。編輯器網上搜了一下，比較多，

前端用了VUE2,VUE3，React，HTML5，也是一個新項目，為了方便用的這些框架，實際上這個是無所謂，功能的實現和前端這些框架沒什么關系。

后端用了PHP,JSP,ASP,ASP.NET,SpringBoot，功能實現和后端用的什么開發語言無關，后端只提供一個文件上傳的接口，HTTP form協議，圖片上傳時會調這個接口。

編輯器是ckeditor5，為ckeditor編輯器增加粘貼Word圖片的功能，支持快捷鍵操作（Ctrl+V），支持多種系統：Windows,macOS,Linux,信創國產化環境，中標麒麟，銀河麒麟，統信，龍芯。

支持word粘貼，word內容粘貼,word圖文粘貼,word圖片粘貼，粘貼后圖片能夠自動上傳到服務器中，然后將圖片和內容HTML添加到編輯器中，上傳接口地址能夠自定義

示例項目：https://gitee.com/xproer/wordpaster-vue-ckeditor5
1.為ckeditor增加插件按鈕

1.下載ckeditor5源碼，注意：不是在npm中直接安裝ckeditor5，在npm中直接安裝的ckeditor5是已經打包好的編輯器，我們無法為其添加插件，必須下載源碼添加好后再手動打包。

git clone -b stable https://github.com/ckeditor/ckeditor5-build-classic.git

cd ckeditor5-build-classic

2.添加插件文件

將plugin下的插件復制到ckeditor5的目錄中

導入插件

在ckeditor.js中導入插件

3.添加插件

添加到工具欄

# 構建，生成ckeditor.js，生成的ckeditor.js在build目錄下

yarn build

執行命令后生成ckeditor.js

將打包好的ckeditor.js復制到項目中

2.復制layer,wordpaster目錄,安裝jquery

#通過命令安裝jquery

npm install jquery

3.在組件中導入樣式

代碼：

import {WordPaster,WordPasterManager} from ‘../../static/WordPaster/js/w’

import ‘../../static/WordPaster/js/w.css’

import ‘../../static/layer-v3.1.1/layer/layer’

import ‘../../static/layer-v3.1.1/layer/theme/default/layer.css’

4.初始化wordpaster組件

配置posturl,

代碼：

//初始化

WordPaster.getInstance({

PostUrl:”http://localhost:8891/upload.aspx”,

ImageUrl:”http://localhost:8891{url}”

}).Load();

整合效果：

言

HBuilderX，DCloud推出的一款HTML5的Web開發工具，軟件體積小，啟動快。

uni-app，一個使用Vue.js開發所有前端應用的框架，開發者編寫一套代碼，可發布到iOS、Android、Web（響應式）、以及各種小程序、快應用等多個平臺。

準備IDE HBuilderX，下載地址：https://www.dcloud.io/hbuilderx.html，當前的使用的版本是：HBuilder X 3.5.3。

創建過程

1、菜單：文件->新建->項目

2、填寫項目名稱及存儲路徑，選擇對應的模板

3、修改項目文件：hello\pages\index.vue

<template>
	<view class="container">
		<view class="intro">HelloWorld~</view>
		<text class="intro">佚名今人</text>
	</view>
</template>

4、運行項目

注： 第一次運行會自動安裝插件~

5、預覽運行效果