Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

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

  • 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.