Ir para conteúdo
Omar~

[Resolvido] Ajuda com tinymce arquivos por ajax

Recommended Posts

Opa blz?! Alguém que já utilizou ou utiliza esse editor pode me ajudar?

 

É o seguinte tenho a situação.

Uma página que é aberta via ajax para criar o conteúdo com o tinymce, seria a página de postagem, nela criei 2 submits um para registrar a página outro para pré visualização.

Essa seria a página:

Spoiler

<?php
require_once (__DIR__ . '/../../system/runtime.php');
$get = GlobalFilter::filterGet();
$str = new StrClean();
$check = new CheckData();
$action = $str->formatStr($get->action);

try {
    if (!$check->insertPage(isset($session->member->type) ? $session->member->type : null)) {
        throw new ConstException("Sem permissão para gerenciar páginas", ConstException::INVALID_REQUEST);
    } else if ($check->checkCategory($action)) {
        throw new ConstException($check->resp, ConstException::SYSTEM_ERROR);
    } else {
        ?>
        <div class="page-load font-medium relative">
            <div id="preview"></div>
            <form method="POST" id="insertpage">
                <div class="container-high margin-lr over-x font-medium">
                    <input name="category" type="hidden" value="<?= $action ?>"/>
                    <p>Título</p>
                    <input type="text" name="pagetitle" maxlength="30" class="input-default"/>

                    <p>Conteúdo</p>
                    <textarea name="pagecontent" class="mcepaste" style="min-height: 450px; resize:none;" wrap="off"></textarea>
                </div>
                <div class="bg-light-grey text-white align-right font-medium">
                    <div class="container-high padding-all">
                        <button type="submit" class="btn btn-info maximize-d" onclick="return smcore.postPage();">
                            <span class="icon-paste"></span> Postar Página
                        </button>
                        <button type="submit" class="btn btn-default maximize-d text-grey" onclick="return smcore.previewPage();">
                            <span class="icon-insert-template"></span> Pré visualizar
                        </button>
                    </div>
                </div>
            </form>
        </div>
        <script src="lib/javascript/ediorPage.js" type="text/javascript"></script>
        <?php
    }
} catch (ConstException $e) {
    switch ($e->getCode()) {
        case ConstException::INVALID_REQUEST:
            $agent = new UserAgent();
            $error = "*Arquivo - {$e->getFile()}\n"
                    . "*Linha - {$e->getLine()}\n"
                    . "*IP - {$agent->requestIP()}\n"
                    . "*Navegador - {$agent->getBrowser()}\n"
                    . "*Sistema - {$agent->getOs()}";
            DataApi::errorRegister($error);
            include (__DIR__ . '/../error/404.php');
            break;
        case ConstException::SYSTEM_ERROR:
            DataApi::errorRegister("{$e->getMessage()}\n *Arquivo [ {$e->getFile()} ]\n *Linha [ {$e->getLine()} ]");
            include (__DIR__ . '/../error/505.php');
            echo $action;
            break;
    }
}

 

 

Bem não há problemas enquanto a postagem, sim o problema está na questão que depois de salva em um banco de dados eu criei a opção de editar a página, ela é acessada via ajax.

E então foi passar informações via get no ajax para fazer a consulta no banco de dados sobre essa página, assim preenchendo a texarea com o valor obtido.

Daí o problema que ao tentar visualizar a previsão ou salvar a edição nunca salva, o que foi editado, só mantendo o valor que estava no banco.

Aqui a página de edição:

Spoiler

<?php
require_once (__DIR__ . '/../../system/runtime.php');
$get = GlobalFilter::filterGet();
$str = new StrClean();
$check = new CheckData();
$redirect = $str->formatStr($get->redirect);
$action = (int) $str->formatStr($get->action);

