August 17, 2018 · ckeditor

Tip: definir fonte padrão ao carregar o CKEditor

Head

<head>
    <title>my site</title>
    <!-- use cdn! -->
    <script src="//cdn.ckeditor.com/4.6.2/full/ckeditor.js"></script>
</head>

HTML

<form method="post" ...>
    <textarea name="page[content]" id="page_content"></textarea>
</form>

Define na config contentsCss após dar o replace no elementID que carregará o CKEditor.

JavasScript

<script>
  // algumas configs padroes..ptbr, altura, itens do toolbar etc
  CKEDITOR.replace('page_content', {
    language: 'pt-BR',
    height: 400,
    contentsCss: ['body {font-size: 16px; line-height: 24px; font-family: "Arial"}'],
    toolbar: [
      { name: 'document', groups: [ 'mode', 'document', 'doctools' ], items: [ 'Source', '-', 'Save', 'NewPage', 'Preview', 'Print', '-', 'Templates' ] },
      { name: 'clipboard', groups: [ 'clipboard', 'undo' ], items: [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ] },
      { name: 'editing', groups: [ 'find', 'selection', 'spellchecker' ], items: [ 'Find', 'Replace', '-', 'SelectAll', '-', 'Scayt' ] },
      '/',
      { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ], items: [ 'Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'CopyFormatting', 'RemoveFormat' ] },
      { name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ], items: [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-', 'BidiLtr', 'BidiRtl'] },
      { name: 'links', items: [ 'Link', 'Unlink', 'Anchor' ] },
      { name: 'insert', items: [ 'Image', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak'] },
      '/',
      { name: 'styles', items: [ 'Styles', 'Format', 'Font', 'FontSize' ] },
      { name: 'colors', items: [ 'TextColor', 'BGColor' ] },
      { name: 'tools', items: [ 'Maximize', 'ShowBlocks' ] }
    ]
  });
</script>

Se setar um grupo de font-family tipo "Tahoma, Arial, Verdana" ele não funfa sei lá por quê. Queria para uma fonte default("Arial") e desse jeito funcionou.

Documentação desse item no CKEditor:
https://docs-old.ckeditor.com/ckeditor_api/symbols/CKEDITOR.config.html#.contentsCss

Cheers,

Comments powered by Disqus