TinyMCE富文本编辑器导入word文件内容,使word文件上的的图文内容能正常显示图片

        今天在使用后台管理系统录入富文本数据时,发现从微信等APP上复制过来的图文内容直接粘贴到TinyMCE富文本编辑器上时图片可以正常显示,而从word上复制过来的图文内容,粘贴时只能显示文字,图片内容不能正常显示。

        查找问题后发现从微信上复制过来的是Base64图片,而从word上复制过来的图片则是file:///xxxx.png这种内容,所以word复制的图片应该是没有调用TinyMCE图片上传并返回链接,才没办法正常显示。

        搜了网上的解决方法,大部分都是说通过TinyMCE的粘贴插件paste 或 powerpaste来实现的,自己试了下目前是还没有实现,有实现的大神麻烦留言指导下。转变思路并查了 TinyMCE中文文档中文手册,发现可以用 TinyMCE 的  importword插件  直接导入word文件来解决。

importword  插件的使用:

1、下载 importword 插件,将文件放置在项目的 public 文件内,下载地址:importword 插件下载

2、在TinyMCE初始化配置里配置拓展插件 importword;

3、配置 toolebar 的导入word文件按钮;

4、配置word导入的  预处理函数 importword_handler、过滤函数   importword_filter ,具体配置参数信息可以查看TinyMCE中文手册;(选配)

// TinyMCE 的初始化配置
init: {
    // 初始化的其他配置
    ...

    // 导入word按钮
    toolbar: 'importword', 

    // 添加扩展配置
    external_plugins: {
        importword: '/importword/plugin.min.js'
    },

    // 预处理函数
    importword_handler: function(editor,files,next){
        var file_name = files[0].name
        if(file_name.substr(file_name.lastIndexOf(".")+1)=='docx'){
            editor.notificationManager.open({
                text: '正在转换中...',
                type: 'info',
                closeButton: false,
            });
            next(files);
        }else{
            editor.notificationManager.open({
                text: '目前仅支持docx文件格式,若为doc,请将扩展名改为docx',
                type: 'warning',
            })
        }
    },
    // 过滤函数
    importword_filter: function(result,insert,message){ 
        // 自定义操作部分
        insert(result) //回插函数
    }
}

         这样,就可以在TinyMCE编辑器上实现导入word文件内容并正常显示word的图片。

  • 3
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 14
    评论
Tinymce提供了一些配置选项,可以实现从Word中复制粘贴内容并保留格式和图片的功能。具体实现步骤如下: 1. 加载tinymce的源文件和plugins目录下的插件文件。例如: ```html <script src="/path/to/tinymce.min.js"></script> <script src="/path/to/plugins/paste/plugin.min.js"></script> <script src="/path/to/plugins/paste/plugin.min.js"></script> ``` 2. 设置tinymce的选项,包括使用的主题、插件和工具栏等。例如: ```javascript tinymce.init({ selector: 'textarea', plugins: 'paste image', toolbar: 'undo redo | bold italic | image', paste_data_images: true, images_upload_url: '/path/to/upload', images_upload_handler: function (blobInfo, success, failure) { // 处理图片上传 } }); ``` 其中,paste_data_images选项用于启用从Word中粘贴图片的功能,images_upload_url和images_upload_handler用于处理上传的图片。 3. 在服务器端处理上传的图片,并返回图片的URL地址。例如,使用PHP实现图片上传功能: ```php <?php if ($_FILES['file']['error'] === UPLOAD_ERR_OK) { $file_tmp = $_FILES['file']['tmp_name']; $file_name = $_FILES['file']['name']; $file_ext = pathinfo($file_name, PATHINFO_EXTENSION); $file_path = '/path/to/images/' . uniqid() . '.' . $file_ext; move_uploaded_file($file_tmp, $file_path); echo json_encode(['location' => $file_path]); } else { echo json_encode(['error' => '上传失败']); } ``` 以上就是使用Tinymce实现从Word中复制粘贴内容并保留格式和图片的方法。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 14
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值