CkEditor Custom Plugin syntax Prism
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
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 = "bar";</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 = "bar";</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 editorDiscussão (0)
Carregando comentários...