Ir para conteúdo
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

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 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
    • Por 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?
    • Por AnthraxisBR
      Boa tarde,
       
      Bom, sempre usei a ferramenta CKEditor de edição de texto, e pela boa experiência a um tempo venho tentando usar o CKFinder pra fazer manutenção de arquivos.
       
      O processo funciona bem, porém o problema está na exibição desses arquivos e no que será feito com ele, com o CKFinder não consegui fazer a busca funcionar bem, pois os usuários são muito atrelados de forma especifica para saber as permissões (usuário sistema X usuário servidor (Debian) X usuário ftp  X usuário maquina local X permissões), e também, o visual não agradou muito.
       
      E não estou tendo sucesso na busca por plugins desse tipo, minha solução seria fazer do zero, mas antes:
       
      Alguém conhece um plugin (apenas de layout e operações client-side) que seja bom (pode ser pago) pra fazer essa manutenção de arquivos?
       
      PS: server-side trabalha em PHP7.
×

Informação importante

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