[Resolvido] Ajuda com tinymce arquivos por ajax

[Omar~ 87]

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.

 

[Omar~ 87]

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.