KindEditor - 支持word上传的富文本编辑器

作者:神秘网友 发布时间:2021-11-25 14:06:32

KindEditor - 支持word上传的富文本编辑器

?

图片的复制无非有两种方法,一种是图片直接上传到服务器,另外一种转换成二进制流的base64码
目前限chrome浏览器使用
首先以um-editor的二进制流保存为例:
打开umeditor.js,找到UM.plugins['autoupload'],然后找到autoUploadHandler方法,注释掉其中的代码。
加入下面的代码:

//判断剪贴板的内容是否包含文本

//首先解释一下为什么要判断文本是不是为空

//在ctrl+c word中的文字或者图片之后会返回1种(image/png)或者4种type(text/plain,text/html,text/rtf,image/png)类型的对象

//为了兼容4种格式的情况,做了如下的判断

//如下代码:e.originalEvent.clipboardData.items获得剪贴板的内容

//当粘贴了文本之后text是不为空的,同时也会返回当前文本的图片类型

//如果有文字的话不做任何的处理,如果只粘贴图片的话文本一定是空的,包括复制的桌面图片或者截图的图片

var text = e.originalEvent.clipboardData.getData("text");

if(text == ""){

var items=e.originalEvent.clipboardData.items;

for (var i = 0, len = items.length; i len; i++) {

var item = items[i];

if ( item.kind == 'file' item.type.indexOf('image/') !== -1 ) {

var blob = item.getAsFile();

getBase64(blob, function( base64 ) {

//sendAndInsertImage(base64,me);上传到服务器

setBase64Image(base64,me);

});

//阻止默认事件, 避免重复添加;

e.originalEvent.preventDefault();

};

}

}

两个方法:

//执行插入图片的操作

function setBase64Image(base64,editor){

editor.execCommand('insertimage', {src: base64,_src: base64});

}

//获得base64

function getBase64(blob, callback) {

var a = new FileReader();

a.onload = function(e) {callback(e.target.result);};

a.readAsDataURL(blob);

};

效果展示:

?


详细内容可参考这篇文章:ueditor word图片上传 – 泽优软件博客

讨论群:223813913

?


本文章教程介绍完毕,更多请访问跳墙网其他文章教程!

