How to translate Summernote editor

Question

I found that Summernote plugin, has a lot of js files with translations. But how to apply them? I already included them to my page.

Echovirus

Answer 1

You have to include translation source file on your page and then after initializing the summernote editor, set the language.

<script type="text/javascript">  
  $(".summernote").summernote({
    toolbar: [.....],
    lang: "da-DK"
  });
</script>

EDIT:

You can use CDN also if you wish

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/lang/summernote-da-DK.js"></script>

Echovirus

can you add an example translation? – Centner

Answer 2

Example:

File #1 (js) Save as "summernote-ES.js" :

  (function ($) {
  $.extend($.summernote.lang, {
    'es-ES': {
      font: {
        bold: 'Negrita',

bla, bla, bla (this file has 150 lines) file complete

File #2 (html) index.html:

<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/codemirror.css">
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/theme/monokai.css">
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/codemirror.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/mode/xml/xml.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/codemirror/2.36.0/formatting.js"></script>

<!-- include summernote css/js-->
<link href="summernote.css">
<script src="summernote.js"></script>
<script src="[your-url]/summernote-ES.js"></script>

<script>
  $(document).ready(function(){
    $('.summernote').summernote({ lang: 'es-ES' }); 
  })
</script>

Lascivious

Answer 3

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.18/summernote-bs4.js"></script>
<script src="~js/lang/summernote-de-DE.js"></script>

$('textarea#des-summernote').summernote({
        placeholder: '',
        tabsize: 2,
        height: 100,
        toolbar: [
            ['style', ['style']],
            ['font', ['bold', 'italic', 'underline']],
            ['para', ['ul', 'ol', 'paragraph', 'clear']],
            ['insert', ['link', 'picture', 'hr']],
        ],
        lang: 'de-DE',
    });

Dedra

github.com/summernote/summernote/tree/develop/lang You can get language file from above link for me I copy summernote-de-DE.js file and create that file to my directory Note: Make sure "summernote-de-DE.js" file at last – Dedra

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Passion

@Dedra please add some explanation for the provided code. – Henleigh