try {
    if (!$check->insertPage(isset($session->member->type) ? $session->member->type : null)) {
        throw new ConstException("Sem permissão para gerenciar páginas", ConstException::INVALID_ACESS);
    } else if ($check->checkCategory($redirect)) {
        throw new ConstException($check->resp, ConstException::SYSTEM_ERROR);
    } else {
        $select = new Select();
        $select->selectQuery($redirect, "page_id = :dataid", "dataid={$action}");
        if ($select->selectError) {
            throw new ConstException($select->selectError, ConstException::QUERY_ERROR);
        } else if (!$select->selectCount()) {
            throw new ConstException("Não localizado página ID {$action} no banco de dados", ConstException::QUERY_ERROR);
        } else {
            $pageData = $select->selectResult()[0];
            ?>
            <div class="page-load font-medium relative">
                <div id="preview"></div>
                <form method="POST" id="insertpage">
                    <div class="container-high margin-lr over-x font-medium">
                        <input name="category" type="hidden" value="<?= $redirect ?>"/>
                        <input name="pageid" type="hidden" value="<?= $action ?>"/>
                        <p>Título</p>
                        <input type="text" name="pagetitle" value="<?= $str->linkName($pageData->link_name) ?>" maxlength="30" class="input-default"/>
                        <p>Conteúdo</p>
                        <textarea name="pagecontent" class="mcepaste" style="min-height: 450px; resize:none;" wrap="off"><?= $pageData->page_data ?></textarea>
                    </div>
                    <div class="bg-light-grey text-white align-right font-medium">
                        <div class="container-high padding-all">
                            <button type="submit" class="btn btn-info maximize-d" onclick="return smcore.editPage();">
                                <span class="icon-paste"></span> Editar Página
                            </button>
                            <button type="submit" class="btn btn-default maximize-d text-grey" onclick="return smcore.previewPage();">
                                <span class="icon-insert-template"></span> Pré visualizar
                            </button>
                        </div>
                    </div>
                </form>
            </div>
            <script src="lib/javascript/ediorPage.js" type="text/javascript"></script>
            <?php
        }
    }
} catch (ConstException $e) {
    switch ($e->getCode()) {
        case ConstException::INVALID_ACESS:
            $agent = new UserAgent();
            $error = "*Arquivo - {$e->getFile()}\n"
                    . "*Linha - {$e->getLine()}\n"
                    . "*IP - {$agent->requestIP()}\n"
                    . "*Navegador - {$agent->getBrowser()}\n"
                    . "*Sistema - {$agent->getOs()}";
            DataApi::errorRegister($error);
            include (__DIR__ . '/../error/404.php');
            break;
        case ConstException::SYSTEM_ERROR:
            DataApi::errorRegister("{$e->getMessage()}\n *Arquivo [ {$e->getFile()} ]\n *Linha [ {$e->getLine()} ]");
            include (__DIR__ . '/../error/505.php');
            break;
        case ConstException::QUERY_ERROR:
            DataApi::errorRegister("{$e->getMessage()}\n *Arquivo [ " . basename(__FILE__) . " ]\n *Linha [ {$e->getLine()} ]");
            include (__DIR__ . '/../error/404.php');
            break;
    }
}

 

 

Essas são as funções Javascript, que por sua vez solicitam dados de uma classe Javascript que criei para execuções de Ajax

Spoiler

        /** ******************************************************
         * * @function : Executa o processo de postagem de
         * páginas a validação e feita em janela modal
         ** ******************************************************/
        var EditPage = function () {
            tinymce.triggerSave();
            modalControl('hiddenX');
            modalControl('open', 'Nova Página');
            smcore.prototype = new SmAjax();
            return smcore.prototype.postModal('insertpage', 'system/modules/action/editpage_v.php', 'modal-load');
        };

        /** ******************************************************
         *  * @function : Executa o processo de postagem de
         *  páginas a validação e feita em janela modal
         ** ******************************************************/
        var PostPage = function () {
            tinymce.triggerSave();
            modalControl('hiddenX');
            modalControl('open', 'Nova Página');
            smcore.prototype = new SmAjax();
            return smcore.prototype.postModal('insertpage', 'system/modules/action/postpage_v.php', 'modal-load');
        };

        /** ******************************************************
         * * @function : Exibe em tela cheia o que foi postado
         * como página.
         * * @Info : Essa função não salva páginas.
         ** ******************************************************/
        var PreviewPage = function () {
            tinymce.triggerSave();
            smcore.prototype = new SmAjax();
            return smcore.prototype.postAjax('insertpage', 'system/modules/action/previewpage_v.php', 'preview');
        };

 

 

Não vou postar a Classe JS do ajax por ser muito grande e por ter certeza que o problema não é esse.

 

Se precisar de mais informações é só dizer...

Mas meu problema é esse quando abro o arquivo de edição via ajax o tinymce abre normalmente para edição com a texteare no valor correto, mas na hora de salva não salva o conteúdo editado e sim o conteúdo antigo.

Olhando no ferramenta de inspeção do navegador, notei que o mesmo não altera o valor da antiga textarea daí o motivo.

Então tentei pegar o valor inserido o nome conteúdo do tiny e re-escrever a antiga textearea com o mesmo valor, mas mesmo assim não funcionou.

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Graças a excelente ferramenta de inspeção do mozila conseguir encontrar a solução.

Em primeiro notei que quando aberto via ajax o arquivo que conta a textarea que não só adiciono o valor vindo do banco mas como ela também é o valor que será usado para edição, percebi que mesmo o tinymce abrindo ele não limpava essa textarea para inserir novo valor no local.

