word 转html回显至富文本编辑器中（渲染页面）—

场景：在开发中，前端将本地word导入富文本编辑器中，实现预览、再编辑等功能，我使用的是mammoth插件，并且是基与jquery环境下，后面会放一个demo

注意需要将文件转换.docx文档，本地上传至富文本编辑器中，复杂样式会丢失，目前不花钱的没有找到更好了，如果你们有欢迎留言分享一下。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>test</title></head><body><div class="container"><input id="document" type="file" /><div class="row" style="width: 100%;"><div class="span8"><div id="output" class="well"></div></div></div></div><script src="https://code.jquery.com/jquery-3.1.1.min.Js"></script><!-- 引入本地的jquery库 --><script src="https://cdn.bootcss.com/mammoth/1.4.8/mammoth.browser.js"></script><!-- 引入mammoth库 --><script type="text/javascript">document.getElementById("document").addEventListener("change", readFileInputEventAsArrayBuffer, false);function displayResult(result) {console.log(result);let html = result.value;console.log(html);let newHTML = html.replace(//g, "").replace("<h1>", '<h1 style="text-align: center;">').replace(/<table>/g, '<table style="border-collapse: collapse;">').replace(/<tr>/g, '<tr style="height: 30px;">').replace(/<td>/g, '<td style="border: 1px solid pink;">').replace(/<p>/g, '<p style="text-indent: 2em;">');document.getElementById("output").innerHTML = newHTML;}function readFileInputEventAsArrayBuffer(event) {var file = event.target.files[0];// 为文件改名字，此部分可删除，不影响效果Object.defineProperty(file, "name", {writable: true, //设置属性为可写});var timestamp = Date.parse(new Date());file.name = `file_${timestamp}.docx`;  //在名字中加入时间戳，可以是任意的字符串// 为文件改名字结束var reader = new FileReader();reader.onload = function(loadEvent) {var arrayBuffer = loadEvent.target.result; //arrayBufferconsole.log(arrayBuffer);mammoth.convertToHtml({ arrayBuffer: arrayBuffer }).then(displayResult).done();};reader.readAsArrayBuffer(file);}</script></body>
</html>

word 转html回显至富文本编辑器中（渲染页面）——mammoth.js相关推荐

享元模式在文本编辑器中的应用
如何利用享元模式来优化文本编辑器的内存占用? 你可以把这里提到的文本编辑器想象成 Office 的 Word.不过,为了简化需求背景,我们假设这个文本编辑器只实现了文字编辑功能,不包含图片.表格等复杂 ...
数据结构与算法之美 32 字符串匹配基础（中）：如何实现文本编辑器中的查找功能
如何实现文本编辑器中的查找功能背景 BM 算法的核心思想 BM 算法原理分析 1. 坏字符规则 2. 好后缀规则 BM 算法代码实现背景文本编辑器中的查找替换功能,我想你应该不陌生吧?比如,我们 ...
文本编辑器中命令行参数的应用
文章目录 1 文本编辑器中命令行参数的应用 1 文本编辑器中命令行参数的应用我们要知道对于每一个应用程序我们都能够接收命令行参数,那么对于GUI系统中命令行参数如何传递到应用程序呢? 主要有如下两种 ...
文本编辑器中实现自动换行的功能
文章目录 1 文本编辑器中实现自动换行的功能 1 文本编辑器中实现自动换行的功能实现思路: 获取当前文本编辑框的换行模式. 将模式进行反转后并进行设置. 更新对应QAction对象的状态. 槽函数的 ...
文本编辑器中实现自定义编辑框中字体和大小的功能
文章目录 1 文本编辑器中实现自定义编辑框中字体和大小的功能 1 文本编辑器中实现自定义编辑框中字体和大小的功能实现思路: 通过QFontDialog选择字体及大小. 将QFont对象设置到文本编辑 ...
文本编辑器中实现设置工具栏和状态栏可见性的功能
文章目录 1 文本编辑器中实现设置工具栏和状态栏可见性的功能 1 文本编辑器中实现设置工具栏和状态栏可见性的功能实现思路如下: 通过setVisible()设置可见性. 更新界面上QAction对象 ...
文本编辑器中替换对话框的设计与实现
文章目录 1 文本编辑器中替换对话框的设计与实现 1 文本编辑器中替换对话框的设计与实现替换对话框需求分析: 可复用软件部分. 查找文本框中的指定字符串. 替换单个指定字符串. 替换所有指定字符串. ...
文本编辑器中菜单栏删除功能的实现
文章目录 1 文本编辑器中菜单栏删除功能的实现 1 文本编辑器中菜单栏删除功能的实现菜单栏中删除功能的实现: 定义事件对象KeyPress. 定义事件对象KeyRelease. 发送事件KeyPre ...
富文本编辑器中空格转化为a_如何对富文本编辑器（FCK Html Editor）的工具栏进行扩展？...
我们在项目开发过程中,会经常使用到富文本编辑器.GeneXus内置的富文本编辑器FCK Html Editor使用起来非常方便,只要将页面变量的控件类型(Control Type)选择为FCK Htm ...
JavaScript Iframe富文本编辑器中的光标定位
最近在项目中碰到一个比较棘手的问题: 在iframe富文本编辑器中,有个工具栏,这个工具栏在iframe标签之外,工具栏上有一个按钮,点击该按钮向iframe正在编辑中的光标处插入一个图片,图片会插入 ...

word 转html回显至富文本编辑器中（渲染页面）——mammoth.js

word 转html回显至富文本编辑器中（渲染页面）——mammoth.js相关推荐

最新文章

热门文章