精华内容
下载资源
问答
  • ueditor富文本编辑器,在其原有的基础上集成Word导入功能,可以将Word转换成HTML,可以解析Word中的图片。Word导入大小配置可以通过修改config.json。
  • Ueditor集成Word导入(富文本编辑器)
  • Vue 自定义富文本编辑器 tinymce 支持导入 word 模板

    万次阅读 热门讨论 2018-09-13 10:03:10
    自定义富文本编辑器分为前端项目和后端项目两个部分,首先先说一下前端项目 前端 前端项目地址: https://github.com/haoxiaoyong1014/editor-ui 编辑器名称: tinymce 前端采用的 vue.js 至于Vue 中怎么集成 ...

    自定义富文本编辑器分为前端项目和后端项目两个部分,首先先说一下前端项目

    前端

    前端项目地址: https://github.com/haoxiaoyong1014/editor-ui

    编辑器名称: tinymce

    前端采用的 vue.js

    至于Vue 中怎么集成 tinymce 编辑器参考: https://segmentfault.com/a/1190000012791569

    其中关键代码在项目中的 index.vue

    <template>
    <div>
      <Row>
        <Col span="18" offset="3">
          <Card shadow>
            <Upload action="http://localhost:2020/upload/word/template"
                    :on-success="handleSuccess">
              <Button icon="ios-cloud-upload-outline">上传模板</Button>
            </Upload>
            <Form ref="editorModel" :model="editorModel" :rules="editorRules">
              <FormItem prop="content">
                <textarea  class='tinymce-textarea' id="tinymceEditer" style="height: 800px">
                </textarea>
              </FormItem>
              <FormItem>
                <Button type="primary" @click="handleSubmit('editorModel')">Submit</Button>
                <Button type="ghost" @click="handleReset('editorModel')">Reset</Button>
              </FormItem>
            </Form>
            <Spin fix v-if="spinShow">
              <Icon type="load-c" size=18 class="demo-spin-icon-load"></Icon>
              <div>加载组件中...</div>
            </Spin>
          </Card>
        </Col>
      </Row>
    </div>
    </template>
    <script>
    import tinymce from 'tinymce';
    import util from '@/libs/util';
    export default {
      name: 'index',
      data () {
        return {
          spinShow: true,
          editorModel: {
            content: 'dfsd'
          },
          content2: 'sdds',
          editorRules: {
            content: [
              {
                type: 'string',
                min: 5,
                message: 'the username size shall be no less than 5 chars ',
                trigger: 'blur'
              }
            ]
          },
          customEditor: null
        };
      },
      methods: {
        handleSuccess(res){
          console.log(res)
          this.customEditor=res.content;
          console.log('haoxy'+this.customEditor)
          tinymce.get('tinymceEditer').setContent(this.customEditor);
          /*this.$nextTick(() => {
            this.customEditor = tinymce.get("tinymceEditer");
          })*/
        },
        init () {
          this.$nextTick(() => {
            let vm = this;
            let height = document.body.offsetHeight - 300;
            tinymce.init({
              selector: '#tinymceEditer',
              branding: false,
              elementpath: false,
              height: height,
              language: 'zh_CN.GB2312',
              menubar: 'edit insert view format table tools',
              plugins: [
                'advlist autolink lists link image charmap print preview hr anchor pagebreak imagetools',
                'searchreplace visualblocks visualchars code fullpage',
                'insertdatetime media nonbreaking save table contextmenu directionality',
                'emoticons paste textcolor colorpicker textpattern imagetools codesample'
              ],
              toolbar1: ' newnote print preview | undo redo | insert | styleselect | forecolor backcolor bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image emoticons media codesample',
              autosave_interval: '20s',
              image_advtab: true,
              table_default_styles: {
                width: '100%',
                height: '100%',
                borderCollapse: 'collapse'
              },
              setup: function (editor) {
                editor.on('init', function (e) {
                  vm.spinShow = false;
                  if (localStorage.editorContent) {
                    tinymce.get('tinymceEditer').setContent(localStorage.editorContent);
                  }
                });
                editor.on('keydown', function (e) {
                  localStorage.editorContent = tinymce.get('tinymceEditer').getContent();
                  vm.editorModel.content = tinymce.get('tinymceEditer').getContent();
                });
              }
            });
            /*this.customEditor = tinymce.get("tinymceEditer");*/
          });
        },
    
    
        handleSubmit (name) {
          this.$refs[name].validate((valid) => {
            if (valid) {
              util.post('/html/pdf', this.editorModel).then(res => {
                this.$Message.success('Success!');
              });
            } else {
              this.$Message.error('Fail!');
            }
          });
        },
        handleReset (name) {
          this.$refs[name].resetFields();
        },
      },
      mounted () {
        this.init();
      },
      destroyed () {
        tinymce.get('tinymceEditer').destroy();
      }
    }
    </script>
    

    在原有的编辑器的基础上新增了上传模板功能, 在上传成功之后拿到服务端 返回的 html 数据,将其设置到

    <textarea class='tinymce-textarea' id="tinymceEditer" style="height: 800px"></textarea>
    这个标签中,所有的编辑器都是这个道理.

    上传成功之后:

    handleSuccess(res){
          console.log(res)
          this.customEditor=res.content;
          console.log('haoxy'+this.customEditor)
          tinymce.get('tinymceEditer').setContent(this.customEditor);
    

    看下效果图:

    image

    点击 submit 我是在后端将其转换成了 pdf 文件(按需求定义)

    如果在集成中出现: Uncaught SyntaxError: Unexpected token < 这个错误

    解决方法:

    在 tinymce.init 中把language : zh_CN.GB2312 去掉

    在你需要的地方引入: import '../../../zh_CN'(我是把 zh_CN.js放到了根目录下了,效果是一样的),

    如果编辑器的样式还是没有出来,只出来一个编辑框的话 ,就在你的根目录下的 index.html 中引入:

    <script src="https://cdn.bootcss.com/tinymce/4.7.4/tinymce.min.js"></script>

    后端

    后端(服务端)项目地址: https://github.com/haoxiaoyong1014/editor-service

    后端采用: springBoot , POI

    这里就不对POI做过多的说明了,贴个官网 https://poi.apache.org/,随意看看。

    整体思路:

    1,在编辑器原来的基础上增加上传模板按钮

    2, 前端上传 word 模板

    3, 服务端接收将 word 转换为html 返回前端

    4, 前端拿到服务端返回的值,将其放到富文本编辑器中

    后端主要是第3步

    首先搞清楚下要将doc/docx文档转成html/htm的话要怎么处理,根据POI的文档,我们可以知道,处理doc 格式文件对应的 POI API 为 HWPF、docx 格式为 XWPF。此处参考下这篇好文:http://www.open-open.com/lib/view/open1389594797523.html 在格式转换上说得很清楚。

    所以整体就是:根据文档类型,doc我们用HWPF对象处理转换、docx用XWPF对象处理转换。

    顺便贴一下这个在线文档 http://poi.apache.org/apidocs/index.html,不得不说看得相当麻烦,特别是XWPF的。

    所需依赖

    <dependency>
          <groupId>org.apache.poi</groupId>
          <artifactId>poi</artifactId>
          <version>3.12</version>
        </dependency>
        
        <dependency>
          <groupId>org.apache.poi</groupId>
          <artifactId>poi-scratchpad</artifactId>
          <version>3.12</version>
        </dependency>
        
        <dependency>
          <groupId>fr.opensagres.xdocreport</groupId>
          <artifactId>fr.opensagres.xdocreport.document</artifactId>
          <version>1.0.5</version>
        </dependency>
        
        <dependency>
          <groupId>fr.opensagres.xdocreport</groupId>
          <artifactId>org.apache.poi.xwpf.converter.xhtml</artifactId>
          <version>1.0.5</version>
        </dependency>
        
          <!-- https://mvnrepository.com/artifact/org.apache.commons.io/commonsIO -->
          <dependency>
            <groupId>org.apache.commons.io</groupId>
            <artifactId>commonsIO</artifactId>
            <version>2.6</version>
          </dependency>
          
        <dependency>
          <groupId>com.aspose.words</groupId>
          <artifactId>aspose-words</artifactId>
          <version>15.8.0</version>
        </dependency>
    

    其中 commonsIO 这个依赖不知道为什么下载不下来,我将 jar 放到了我的私服上,在pom.xml 中有体现,这里不做详细说明

    一、处理doc。

    这个相对简单,网上一查一堆,我的代码也是根据网上的做下自己的优化和逻辑。

    因为POI很早前就可以支持doc的处理,所以资料比较多。

    思路就是:HWPFDocument对象实例化文件流 -> WordToHtmlConverter对象处理HWPFDocument对象及预处理页面的图片等(主要是图片)

    文档说明是:

    Converts Word files (95-2007) into HTML files.
    This implementation doesn’t create images or links to them. This can be changed by overriding AbstractWordConverter.processImage(Element, boolean, Picture) method.

    -> org.w3c.dom.Document对象处理WordToHtmlConverter,生成DOM对象 -> 输出文件。

    这里有个好处就是使用到了Document对象,从而解决了编码、文件格式等问题。

    这里因为过程简单,直接贴简单demo,看注释即可:

    import java.io.ByteArrayOutputStream;
    import java.io.File;
    import java.io.FileInputStream;
    import java.io.FileNotFoundException;
    import java.io.FileOutputStream;
    import java.io.InputStream;
    import java.io.OutputStream;
    import java.util.List;
    
    import javax.xml.parsers.DocumentBuilderFactory;
    import javax.xml.transform.OutputKeys;
    import javax.xml.transform.Transformer;
    import javax.xml.transform.TransformerFactory;
    import javax.xml.transform.dom.DOMSource;
    import javax.xml.transform.stream.StreamResult;
    
    import org.apache.commons.io.FileUtils;
    import org.apache.poi.hwpf.HWPFDocument;
    import org.apache.poi.hwpf.converter.PicturesManager;
    import org.apache.poi.hwpf.converter.WordToHtmlConverter;
    import org.apache.poi.hwpf.usermodel.Picture;
    import org.apache.poi.hwpf.usermodel.PictureType;
    import org.apache.poi.xwpf.converter.core.FileImageExtractor;
    import org.apache.poi.xwpf.converter.core.FileURIResolver;
    import org.apache.poi.xwpf.converter.xhtml.XHTMLConverter;
    import org.apache.poi.xwpf.converter.xhtml.XHTMLOptions;
    import org.apache.poi.xwpf.usermodel.XWPFDocument;
    import org.apache.poi.xwpf.usermodel.XWPFPictureData;
    import org.w3c.dom.Document;
    
    public class POIForeViewUtil {
    
    	public void parseDocx2Html() throws Throwable {
    		final String path = "/tmp/";
    		final String file = "xxxxxxx.doc";
    		InputStream input = new FileInputStream(path + file);
    		String suffix = file.substring(file.indexOf(".")+1);// //截取文件格式名
    
    		//实例化WordToHtmlConverter,为图片等资源文件做准备
    		WordToHtmlConverter wordToHtmlConverter = new WordToHtmlConverter(
    				DocumentBuilderFactory.newInstance().newDocumentBuilder()
    						.newDocument());
    		wordToHtmlConverter.setPicturesManager(new PicturesManager() {
    			public String savePicture(byte[] content, PictureType pictureType,
    					String suggestedName, float widthInches, float heightInches) {
    				return suggestedName;
    			}
    		});
    		if ("doc".equals(suffix.toLowerCase())) {
    			// doc
    			HWPFDocument wordDocument = new HWPFDocument(input);
    			wordToHtmlConverter.processDocument(wordDocument);
    			//处理图片,会在同目录下生成并保存图片
    			List pics = wordDocument.getPicturesTable().getAllPictures();
    			if (pics != null) {
    				for (int i = 0; i < pics.size(); i++) {
    					Picture pic = (Picture) pics.get(i);
    					try {
    						pic.writeImageContent(new FileOutputStream(path
    								+ pic.suggestFullFileName()));
    					} catch (FileNotFoundException e) {
    						e.printStackTrace();
    					}
    				}
    			}
    		} 
    
    		// 转换
    		Document htmlDocument = wordToHtmlConverter.getDocument();
    		ByteArrayOutputStream outStream = new ByteArrayOutputStream();
    		DOMSource domSource = new DOMSource(htmlDocument);
    		StreamResult streamResult = new StreamResult(outStream);
    		TransformerFactory tf = TransformerFactory.newInstance();
    		Transformer serializer = tf.newTransformer();
    		serializer.setOutputProperty(OutputKeys.ENCODING, "utf-8");//编码格式
    		serializer.setOutputProperty(OutputKeys.INDENT, "yes");//是否用空白分割
    		serializer.setOutputProperty(OutputKeys.METHOD, "html");//输出类型
    		serializer.transform(domSource, streamResult);
    		outStream.close();
    		String content = new String(outStream.toByteArray());
    		 //我此时不想让它生成文件,所以我注释掉了,按需求定
            /*FileUtils.writeStringToFile(new File(path, "interface.html"), content,
                    "utf-8");*/
    	}
    
    	public static void main(String[] args) throws Throwable {
    		new POIForeViewUtil().parseDocx2Html();
    	}
    }
    

    其中 content 就是我们想要的 HTML 数据

    接下来我看第二中 docx

    二、处理docx。

    docx是07的版本,处理起来困难的多,貌似POI对docx的处理方法没有doc那么便捷,处理样式等等都有问题,我遇到的两个最明显问题就是字体编码问题和表格的边框线显示。

    思路:XWPFDocument加载文件流 -> XHTMLOptions处理页面资源(主要图片) -> OutputStream输出流直接输出文件。

    过程代码相当简单,可是越简单结果约没有预期的好。输出的文件字体编码默认为GBK,例如我的“微软雅黑”字体就变成“寰蒋闆呴粦”,而且节点的显示也没有doc处理的好。

    同样贴一下demo代码:

    import java.io.File;
    import java.io.FileInputStream;
    import java.io.FileOutputStream;
    import java.io.IOException;
    import java.io.InputStream;
    import java.io.OutputStream;
    
    import javax.xml.transform.OutputKeys;
    import javax.xml.transform.Transformer;
    import javax.xml.transform.TransformerFactory;
    import javax.xml.transform.stream.StreamResult;
    
    import org.apache.poi.xwpf.converter.core.FileImageExtractor;
    import org.apache.poi.xwpf.converter.core.FileURIResolver;
    import org.apache.poi.xwpf.converter.xhtml.XHTMLConverter;
    import org.apache.poi.xwpf.converter.xhtml.XHTMLOptions;
    import org.apache.poi.xwpf.usermodel.XWPFDocument;
    import org.apache.poi.xwpf.usermodel.XWPFPictureData;
    
    public class Word07ToHtml {
    
    	public static void parseToHtml() throws IOException {
    		File f = new File("tmp/xxxxx.docx");
    		if (!f.exists()) {
    			System.out.println("Sorry File does not Exists!");
    		} else {
    			if (f.getName().endsWith(".docx") || f.getName().endsWith(".DOCX")) {
    				
    				// 1) 加载XWPFDocument及文件
    				InputStream in = new FileInputStream(f);
    				XWPFDocument document = new XWPFDocument(in);
    
    				// 2) 实例化XHTML内容(这里将会把图片等文件放到生成的"word/media"目录)
    				File imageFolderFile = new File("f:/opt");
    				XHTMLOptions options = XHTMLOptions.create().URIResolver(
    						new FileURIResolver(imageFolderFile));
    				options.setExtractor(new FileImageExtractor(imageFolderFile));
    				//options.setIgnoreStylesIfUnused(false);
    				//options.setFragment(true);
    				
    			// 3) 将XWPFDocument转成XHTML并生成文件  --> 我此时不想让它生成文件,所以我注释掉了,按需求定
                /*OutputStream out = new FileOutputStream(new File(
                        path, "result.html"));
                XHTMLConverter.getInstance().convert(document, out, null);*/
                ByteArrayOutputStream baos = new ByteArrayOutputStream();
                XHTMLConverter.getInstance().convert(document, baos, options);
                String content = baos.toString();
                baos.close();
    			} else {
    				System.out.println("Enter only MS Office 2007+ files");
    			}
    		}
    	}
    }
    

    其中 content 就是我们想要的 HTML 数据

    点击 submit 我是在后端将其转换成了 pdf 文件(按需求定义)

    POI的jar包下载路径:https://archive.apache.org/dist/poi/release/bin/poi-bin-3.9-20121203.zip

    至此 富文本编辑器增加导入 word 模板就结束了, 无论是导入文件还导入图片都是一个道理.

    注: 前端项目使用方式

    git clone https://github.com/haoxiaoyong1014/editor-ui.git

    进入项目执行:

    npm install

    npm run dev

    前提: 需要安装 npm

    前端项目地址: https://github.com/haoxiaoyong1014/editor-ui

    后端项目地址: https://github.com/haoxiaoyong1014/editor-service

    如果对您有帮助还请给个星星哦!

    2018/10/19更新,更新内容修复 bug

    放到项目中遇到的问题修复

    • 问题描述1:

    当上传模板之后点击浏览器刷新编辑框中的内容会变为之前上传的内容

    • 解决方法:
    
     if (localStorage.editorContent) {
                    tinymce.get('tinymceEditer').setContent(localStorage.editorContent);
                  }
                  
    

    将这段代码注释掉即可,因为编辑器会自动的将内容保存到本地,当你去点击浏览器刷新的时候他会去本地取出并赋值到编辑框中

    • 问题描述2:

    当你在编辑框中进行编辑的时候tinymce编辑器监听了键盘按下的事件,但是键盘按下的前一个字符没有保存,例如:

    你在编辑框中输入4个字符 aaaa 你再点击submit生成pdf文件,但是 pdf文件中就只有3个字符aaa

    • 解决方法:

    因为编辑器只监听了keydown事件,并没有去监听keyup事件
    所以加上如下代码即可

    editor.on('keyup', function (e) {
                  localStorage.editorContent = tinymce.get('tinymceEditer').getContent();
                  vm.editorModel.content = tinymce.get('tinymceEditer').getContent();
                });
    
    
    • 问题描述3:

    当点击submit 生成pdf文件时,生成的 pdf 文件样式改变了

    • 解决方法:

    这是因为将 word 文档转换成 html 的时候自动的加上了这段样式

    <div style="width: 595.0pt; margin: 72.0pt 90.0pt 72.0pt 90.0pt;"></div>

    解决方法可以在前端解决也可以在后端去解决,这里我选择了在后端解决

    后端在返回给前端html 的时候,在返回的内容上加上

    respInfo.setContent("<div style=\"width: 595.0pt; margin: -72.0pt -90.0pt -72.0pt -90.0pt !important;\">"+content+"</div>")

    总结何尝不是一种学习

    展开全文
  • tinymce富文本编辑器集成demo,添加powerpaste插件,支持word、excel带格式粘贴。demo.html
  • 项目中原本使用的富文本编辑器是 wangEditor,这是一个很轻量、简洁编辑器 但是公司的业务升级,想要一个功能更全面的编辑器,我找了好久,目前常见的编辑器有这些: UEditor:百度前端的开源项目,功能强大,基于 ...
  • 环境:fastadmin,summernote编辑器 【summernote的居中功能在段落里,且不会吃掉section标签,加上导入word功能之后,简直完美~】 按照国际惯例先放效果图 github上的demo里我还没有换图标,不过fastadmin里的...

    用我现在最常使用的php框架fastadmin举例子,当然thinkphp或者原生php也是同样的原理,大家理解思路就好了、

     

    环境:fastadmin,summernote编辑器
    【summernote的居中功能在段落里,且不会吃掉section标签,加上导入word功能之后,简直完美~】
     
    按照国际惯例先放效果图
     
     
    github上的demo里我还没有换图标,不过fastadmin里的是换了的,效果如下:
     
     
     

    1、thinkphp使用composer安装phpword插件(这个插件能够把word转为html)

    composer require phpoffice/phpword

    安装完成之后的文件在vender目录下

     

    2、打开require统一管理后台插件的js

    引入我们需要的ajaxfileupload.js插件(这个插件允许文件通过ajax上传到服务器,而不是form表单)

    'ajaxfileupload':'../libs/ajaxfileupload/ajaxfileupload',

     

    3、以新增新闻的编辑器为例,打开

     在开头载入需要的组件

    define(['jquery', 'bootstrap', 'backend', 'table', 'form','summernote','layer','ajaxfileupload'], function ($, undefined, Backend, Table, Form,summernote,layer,ajaxfileupload) {

     

    然后修改add方法

    add: function () {
        Controller.api.bindevent();
    
        
        var imageButton = function (context) {
            var ui = $.summernote.ui;
            var button = ui.button({
                contents: '<i class="fa fa-file-image-o"/>',
                tooltip: __('Choose'),
                click: function () {
                    parent.Fast.api.open("general/attachmentlect?element_id=&multiple=true&mimetype=image/*", __('Choose'), {
                        callback: function (data) {
                            var urlArr = data.url.split(/\,/);
                            $.each(urlArr, function () {
                                var url = Fast.api.cdnurl(this);
                                context.invoke('editor.insertImage', url);
                            });
                        }
                    });
                    return false;
                }
            });
            return button.render();
        };
        var attachmentButton = function (context) {
            var ui = $.summernote.ui;
            var button = ui.button({
                contents: '<i class="fa fa-file"/>',
                tooltip: __('Choose'),
                click: function () {
                    parent.Fast.api.open("general/attachmentlect?element_id=&multiple=true&mimetype=*", __('Choose'), {
                        callback: function (data) {
                            var urlArr = data.url.split(/\,/);
                            $.each(urlArr, function () {
                                var url = Fast.api.cdnurl(this);
                                var node = $("<a href='" + url + "'>" + url + "</a>");
                                context.invoke('insertNode', node[0]);
                            });
                        }
                    });
                    return false;
                }
            });
            return button.render();
        };
    
        // 新增编辑器导入word功能
        var wordBtn = function (context) {
            var ui = $.summernote.ui;
            var button = ui.button({
                contents: '<i class="fa fa-file-word-o"/>',
                tooltip: '导入word',
                click: function () {
                    // 点击之后的操作
                    layer.open({
                        type: 1,
                        skin: 'layui-layer-rim', //加上边框
                        area: ['420px', '160px'], //宽高
                        content: '<input type="file" id="file" name="file" title="上传word" value="" ><br/><input type="button" value="上传" id="submit" />'
                    });
                }
            });
            return button.render();   // return button as jquery object
        };
        $(".summernote,.editor", $('form')).summernote({
            height: 250,
            lang: 'zh-CN',
            fontNames: [
                'Arial', 'Arial Black', 'Serif', 'Sans', 'Courier',
                'Courier New', 'Comic Sans MS', 'Helvetica', 'Impact', 'Lucida Grande',
                "Open Sans", "Hiragino Sans GB", "Microsoft YaHei",
                '微软雅黑', '宋体', '黑体', '仿宋', '楷体', '幼圆',
            ],
            fontNamesIgnoreCheck: [
                "Open Sans", "Microsoft YaHei",
                '微软雅黑', '宋体', '黑体', '仿宋', '楷体', '幼圆'
            ],
            toolbar: [
                ['style', ['style', 'undo', 'redo']],
                ['font', ['bold', 'underline', 'strikethrough', 'clear']],
                ['fontname', ['color', 'fontname', 'fontsize']],
                ['para', ['ul', 'ol', 'paragraph', 'height']],
                ['table', ['table', 'hr']],
                ['insert', ['link', 'picture', 'video']],
                ['select', ['image', 'attachment']],
                ['view', ['fullscreen', 'codeview', 'help','word']],
            ],
            buttons: {
                image: imageButton,
                attachment: attachmentButton,
                word:wordBtn
            },
            dialogsInBody: true,
            followingToolbar: false,
            callbacks: {
                onChange: function (contents) {
                    $(this).val(contents);
                    $(this).trigger('change');
                },
                onInit: function () {
                },
                onImageUpload: function (files) {
                    var that = this;
                    //依次上传图片
                    for (var i = 0; i < files.length; i++) {
                        Upload.api.send(files[i], function (data) {
                            var url = Fast.api.cdnurl(data.url);
                            $(that).summernote("insertImage", url, 'filename');
                        });
                    }
                }
            }
        });
    
    
        // 点击上传按钮,发送ajax,上传word文档,并获取到返回的html地址
        // 动态生成的元素需要使用在document上加点击事件
        $(document).on('click','#submit',function(){
            var path = $('#file').val();
            if ($.trim(path) == "") {
                alert("请选择要上传的文件");
                return;
            }
    
    
            $.ajaxFileUpload({
                url: 'form',  //这里是服务器处理的代码
                type: 'post',
                secureuri: false, //一般设置为false
                fileElementId: 'file', // 上传文件的id、name属性名
                dataType: 'json', //返回值类型,一般设置为json、application/json
                success: function (data, status) {
                    console.log('success')
                },
                error:function(data, status, e){
                    console.log('error')
                    var responseText = data.responseText;
                    // console.log(responseText);
                    // 把html赋值给富文本,,并关闭layui
                    $('.layui-layer-close').click();
                    $(".summernote,.editor", $('form')).summernote('code',responseText);
                }
            });
        });
    },
     

     

     

    4、修改控制器

    use PhpOffice\PhpWord\PhpWord;
    
    ...
    
    public function form(){
    
        // 接收表单上传的文件,并存储到服务器中
        $file = $_FILES['file']['tmp_name'];//上传的文件
        move_uploaded_file($file,"/words/res.docx");
    
    
        // 使用phpword将word转为html
        $phpWord = IOFactory::load('/words/res.docx');
        $xmlWriter = IOFactory::createWriter($phpWord, "HTML");
        $resPath = '/words/res.html';
        $xmlWriter->save($resPath);
    
    
        $html = file_get_contents($resPath);
        return $html;
    }
     
    5、记得public目录下创建一个words文件夹,用来存储word和html文件
     
    ----------------------------------------------------------------------------------------
     
    实践过程中发现base64格式的代码太长、太占空间,于是决定将base64格式的图片转为普通格式的图片,存入服务器
     
    1、修改phpoffice\phpword\src\PhpWord\Element\Image.php
    在这个类文件的最后新增一个方法,用于将base64格式的图片转为普通格式图片存入服务器
    public function base64_image_content($base64_image_content,$path){
            //匹配出图片的格式
            if (preg_match('/^(data:\s*image\/(\w+);base64,)/', $base64_image_content, $result)){
                $type = $result[2];
                $new_file = $path."/".date('Ymd',time())."/";
                if(!file_exists($new_file)){
                    //检查是否有该文件夹,如果没有就创建,并给予最高权限
                    mkdir($new_file, 0700);
                }
                $new_file = $new_file.time().rand(100000000000, 900000000000).".{$type}"; // 如果同时上传多张图片,则时间戳相同会存在覆盖,因为加上随机上确保图片名称不重复
           if (file_put_contents($new_file, base64_decode(str_replace($result[1], '', $base64_image_content)))){ return '/'.$new_file; }else{ return false; } }else{ return false; } }
     
    2、提前创建好存放图片的文件夹
    D:/phpstudy_pro/WWW/word/public/word_images
     
    3、修改phpoffice\phpword\src\PhpWord\Writer\HTML\Element\Image.php
    原先是将图片以base64格式返回的,改为html里访问服务器图片的格式并返回
    public function write()
        {
            if (!$this->element instanceof ImageElement) {
                return '';
            }
            $content = '';
            $imageData = $this->element->getImageStringData(true);
            if ($imageData !== null) {
                $styleWriter = new ImageStyleWriter($this->element->getStyle());
                $style = $styleWriter->write();
                $imageData = 'data:' . $this->element->getImageType() . ';base64,' . $imageData;
    
    
                // 1、获取到项目根目录
                // ---- D:/phpstudy_pro/WWW/word/vendor/phpoffice/phpword/src/PhpWord/Writer/HTML/Element/
                $path = str_replace('\\','/',realpath(dirname(__FILE__).'/'))."/";
                // --- D:/phpstudy_pro/WWW/word
                $path = explode('/vendor/phpoffice/phpword/src/PhpWord/Writer/HTML/Element/',$path)[0];
                
    
                // 2、调用在类中新增的方法,将图片存入 D:/phpstudy_pro/WWW/word/public/word_images
                $imageData = $this->element->base64_image_content($imageData, $path.'/public/word_images');
    
                
                // 3、替换为html里要显示的格式,替换时根据项目的默认路径灵活修改
                $imgPath = str_replace($path."/","",$imageData); // 原生php版本
                // $imgPath = str_replace($path."/public/","",$imageData); // thinkphp版本
                $content .= $this->writeOpening();
    
    
                // 4、返回
                $content .= "<img border=\"0\" style=\"{$style}\" src=\"{$imgPath}\"/>";
                $content .= $this->writeClosing();
    
            }
            return $content;
        }
     
    4、原生php的demo(框架的demo实在太大了,就不放出来了,大家同理自己改写下就好)
    下载项目部署到服务器上,访问form.html即可查看效果~
    展开全文
  • tinymce是很优秀的一款富文本编辑器,可以去官网下载。https://www.tiny.cloud 这里分享的是它官网的一个收费插件powerpaste的旧版本源码,但也不影响功能使用。 ...

    tinymce是很优秀的一款富文本编辑器,可以去官网下载。https://www.tiny.cloud

    这里分享的是它官网的一个收费插件powerpaste的旧版本源码,但也不影响功能使用。

    http://blog.ncmem.com/wordpress/2019/08/07/umeditor%E7%B2%98%E8%B4%B4word%E5%9B%BE%E7%89%87/

    以vue为例说明:

    将tinymce下载后放到static目录下,不用npm安装。

    powerpaste放到\static\tinymce\plugins目录下

    在index.html中引入tinymce.min.js。

    代码参数配置如图:

    将plugins参数里的paste替换成powerpaste,完工。

    最后效果,能够自动批量上传word中的所有图片

    图片上传完后,编辑器里面的图片地址也全部都改成了服务器的图片地址了,

    展开全文
  • 前言:本文记录作者在vue项目中使用到wangEditor富文本编辑器复制粘贴功能所遇到的bug,故此把自己所遇到的坑及问题详细的记录下来。如果觉得作者写的不错,希望得到您的点赞/收藏/支持,如果有不同意见,欢迎下方...

    前言:本文记录作者在vue项目中使用到wangEditor富文本编辑器复制粘贴功能所遇到的bug,故此把自己所遇到的坑及问题详细的记录下来。如果觉得作者写的不错,希望得到您的点赞/收藏/支持,如果有不同意见,欢迎下方评论区留言。

    一、自定义处理粘贴的文本内容

    1、配置 自定义处理粘贴的文本内容~~~如下图

    const E = window.wangEditor
    const editor = new E('#div1')
    
    // 配置粘贴文本的内容处理
    editor.config.pasteTextHandle = function (pasteStr) {
        // 对粘贴的文本进行处理,然后返回处理后的结果
        return pasteStr + '巴拉巴拉'
    }
    
    editor.create()
    

    2、到这里以为就OK了?NO!NO!NO!其实不然,到这里去复制word文档再粘贴进富文本,word文档格式样式是有了,但是也会把word文档样式文本也复制进去~~~如下图
    在这里插入图片描述
    是不是很恶心!别急,下面就是解决该问题的方法。请往下看!

    二、处理粘贴word文档内容携带样式文本

    1、直接上菜!

    //配置 自定义处理粘贴的文本内容
    config.pasteTextHandle = function (pasteStr) {
    	var newStr = pasteStr.replace(/@font-face{[^>]*div.Section0{page:Section0;}/g, "");
    	return newStr
    };
    

    2.效果图
    在这里插入图片描述

    至此,wangEditor复制粘贴word文档的功能就写好了!
    最后来复习一下:如果觉得作者写的不错,希望得到您的点赞/收藏/支持,如果有不同意见,欢迎下方评论区留言。

    展开全文
  • ueditor编辑器增加导入word

    热门讨论 2016-05-31 20:47:08
    下载了ueditor编辑器,但发现缺少一个导入word的功能。找了半天也没有找到,一怒之下自己写了一个。(“代码语言”左边第2个按钮就是,鼠标移上去可以看到提示的。)
  • 很多时候我们用一些管理系统的时候,发布新闻、公告等文字类信息时,希望能很快的将word里面的内容直接粘贴到富文本编辑器里面,然后发布出来。减少排版复杂的工作量。 下面是借用百度doc 来快速实现这个word 粘贴...
  • 这个一个比较完整的ssh整合后实现导入导出excel、百度富文本编辑器使用、highcharts统计图表应用、clob大对象处理等综合性、实用性比较强的案例代码实现
  • 由于工作需要必须将word文档内容粘贴到编辑器中使用 但发现word中的图片粘贴后变成了file:///xxxx.jpg这种内容,如果上传到服务器后其他人也访问不了,网上找了很多编辑器发现没有一个能直接解决这个问题 考虑到...
  • 由于工作需要必须将word文档内容粘贴到编辑器中使用 但发现word中的图片粘贴后变成了file:///xxxx.jpg这种内容,如果上传到服务器后其他人也访问不了,网上找了很多编辑器发现没有一个能直接解决这个问题 考虑到...
  • 很多时候我们用一些管理系统的时候,发布新闻、公告等文字类信息时,希望能很快的将word里面的内容直接粘贴到富文本编辑器里面,然后发布出来。减少排版复杂的工作量。 下面是借用百度doc 来快速实现这个word 粘贴...
  • 由于工作需要必须将word文档内容粘贴到编辑器中使用 但发现word中的图片粘贴后变成了file:///xxxx.jpg这种内容,如果上传到服务器后其他人也访问不了,网上找了很多编辑器发现没有一个能直接解决这个问题 考虑到...
  • Chrome+IE默认支持粘贴剪切板中的图片,但是我要发布...我希望打开Word或者WPS文档后,复制内容然后直接粘贴到富文本编辑器中,编辑器自动将图片批量上传到服务器中,无论文档中有多少张图片,编辑器都全部自动上传,不
  • 基于 phpword 详情移步https://github.com/PHPOffice/PHPWord 一下代码主要基于thinkphp 所以部分代码需要优化 use OSS\Core\OssException; use OSS\OssClient; use PhpOffice\PhpWord\IOFactory; use think\...
  • 如果业务中需要将word文件导入到web富文本编辑器,则需要 1.通过js将word文档转成html代码,以下为所需js代码。 <html> <head> <title>WalkingPoison's Word-to-HTML sample&l...
  • 很多时候我们用一些管理系统的时候,发布新闻、公告等文字类信息时,希望能很快的将word里面的内容直接粘贴到富文本编辑器里面,然后发布出来。减少排版复杂的工作量。 下面是借用百度doc 来快速实现这个word 粘贴...
  • 因为公司业务需要支持IE8 ,网上其实有很多富文本框,效果都很好。 例如www.wangEditor.com 但试了一圈都不支持IE8 。 所以回到Ueditor,由于官方没有维护,新的neuditor 也不知道什么时候能支持word自动转存,...
  • tinymce是很优秀的一款富文本编辑器,可以去官网下载。https://www.tiny.cloud 这里分享的是它官网的一个收费插件powerpaste的旧版本源码,但也不影响功能使用。 ...
  • 富文本编辑器粘贴word

    2019-11-22 09:19:36
    很多时候我们用一些管理系统的时候,发布新闻、公告等文字类信息时,希望能很快的将word里面的内容直接粘贴到富文本编辑器里面,然后发布出来。减少排版复杂的工作量。 下面是借用百度doc 来快速实现这个word 粘贴...
  • 很多时候我们用一些管理系统的时候,发布新闻、公告等文字类信息时,希望能很快的将word里面的内容直接粘贴到富文本编辑器里面,然后发布出来。减少排版复杂的工作量。 下面是借用百度doc 来快速实现这个word 粘贴...
  • tinymce是很优秀的一款富文本编辑器,可以去官网下载。https://www.tiny.cloud 这里分享的是它官网的一个收费插件powerpaste的旧版本源码,但也不影响功能使用。 ...
  • 图片的复制无非有两种方法,一种是图片直接上传到服务器,另外一种转换成二进制流的base64码 目前限chrome浏览器使用 首先以um-editor的二进制流...//在ctrl+c word中的文字或者图片之后会返回1种(image/png)或者4种t
  • UEditor 是由百度「FEX前端研发团队」开发的所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码。在原有基础上增加Word导入功能,Word导入可以解析Word...
  • 因为公司业务需要支持IE8 ,网上其实有很多富文本框,效果都很好。 例如www.wangEditor.com 但试了一圈都不支持IE8 。 所以回到Ueditor,由于官方没有维护,新的neuditor 也不知道什么时候能支持word自动转存,...
  • 图片上传完后,编辑器里面的图片地址也全部都改成了服务器的图片地址了, 所有代码已经全部传到网上,有需要的朋友可以直接下载使用,http://blog.ncmem.com/wordpress/2019/08/07/javaword图片上传控件/ 讨论群:...
  • word内容带样式粘贴到富文本编辑器

    千次阅读 2019-07-29 18:03:22
    最近公司做项目需要实现一个功能,在网页富文本编辑器中实现粘贴Word图文的功能。 我们在网站中使用的Web编辑器比较多,都是根据用户需求来选择的。目前还没有固定哪一个编辑器 有时候用的是UEditor,有时候用的...
  • 因为公司业务需要支持IE8 ,网上其实有很多富文本框,效果都很好。 例如www.wangEditor.com 但试了一圈都不支持IE8 。 所以回到Ueditor,由于官方没有维护,新的neuditor 也不知道什么时候能支持word自动转存,...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,755
精华内容 702
关键字:

富文本编辑器导入word