Optei então por usar o javascript e limpar aparte das funções do tinymce, o que não obtive sucesso.

Então optei por re-escrever a área com o valor do editor, mas o problema que nesse caso precisaria de um textarea com ID o que ocorria um bug ao ficar carregando via ajax os arquivos então nada mais fui pegar o ID do iframe criado pelo próprio editor que esse id é idêntico ao atributo name da textarea, daí só foi re-escrever a textarea como o novo valor do editor.

var textarea = document.querySelector('.mcepaste');
var tValue = tinyMCE.get('pagecontent').getContent();
textarea.value = tValue;

.mcepaste : é o div class da textarea

pagecontent : é name da textarea

 

Mas nem tudo é tão fácil, surgiu outro problema, e eu abrisse via ajax o arquivo e o editasse seu conteúdo, logo então ir a outro arquivo e tentar editar o valor inserido era o mesmo da edição anterior.

Putz memória alocada?!

Fui novamente a ferramenta de inspeção e notei que a cada ajax executado o tinymce levava mais MS para carregar, o que comprovou o que imaginava, toda vez que abria um ajax um novo edior era mantido na memória sem excluir o anterior.

O que fui simples resolver, bastasse que eu removesse todos os dados antigos antes de iniciar uma nova instância do editor.

 

Ficando assim o arquivo JS que abre junto com os arquivos via ajax.

Spoiler

var tinymce = tinymce || {};

tinymce.remove(); // Remover não só os editores já criados como também todos dados de memória

tinymce.init({
    language: 'pt_BR',
    skin: 'smtiny',
    selector: 'textarea',
    content_css: '../lib/stylesheet/sm-default.css, ../lib/stylesheet/sm-app.css',
    content_style: ".mce-content-body {font-size:18px;font-family:sans-serif; color: #555}}",
    plugins: 'textcolor textpattern lists spoiler codesample codemirror',
    toolbar: 'fontsizeselect forecolor | '
            + 'bold italic strikethrough | '
            + 'alignleft aligncenter alignright | '
            + 'bullist | outdent indent blockquote | '
            + 'spoiler-add | '
            + 'codesample smcode '
            + 'code ',
    menubar: false,
    statusbar: false,
    apply_source_formatting: true,
    paste_retain_style_properties: true,
    paste_merge_formats: false,
    codesample_dialog_height: 400,
    code_dialog_width: 900,
    fontsize_formats: '12pt 14pt 18pt 24pt 36pt',
    codesample_languages: [
        {text: 'HTML/XML', value: 'markup'},
        {text: 'JavaScript', value: 'javascript'},
        {text: 'CSS', value: 'css'},
        {text: 'PHP', value: 'php'}
    ],
    codemirror: {
        indentOnInit: true,
        fullscreen: false,
        path: '../../../codemirror',
        config: {
            mode: 'text/html',
            lineNumbers: true
        },
        width: 900,
        height: 450,
        saveCursorPosition: true,
        jsFiles: [
            'mode/xml/xml.js',
            'mode/htmlmixed/htmlmixed.js',
            'mode/javascript/javascript.js',
            'mode/javascript/javascript.js',
            'mode/css/css.js'
        ]
    },
    allow_script_urls: true,
    valid_elements: '*[*]',
    remove_script_host: false,
    extended_valid_elements: 'a[class|name|href|target|title|onclick|rel],script[type|src],iframe[src|style|width|height|scrolling|marginwidth|marginheight|frameborder],img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name]'
});

 

 

 

Nota.:

O importante é isso, antes de iniciar o editor tinymce  certificar de ter eliminado todos os dados dele já criado.

O javascript postado lá em cima que pega os valores, deve ser executado antes do salvamento via ajax.

 

