Jump to content
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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By 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).
    • By 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?
    • By 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. 
    • By 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
    • By L@nder
      Olá pessoal
       
      Configurei o editor de texto ckeditor em uma <textarea> porém quando digito algum texto e o formato essa formatação não é gravada no banco de dados mysql. É gravado apenas o texto puro sem as formatações.
       
      Exemplo
       
      Eu formato: <strong>Minha casa</strong> é vermelha.
      Ele grava no banco "Minha casa é vermelha." sem as formatações.
       
      O ckeditor simplesmente apaga todas as tags html.
       
      Alguém sabe como corrigir isso?
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.