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、预览运行效果