Ir para conteúdo

Arquivado

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

Omar~

CkEditor Custom Plugin syntax Prism

Recommended Posts

Estava eu aqui a criar um plugins para o ckedior 4 (o mesmo aqui do fórum) cujo o mesmo aplica a syntax highlighter do Prism.js. Mas aqui no forum a script usado marcação é o code-prettify

 

Enfim, de jeito nenhum a formatação da marcação de código funciona no editor! Tentei todos os métodos possíveis e impossíveis, passando referencia por id, buca por elementos etc...

E mesmo os retornos sendo true não funciona nem a pal.

 

Então resolvi pedi ajuda, vai saber se alguém cai do céu aqui e conhece bem a API do editor e consegue me dar uma força :no_mouth:

Sei que existe plugin do editor para tal fim, mas obrigatoriamente devo utilizar o dialog do editor para essa finalidade e é isso que não quero usar.

A questão é inserir a marcação de código por função externa ao editor.

 

No mais está aqui o código limpo funcional com o widget, mas sem funcionar a sintax highlighter do Prism

HTML - Com a função JS que insere no editor a marcação

Spoiler

<script src="editor/ckeditor.js" type="text/javascript"></script>
<script src="prism.js" type="text/javascript"></script>
<link href="prism.css" rel="stylesheet" type="text/css"/>

<button onclick="inserir();">Inserir</button>
<textarea id="editor" name="content"></textarea>

Aqui o a marcação fora do editor funcional como deve ser 
E a função insere exatamente a mesma coisa no editor
Fazendo o plugin funcionar mas não a syntax
<pre class="prism"><code class="language-javascript">var foo = &quot;bar&quot;;</code></pre>

<script>
    CKEDITOR.replace('editor', {
        toolbar: [
            {name: 'test', items: ['Source']}
        ]
    });

    function inserir() {
        var editor = CKEDITOR.instances.editor;
        if (editor.mode == 'wysiwyg') {
            var code = '<pre class="prism"><code class="language-javascript">var foo = &quot;bar&quot;;</code></pre><br />';
            editor.insertHtml(code);
            editor.widgets.initOn(code, 'testecode');
        }
    }
</script>

 

 

Aqui o script do plugin simples para fazer a mágica acontecer "coisa que não consegui"

Spoiler

CKEDITOR.plugins.add('teste', {
    requires: 'widget',
    init: function (editor) {
        editor.widgets.add('testecode', {
            allowedContent: 'pre(prism); code(*), span(*)',
            template: '<pre class="prism"><code></code></pre>',
            upcast: function (element) {
                if (element.hasClass('prism')) {
                    return true;
                }
            }
        });
    }
});

 

 

Como disse o plugin funciona, porém não conseguir fazer o prism funcionar dentro do editor

Compartilhar este post


Link para o post
Compartilhar em outros sites

  • Conteúdo Similar

    • Por Jack Oliveira
      Ola pessoal quero fazer que quando digitar em um campo textarea aparecer em outro textarea com  ckeditor.
       
      Se eu deixar o segundo textarea que receberá o que foi digitado sem ckeditor ele aparece ja com o ckeditor não aparece..
       
      <script> window.oninput = function(event){ var campo = event.target.id; if(campo == "textarea"){ document.querySelector('#textarea-1').value = document.querySelector('#textarea').value; }else if(campo == "textarea-1"){ document.querySelector('#textarea').value = document.querySelector('#textarea-1').value; } }; </script> <div class="col-md-12"> <div class="form-group"> <label>Resumo:</label> <textarea id="textarea" class="form-control" name="resumo" maxlength="250"></textarea> <em>Max. 250 Caracteres</em> </div> <label>Conteúdo:</label> <textarea id="textarea-1" class="form-control ckeditor" name="conteudo"></textarea> <center><hr> <button class="btn btn-primary">Adicionar</button> <br><br> </center> </div>  
    • Por eiwes
      Olá a todos,
       
      Quando eu arrasto ou copio e colo, a imagem começa assim (até aí tudo certo)

       
      Depois que é realizado o upload, ela some, aparece a mensagem de sucesso e após, desaparece com a mensagem de erro.

       
       
       
      Posso estar errado, mas acredito que não seja erro de URL, senão nem seria realizado o UPLOAD da imagem, correto?
       
      Mas por via das dúvidas, segue URLs de configuração do arquivo CONFIG.JS
       
      config.filebrowserBrowseUrl = '/js/ckeditor/kcfinder/browse.php?type=files'; config.filebrowserImageBrowseUrl = '/js/ckeditor/kcfinder/browse.php?type=images'; config.filebrowserUploadUrl = '/js/ckeditor/kcfinder/upload.php?type=files'; config.filebrowserImageUploadUrl = '/js/ckeditor/kcfinder/upload.php?type=images';  
      Alguém suspeita o que pode ser? Ou já passou por algo parecido.
       
      OUUUU saiba como resolver kkkk
       
       
      Obs*: quando abro o local de FILES, a imagem está lá. Ela simplesmente não aparece naquele momento que arrasto (me faz perder muito tempo ter de ficar entrando no local do file).
    • Por Mark Augusto
      Tenho usado/tentado usar os seguintes plugins:
      config.extraPlugins = 'justify'; config.extraPlugins = 'sourcedialog'; config.extraPlugins = 'pagebreak'; Eles funcionam, mas quando coloco mais de um extraPlugins outro sai, é sempre o mais atual que entra. Nesse caso, dos 3 adicionados, somente um funciona... Alguém sabe como faço para usar todos?
    • Por Mark Augusto
      Olá, uso o ckeditor 4, e utilizo ele como principal editor do meu site, entretanto, os aquivos que faço upload, são salvos com o mesmo nome. queria saber como é possível renomeá-los para salvar no servidor com uma nomenclatura numeral,. como por exemplo. 
    • Por eiwes
      Olá a todos,
       
      Estou com um mega problema:
      Quando utilizo o CKEditor, envio todo o conteúdo via POST para outra página para que o usuário visualize "como ficou".
       
      Ainda mais, utilizo o Rain TPL para que os dados sejam passados. Então recupero os dados via na próxima página e exibo normalmente,
      Entretanto as tags HTMLs aparecem ao invés de serem incorporadas na página :(
       
      Alguém me ajuda?
       
      Index
      $app->post("/user/send/confirm", function(){ User::loginOn(); $postSd = [ "enunciado"=> (isset($_POST['enunciado'])) ? urldecode($_POST['enunciado']) : "" ]; $pages = new uP\Pages; $pages->setTpl("page_confirm", [ "dataQ"=> $postSd ]); }); A página de exibição é padrão do Rain TPL:
       
      {$dataQ.enunciado}
       
      PS: se alguém pudesse me ajudar, gostaria MUITO de fazer um editor igual a este do Fórum, só que mais simples... somente soltar os arquivos(como o do fórum) e o align, que não consegui no CKEditor :( 
       
      Agradeço muito
×

Informação importante

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