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.