KindEditor - 支持word上传的富文本编辑器 相关文章

  1. 支持粘贴图片的富文本编辑器

    支持粘贴图片的富文本编辑器 公司做的项目需要用到粘贴Word功能。就是将word内容一键粘贴到网页编辑器(在线富文本编辑器)中。Chrome+IE默认支持粘贴剪切板中的图片,但是我要粘贴的文章存在word里面,图片多达数十张,我...

  2. 百度富文本编辑器ueditor支持上传mp3格式等音频文件的方法

    百度富文本编辑器ueditor支持上传mp3格式等音频文件的方法 百度富文本编辑器ueditor算得上比较强大的了,但是有一个比较令人难受的问题,就是不支持本地上传音频文件。ueditor自带的mp3功能是直接在百度音乐里面搜索加进去的...

  3. 小程序中解析返回的富文本编辑器

    小程序中解析返回的富文本编辑器 问题:如何将返回的对象中包含html解析到小程序页面中 解决办法: 使用WxParse解析富文本编辑器 第一步: 下载插件 去https://github.com/icindy/wxParse下载wxParse, 注意: 只拷贝wxParse文件夹 。 第二...

  4. 富文本编辑器 kindeditor

    富文本编辑器 kindeditor vue项目里面的kindeditor编辑器插件使用 template div class=kindeditor-component textarea :id=id name=content v-model=outContent/textarea /div/templatescriptexport default { name: kindeditor-component, data() { return {

  5. 几款主流好用的富文本编辑器(所见即所得常用编辑器)介绍

    几款主流好用的富文本编辑器(所见即所得常用编辑器)介绍 富文本编辑器 富文本编辑器(Rich Text Editor,RTE)是一种可内嵌于浏览器,所见即所得的文本编辑器。它提供类似于Office Word 的编辑功能,方便那些不太懂HTML用户使...

  6. vue的富文本编辑器vue-quill-editor

    vue的富文本编辑器vue-quill-editor vue-quill-editor 一、安装 npm install vue-quill-editor --save 二、在plugins目录下创建nuxt-quill-plugin.js import Vue from 'vue'import VueQuillEditor from 'vue-quill-editor/dist/ssr'Vue.use(VueQuillEditor);

  7. 【easyui】kindeditor富文本(html编辑器)的使用

    【easyui】kindeditor富文本(html编辑器)的使用 1.下载kindeditor 官网: http://kindeditor.net/down.php 本人使用4.1.10版本百度云下载:点击打开链接 2.放入项目中 3.我是用的jsp前台网页,(前台为easyui) 在jsp中引入kindeditor的js和css样式 link...

  8. KindEditor编辑器上传图片超过限制

    KindEditor编辑器上传图片超过限制 使用KindEditor编辑器上传较大图片时,会出现如下图所示的错误: 超过php.ini允许的大小这样的问题需要到php.ini文件中将upload_max_filesize = 2M的限制大小修改大点即可,当然,不知道php.ini的小伙伴...

  9. KindEditor实现WORD粘贴图片自动上传

    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

  10. ckeditor富文本编辑器的使用和图片上传复制粘贴图片上传

    ckeditor富文本编辑器的使用和图片上传,复制粘贴图片上传 自动导入Word图片,或者粘贴Word内容时自动上传所有的图片,并且最终保留Word样式,这应该是Web编辑器里面最基本的一个需求功能了。一般情况下我们将Word内容粘贴到We...

  11. 富文本编辑器上传图片(及上传后图片不回显处理)

    富文本编辑器上传图片(及上传后图片不回显处理) 最近在做博客系统,其中添加文章需要上传文章图片,在使用wangEditor富文本编辑器上传图片的时候遇到了一些坑,故此记录下来。先上效果图: !DOCTYPE htmlhtml xmlns=http://www.w3.org/1...

  12. 富文本编辑器 从word中复制内容带多张图片

    ? 1.4.2之后官方并没有做功能的改动,1.4.2在word复制这块没有bug,其他版本会出现手动无法转存的情况 本文使用的后台是Java。前端为Jsp(前端都一样,后台如果语言不通得自己做 Base64编码解码) 因为公司业务需要支持IE8 ,网上...

  13. 百度富文本编辑器的多图上传单独放在项目

    百度富文本编辑器的多图上传单独放在项目 在线搜索的功能不是很好用,有待改进!需要改ueditor/php/config.json文件的路径 imagePathFormat: /upload/{filename},/* 上传保存路径,可以自定义保存路径和文件名格式 */ /* {filename} 会替换成原文...

  14. 百度编辑器导入word插件,支持带图片文档导入

    百度编辑器导入word插件,支持带图片文档导入 Laravel、thinkPHP框架需要先安装PHPword,需要用PHPword扩展将word转化成html。该插件主要由两部分组成:编辑器上传word插件和文档转换功能代码,最重要的是文档转换代码文件,需要稍...

  15. 富文本编辑器新增导入word功能,自动转为html,可直接显示图片

    用我现在最常使用的php框架fastadmin举例子,当然thinkphp或者原生php也是同样的原理,大家理解思路就好了、 环境:fastadmin,summernote编辑器【summernote的居中功能在段落里,且不会吃掉section标签,加上导入word功能之后,简直完美~...

  16. django项目中使用ckeditor富文本编辑器并实现图片上传功能

    django项目中使用ckeditor富文本编辑器并实现图片上传功能 一:富文本编辑器实现 pip install django-ckeditor 1、在settings.py文件中,将ckeditorr添加到INATALLED_APPS中。 from django.db import modelsfrom ckeditor.fields import RichTextFieldclass G

  17. Angular5整合富文本编辑器TinyMCE的方法(汉化+上传)

    1. TinyMCE简介 TinyMCE是一个轻量级的富文本编辑器,相对于CK编辑器更加精简,但必须满足绝大部分场景的需要。 2.安装和配置TinyMCE 2.1安装TinyMCE npm install-保存tinymce 2.2设置tinymce局部访问(.angular-cli.json) "scripts": [ "../node_modules/_

  18. 截图表格转可编辑Word文本教程

    截图表格转可编辑Word文本教程 我们知道,图片上的文字一般是不能编辑的,而在图片上编辑文字比较麻烦,要是需要图片中的文字,这时就需要将文字图片转换成Word或txt格式文档。那么,图片上的文字怎样才能转换成word的格...

  19. Mac文本编辑工具Markmy Words for Mac

    Mac文本编辑工具Markmy Words for Mac 还在寻找一款你好用的文本编辑工具吗?小编给大家带来了Markmy Words for Mac文本编辑工具。MarkMyWords为文章提供了简单的格式和结构化功能,这些文章将在Web上发布,并通过使用纯文本文档保...

  20. vue-editor 使用image-added富文本编辑器 图片上传到服务器

    vue-editor 使用image-added富文本编辑器 图片上传到服务器 emm。前提是已经vue-editor 可以正常运行。。 给 vue-editor 添加一个 @image-added 之前加的是驼峰的运行不了,很多文章也提到了 驼峰不行的。再使用图片上传的方法实现 addedImage ...

每天更新java,php,javaScript,go,python,nodejs,vue,android,mysql等相关技术教程,教程由网友分享而来,欢迎大家分享IT技术教程到本站,帮助自己同时也帮助他人!

Copyright 2021, All Rights Reserved. Powered by 跳墙网(www.tqwba.com)|网站地图|关键词