kindeditor+粘贴word图片

最新推荐文章于 2024-07-31 16:12:36 发布

M_Snow

最新推荐文章于 2024-07-31 16:12:36 发布

阅读量941

点赞数 11

文章标签： word 前端富文本编辑器

本文链接：https://blog.csdn.net/weixin_45525177/article/details/137502554

版权

kindeditor+粘贴word图片，kindeditor粘贴word图片，kindeditor粘贴word，kindeditor一键粘贴word，kindeditor粘贴word图文，kindeditor粘贴word自动上传图片，

编辑器用的是KindEditor，需要为KindEditor增加复制粘贴图片的功能，复制word图片，复制本地图片，复制后粘贴到编辑器中，自动上传到服务器中。返回图片地址HTML，
需要为KindEditor编辑器增加粘贴Word图片的功能，粘贴后图片能够自动上传到服务器中，服务器地址能够自定义
用户使用操作起来更方便一些，一般发新闻，或者发文章用的比较多，可以说是高频使用，
前端用了VUE2,VUE3，后端用了PHP,JSP,ASP,ASP.NET,SpringBoot

主要步骤如下：

示例下载：http://www.ncmem.com/webapp/wordpaster/versions.aspx
在这里插入图片描述

上传插件文件夹
在这里插入图片描述

上传WordPaster文件夹
在这里插入图片描述

控件初始化
在head中引入组件文件

注意，不要重复引入jquery，如果您的页面已经引入了jquery这里就不要再引入jquery 1.4了。

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>WordPaster For KindEditor-4.x</title>

    <link type="text/css" rel="Stylesheet" href="demo.css" />

    <link type="text/css" rel="Stylesheet" href="WordPaster/js/skygqbox.css" />

    <link type="text/css" rel="stylesheet" href="themes/simple/simple.css" />

    <script type="text/javascript" charset="utf-8" src="kindeditor-min.js"></script>

    <script type="text/javascript" charset="utf-8" src="lang/zh_CN.js"></script>

    <script type="text/javascript" src="WordPaster/js/json2.min.js" charset="utf-8"></script>

    <script type="text/javascript" src="WordPaster/js/jquery-1.4.min.js" charset="utf-8"></script>

    <script type="text/javascript" src="WordPaster/js/skygqbox.js" charset="utf-8"></script>

    <script type="text/javascript" src="WordPaster/js/w.js" charset="utf-8"></script>

</head>

提供容器并初始化组件

<!--WordPaster容器-->

<div id="wdpst"></div>

<script type="text/javascript">

    WordPaster.getInstance({

        ui:{render:"wdpst"}//目标容器，一般为div

    });

</script>