O editor de rich text TinyMCE importa o conteúdo do arquivo word, para que o conteúdo gráfico no arquivo word possa exibir imagens normalmente

        Hoje, ao usar o sistema de gerenciamento de segundo plano para inserir dados rich text, descobri que quando o conteúdo gráfico copiado do WeChat e de outros APPs é colado diretamente no editor de rich text TinyMCE, a imagem pode ser exibida normalmente, enquanto o conteúdo gráfico copiado do Word, ao colar, apenas o texto pode ser exibido e o conteúdo da imagem não pode ser exibido normalmente.

        Depois de pesquisar o problema, descobri que a imagem copiada do WeChat é uma imagem Base64, enquanto a imagem copiada do word é file:///xxxx.png, portanto, a imagem copiada do word não deve chamar a imagem TinyMCE para fazer upload e retornar Os links não são exibidos corretamente.

        Pesquisei soluções na Internet e dizem que a maioria delas é realizada por meio do colar plug-in ou powerpaste do TinyMCE. Eu mesmo tentei, mas ainda não foi realizado. Se houver uma solução, deixe uma mensagem para orientação. Mudei meu pensamento e verifiquei  o manual chinês da documentação chinesa do TinyMCE e descobri que posso usar o plug-in importword do TinyMCE para importar arquivos de palavras diretamente para resolver o problema.

Uso do plug-in importword:

1. Baixe o plug-in importword, coloque o arquivo no arquivo público do projeto, endereço de download: download do plug-in importword

2. Configure a palavra de importação do plug-in de extensão na configuração de inicialização do TinyMCE;

3. Configure o botão importar arquivo word da barra de ferramentas;

4. Configure a função de pré-processamento importword_handler e a função de filtro importword_filter para importação de palavras. Para obter informações específicas sobre parâmetros de configuração, consulte o manual chinês do TinyMCE; (opcional)

// 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) //回插函数
    }
}

         Dessa forma, é possível importar o conteúdo do arquivo word no editor TinyMCE e exibir a imagem da palavra normalmente.

Supongo que te gusta

Origin blog.csdn.net/m0_60312580/article/details/131531382
Recomendado
Clasificación