No mais se tiver o mesmo problema é só fazer isso que poderá mexer com esse editor tranquilamente com requisições por ajax, sendo GET ou POST.

 

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por LuanMartinsTI
      Bom dia pessoal, eu estou precisando implementar um plugin de textarea em um site, e ele precisa ter o editor de codigo, exatamente como o do forum, uma parte onde voc'e edita um trecho de codigo em determinada linguagem, ate ai tudo bem, o meu funciona corretamente, ai eu clico em inserir trecho de codigos ele aparece lindo, diferenciando cores de tags e tudo mais como se fosse um editor de texto mesmo, netbeans vs entre outros, mas quando eu posto a noticia o codigo fica apenas cinza como se fosse comentado, eu vou colocar o link das duas imagens pra voc"es entenderem, se alguem souber oq pode ser vai me ajudar muito, eu tentei verificar o inspecionar elemento para ver as tags q eram criadas mas nao criava tags entao estou meio confuso se nao eu mesmo estilizaria as tags, mas como nao cria nao sei oq fazer.
       
      imagem 1 https://prnt.sc/mt64zk
      imagem 2 https://prnt.sc/mt65ca
       
      eu n'ao sei se [e pribido postar imagens aqui, entao me desculpem se nao puder, mas em todo caso eu implementei todos os JS e CSS do plugin nas duas paginas, na que escreve a noticia e na que abre a noticia
    • Por juninhogpe
      Bom dia.
       
      Tenho uma página à qual utilizo tinymce para colocar textos.
       
      Mais quando vou editar algum texto que contenha "apóstofros" fazer update ocorre o seguinte erro:
       
      Erro You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near 'Open Sans', sans-serif; font-size: 14.4px; text-align: justify;">Professores t
      Como vocês acham que posso corrigir isso?
       
      Agradeço desde já.
    • Por juninhogpe
      Boa noite pessoal.
       
      Tenho uma página à qual utilizo tinymce para colocar textos.
       
      Mais quando vou fazer update ocorre o seguinte erro:
       
      Erro You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near 'Open Sans', sans-serif; font-size: 14.4px; text-align: justify;">Professores t e eu estou digitando o texto, o que pode ser?
       
      Agradeço desde já.
    • Por juninhogpe
      Boa tarde pessoal.
       
      Estou utilizando o plugin "Tinymce" em um site que estou fazendo e precisava realizar upload de imagens através dele.
       
      Me esbarrei no problema que o código de exemplo de upload de imagens que o editor disponibiliza, salva as mesmas na pasta indicada, mais quando faço a inserção no banco de dados insere o caminho da imagem todo, com o nome da pasta como informado no arquivo "upload.php".
       
      Ex.: No arquivo "upload.php" está assim o caminho: "../img/". Quando salvo no banco de dados vai assim:  "../img/imagem.jpg".
       
      Se faço um select recuperando os dados ele fica buscando a imagem assim: "../img/imagem.jpg", só que minha estrutura é assim:
      - Site  - É aqui que fica a pasta imagem e o arquivo que contém o select recuperando os dados
      - Site / Administração - É aqui que fica o arquivo "upload.php"
       
      Segue o código do upload.php
      <?php /******************************************************* * Only these origins will be allowed to upload images * ******************************************************/ $accepted_origins = array("http://localhost"); /********************************************* * Change this line to set the upload folder * *********************************************/ $imageFolder = "../img/"; reset ($_FILES); $temp = current($_FILES); if (is_uploaded_file($temp['tmp_name'])){ if (isset($_SERVER['HTTP_ORIGIN'])) { // same-origin requests won't set an origin. If the origin is set, it must be valid. if (in_array($_SERVER['HTTP_ORIGIN'], $accepted_origins)) { header('Access-Control-Allow-Origin: ' . $_SERVER['HTTP_ORIGIN']); } else { header("HTTP/1.0 403 Origin Denied"); return; } } /* If your script needs to receive cookies, set images_upload_credentials : true in the configuration and enable the following two headers. */ // header('Access-Control-Allow-Credentials: true'); // header('P3P: CP="There is no P3P policy."'); // Sanitize input if (preg_match("/([^\w\s\d\-_~,;:\[\]\(\).])|([\.]{2,})/", $temp['name'])) { header("HTTP/1.0 500 Invalid file name."); return; } // Verify extension if (!in_array(strtolower(pathinfo($temp['name'], PATHINFO_EXTENSION)), array("gif", "jpg", "png"))) { header("HTTP/1.0 500 Invalid extension."); return; } // Accept upload if there was no origin, or if it is an accepted origin $filetowrite = $imageFolder . $temp['name']; move_uploaded_file($temp['tmp_name'], $filetowrite); // Respond to the successful upload with JSON. // Use a location key to specify the path to the saved image resource. // { location : '/your/uploaded/image/file'} echo json_encode(array('location' => $filetowrite)); } else { // Notify editor that the upload failed header("HTTP/1.0 500 Server Error"); } ?>  
      Tentei alterar mais realmente não consegui fazer funcionar.
      Alguém poderia me dar uma ajuda de como fazer para que ao salvar no banco salve apenas como: "img/imagem.jpg"?
       
      Agradeço.
    • Por brunooliveira.dlp
      Boas pessoal,
      Vim buscar uma ajuda. Preciso abrir a janela de lista de templates do TinyMCE 4 com um botão fora do editor. Pensei em simular o clique no menu "Import Template" no botão externo, mas não estou conseguindo.
      Alguma sugestão?
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.