0

acredito que eu seja muito ruim com js e seus derivados. Mas vou tentar detalhar ao máximo o meu erro.

Eu tenho um navbar com duas opções.

<ul class="nav nav-tabs" data-tabs="tabs">
                                        <li class="nav-item">
                                            <a class="nav-link" href="#desktop" data-toggle="tab">
                                                <i class="material-icons">desktop_mac</i> Versão Desktop
                                                <div class="ripple-container"></div>
                                                <div class="ripple-container"></div>
                                            </a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" href="#mobile" data-toggle="tab">
                                                <i class="material-icons">phonelink_setup</i> Versão Mobile
                                                <div class="ripple-container"></div>
                                                <div class="ripple-container"></div>
                                            </a>
                                        </li>
                                    </ul>

Cada item dessa "ul" vai abrir um tab-pane seguinte:

<div class="tab-content">
                                <div class="tab-pane" id="desktop">
                                    <div class="summernote">summernote 1</div>
                                </div>

                                <div class="tab-pane" id="mobile">
                                    <div class="summernote">summernote 2</div>
                                </div>
                            </div>

Então eu faço a chamada js

<script>

    $(document).ready(function () {
        $('.summernote').summernote({
        disableDragAndDrop: true,
            shortcuts: false,
            toolbar: [
                // [groupName, [list of button]]
                ['style', ['bold', 'italic']],
                ['para', ['ul', 'ol']],
            ],
            placeholder: 'Escreva aqui os termos de uso da versão Desktop',
            height: 400,
            airMode: false,
        });
    });
</script>

Meu problema: é que, ao carregar a página o summernote está deixando um tipo de toolbar no canto superior esquerdo da página, como mostra a imagem seguinte: erro1

Ele carrega duas toolbars, como se fossem as que eu quero chamar unicamente nos meus panels.

Ao clicar em cada um dos panels o summernote abre normalmente na posição e como eu quero. Vide seguinte img: erro2

Alguém poderia ajudar?

1 Resposta 1

1

Guto veja meu exemplo como funciona corretamente como você deseja, veja se não tem nenhum CSS próprio afetando o Css do summernote:

$(function() {
  $('.summernote').summernote({
    disableDragAndDrop: true,
    shortcuts: false,
    toolbar: [
      // [groupName, [list of button]]
      ['style', ['bold', 'italic']],
      ['para', ['ul', 'ol']],
    ],
    placeholder: 'Escreva aqui os termos de uso da versão Desktop',
    height: 400,
    airMode: false,
  });
});
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
<link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote.css" rel="stylesheet">

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote.js"></script>

<ul class="nav nav-tabs" data-tabs="tabs">
  <li class="nav-item">
    <a class="nav-link" href="#desktop" data-toggle="tab">
      <i class="material-icons">desktop_mac</i> Versão Desktop
      <div class="ripple-container"></div>
      <div class="ripple-container"></div>
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#mobile" data-toggle="tab">
      <i class="material-icons">phonelink_setup</i> Versão Mobile
      <div class="ripple-container"></div>
      <div class="ripple-container"></div>
    </a>
  </li>
</ul>

<div class="tab-content">
  <div class="tab-pane" id="desktop">
    <div class="summernote">summernote 1</div>
  </div>

  <div class="tab-pane" id="mobile">
    <div class="summernote">summernote 2</div>
  </div>
</div>

1
  • Pelo que percebi em minhas pesquisas, é uma issue do summernote com o bootstrap 4. Por default ele acaba chamando aquele frame chamado de propover. O seguinte trecho de código acabou ajustando o erro popover: { image: [], link: [], air: [] },, de qualquer forma muito obrigado pela ajuda!
    – Guto G
    Commented 22/11/2018 às 12:50

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .