Umeditor realiza transferência automática de imagens de palavras

Como fazer upload de imagens em lotes no ueditor?

1. Código de referência de front-end

<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns = "http://www.w3.org/1999/xhtml">

<head>

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

 

   <title> Versão completa do editor example-1.2.6.0 </title>

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

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

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

    <link type = "text / css" rel = "folha de estilo" href = "WordPaster / js / skygqbox.css" />

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

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

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

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

</head>

<body>

    <textarea name = "key of background value" id = "myEditor"> escreva seu conteúdo inicial aqui </textarea>

    <script type = "text / javascript">

        var pasterMgr = new WordPasterManager ();

    pasterMgr.Config ["PostUrl"] = "http: // localhost: 81 / WordPaster2 / WordPasterUEditor1x / php / upload.php"

    pasterMgr.Load (); // Controle de carga

 

          UE.getEditor ('myEditor', (onready: function () {// Cria uma instância do editor

              pasterMgr.SetEditor (this);

          }});

    </script>

</body>

</html>

solicitação

A solicitação padrão para upload de arquivo é um arquivo como dados de formulário com um campo "upload".

Resposta: O arquivo foi enviado com sucesso

A resposta JSON quando o arquivo é carregado com sucesso:

carregado- é definido como 1.

fileName - o nome do arquivo carregado.

url-O URL do arquivo enviado.

Resposta: O arquivo não pôde ser carregado

carregado- é definido como 0.

error.message-A mensagem de erro a ser exibida ao usuário.

2. O caminho da imagem na palavra colada é preencher: // D. Eu entendo que este formato não é compatível com muitos navegadores que não são seguros.

O projeto atual usa um método flexível:

Primeiro carregue a palavra para o fundo, análise de poi, armazene a imagem, converta o html, substitua a imagem e exiba-a na caixa de rich text

(Há um buraco na exibição de rich text: nenhuma maneira de atribuir um valor diretamente ao rich text é encontrada, o registro deve ser destruído primeiro

sucesso: função (dados) {

     $ ('# conteúdo'). attr ('valor', data.imagePath);

     var editor = CKEDITOR.instances ["content"]; // O valor do atributo "name" do seu editor

     if (editor) {

       editor.destroy (true); // Destrua o editor

      }    

     CKEDITOR.replace ('content'); // Substitua o editor, editorID é o valor do atributo "id" de ckeditor

     $ ("# content"). val (result); // Atribuir um valor ao editor

     //CKEDITOR.instances.contentCkeditor.setData ($ ("# content"). Text ());

 }

3. Receba a imagem carregada e salve-a no servidor

<? php

ob_start ();

// 201201/10

$ timeDir = date ("Ym"). "/". date ("d");

$ uploadDir = dirname (__ FILE __). '/ upload /'.$ timeDir;

$ curDomain = "http: //". $ _ SERVER ["HTTP_HOST"]. "/";

// Caminho relativo http://www.ncmem.com/upload/2012-1-10/

$ relatPath = $ curDomain. "WordPaster2 / WordPasterUEditor1x / php / upload /". $ timeDir. "/";

 

// Cria diretório automaticamente. upload / 2012-1-10

if (! is_dir ($ uploadDir))

{

mkdir ($ uploadDir, 0777, true);

}

 

// Se a página PHP for codificada em UTF-8, use urldecode para decodificar o nome do arquivo

// $ fileName = urldecode ($ _ FILES ['postedFile'] ['nome']);

// Se a página PHP for a codificação GB2312, o nome do arquivo pode ser lido diretamente

$ fileName = $ _FILES ['arquivo'] ['nome'];

$ tmpName = $ _FILES ['arquivo'] ['tmp_name'];

 

// Pegue a extensão do arquivo jpg, gif, bmp, png

$ path_parts = pathinfo ($ fileName);

$ ext = $ path_parts ["extensão"];

$ ext = strtolower ($ ext); // jpg, png, gif, bmp

 

// Só permite fazer upload de arquivos de tipo de imagem

if ($ ext == "jpg"

    || $ ext == "jpeg"

    || $ ext == "png"

    || $ ext == "gif"

    || $ ext == "bmp")

{

    // Year_month_day_hour, minuto, segundo, milissegundo.jpg

    $ saveFileName = $ fileName;

 

    //xxx/2011_05_05_091250000.jpg

    $ savePath = $ uploadDir. "/". $ saveFileName;

 

    // Salvar como novo nome de arquivo

    if (! move_uploaded_file ($ tmpName, $ savePath))

    {

exit ('upload error!'. "Nome do arquivo:". $ fileName. "Salvar caminho:". $ savePath);

    }

}

 

// Caminho da imagem de saída

// $ _ SERVER ['HTTP_HOST'] localhost: 81

// $ _ SERVER ['REQUEST_URI'] /FCKEditor2.4.6.1/php/test.php

$ reqPath = str_replace ("upload.php", "", $ _ SERVER ['REQUEST_URI']);

echo $ relatPath. $ saveFileName;

header ('Content-type: text / html; charset = utf-8');

header ('Content-Length:' .ob_get_length ());

?>

Mostrar resultados:

 

Você precisa configurá-lo antes de usar, você pode consultar este artigo que escrevi: http://blog.ncmem.com/wordpress/2019/08/07/umeditor%E7%B2%98%E8%B4%B4word%E5% 9B% BE% E7% 89% 87 /

Grupo de discussão: 223813913

Acho que você gosta

Origin blog.csdn.net/weixin_45525177/article/details/108493887
Recomendado
Clasificación