1

Como poderia corrigir um problema de conflito de evento no botão de clique do editor Quill:

Se por exemplo, eu usar "control+b", o texto faz negrito e tira negrito, porém, quando clico no botão do editor, ele parece ter um evento nada desejado, tipo, quando clico a primeira vez, ele faz negrito, mas depois quando clico novamente, ele não remove o negrito, como se tivesse sendo barrado o evento, e parece que se eu insistir muito, as vezes ele tira o negrito, eu cheguei a separar todo o editor quill do meu código em um Fiddle, mas quando faço isso ele funciona normal, eu imagino que o problema venha de cima, ou algum evento que está desligado, tipo e.preventDefault() ou e.stopPropagation(), pode ser várias situações, e eu já estou dias tentando descobrir uma maneira de corrigir isso, eu gostaria de saber nesta situação, qual é a melhor solução para tentar localizar o problema, como eu poderia fazer para identificar onde está ocorrendo esse bug?

Existe alguma outra maneira de fazer com que o evento de clique nestes botões de formatação sejam exclusivamente do editor Quill, tipo o $('.ql-bold,.ql-underline,.ql-italic').unbind() ou $('.ql-bold,.ql-underline,.ql-italic').off(); sei lá, já tentei os dois e não mudou nada ?

Olha no vídeo o problema.

Código original aqui.

Essa é a view da HTML:

<style ng-bind="style_window"></style>
<div class="tab-pane-text active tab-editor-producao-textual prod-textual" id="producao_textual">
    <div id="content" class="content-page producao-textual-content show-select">
        <!--<button class="btn-maximize" ng-click="fullscreenWindow()"><i class="fa fa-search-plus" aria-hidden="true"></i><span data-toggle="tooltip" tooltip-placement="left" title="Tela cheia">Tela cheia</span></button>-->

            <!--<div class="zoom_path">-->
                <!--<ul class="zoom">-->
                    <!--<li><a href="javascript:void(0)" ng-click="zoomIn()" class="zoom_in"><span>Zoom In</span></a></li>-->
                    <!--<li class="separate"></li>-->
                    <!--<li><a href="javascript:void(0)" ng-click="zoomOut()" class="zoom_out"><span>Zoom Out</span></a></li>-->
                <!--</ul>-->
            <!--</div>-->
            <div id="error_display" class="hidden"></div>

            <div class="container">
                <div class="navbarmenu" ng-show="!loading_producao_texto">
                    <div ng-cloak class="top-page no-print ng-cloak">

                        <div ng-show="hasQuill" id="toolbar-container" class="toolbar-personal">
                            <div class="col-xs-12 col-sm-7 col-md-7 col-lg-7 bar-strech">
                            <div class="first-buttons back">
                                <a href="javascript:void(0)" ng-click="backCaderno()" ><i  class="back-game" aria-hidden="true"></i> <span>{{back_game}}</span></a>
                            </div>
                            <div class="first-buttons with-border" >
                                <!--<i class="size-font"></i>-->
                                <!-- 8pt a 38pt | 12 padrao selecionado -->
                                <select class="ql-size"  name="size_text" id="size_text">
                                    <option ng-repeat="option in options_size track by $index" ng-selected="{{$index == 0}}" value="{{option.value}}">{{option.label}}</option>
                                </select>
                            </div>
                            <div class="secound-buttons with-border text-edit">
                               <button class="ql-bold" title="negrito"  data-placement="bottom" ></button>
                                <button class="ql-italic" title="itálico" data-placement="bottom" ></button>
                                <button class="ql-underline" title="sublinhado" data-placement="bottom" ></button>

                            </div>

                            <div class="secound-buttons with-border nomargin">
                                <div class="secound-buttons">
                                    <select  class="ql-align">
                                    </select>
                                </div>

                            </div>
                                <div class="secound-buttons with-border nomargin last">
                                    <button class="ql-image" data-placement="bottom" data-toggle="tooltip" title="Inserir foto"><span>INSERIR FOTO</span></button>
                                </div>
                                <div class="secound-buttons" ng-show="is_mobile_400" ng-class="{'mobile-show':is_mobile_400}">
                                        <div class="mobile-button"><button class="toggle-btn-drop-mobile" ng-click="toggleActiveDropMenuMobile()">...</button></div>
                                </div>
                                <div class="boxtools" ng-show="(!is_mobile_400 || (is_mobile_400 && active_drop_menu))" ng-class="{'drop-down-tools':(is_mobile_400)}">

                                   <div class="secound-buttons with-border nomargin show-mini-image-menu">
                                        <button class="ql-image" data-placement="bottom" data-toggle="tooltip" title="Inserir foto"><span>INSERIR FOTO</span></button>
                                    </div>
                                    <div class="secound-buttons white-buttons nomargin">
                                        <button class="btn bt-save save-drawing-cloud-text"  data-toggle="tooltip" title="Salvar" ng-click="saveClick()" ><i class="icon-save"></i><span>SALVAR</span></button>
                                    </div>
                                    <div class="secound-buttons white-buttons yes-view nomargin">
                                        <button class="btn bt-save download-pdf" data-toggle="tooltip" title="Baixar PDF" data-filename="{{content.data_activity.title}}" ><i class="icon-download"></i><span>BAIXAR</span></button>
                                    </div>
                                  <!--  <div class="secound-buttons white-buttons nomargin hide-mobile" ng-show="is_version_enable">
                                        <button ng-click="sendTeacher()" data-toggle="tooltip" title="Publicar para o professor" class="btn bt-save send-teacher"><i class="icon-publicate"></i><span>Publicar</span></button>
                                    </div>-->
                                </div>
                            </div>
                            <div class="col-xs-12 col-sm-5 col-md-5 col-lg-5 button-strech">
                                <div class="buttons-editor">
                                    <div class="secound-buttons white-buttons" ng-show="is_versioned && is_version_enable">
                                        <button class="btn bt-save view-revisoes display-revisoes" ng-click="toggleRevisoes()"><i class="icon-revision"></i><span>Correções</span></button>
                                    </div>
                                    <div class="secound-buttons white-buttons">
                                        <button class="btn bt-save view display-proposta" ng-click="toggleProposta()"><i class="icon-view"></i><span>Ver a proposta</span></button>
                                    </div>
                                    <div class="secound-buttons white-buttons nomargin" ng-show="is_version_enable">
                                        <button ng-click="sendTeacher()" data-toggle="tooltip" title="Publicar para o professor" class="btn bt-save send-teacher"><i class="icon-publicate"></i><span>Publicar</span></button>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="textbox zoom-element" ng-class="{'add-left-revisoes':tools.show_revisoes,'add-left-proposta':tools.show_proposta}">
                    <div class="stage_editor" id="stage" >
                        <section id="page-book-activity" class="editor-producao-texto">
                            <div id="scrolling-container">
                                <div id="editor-container" ng-style="tools.zoom_style"></div>
                            </div>
                        </section>
                    </div>
                </div>
                <div id="content_editor">
                    <div class="main noselect" style="margin-top: 10px; margin-bottom: 15px; height: auto; border-radius: 8px; overflow: hidden;">
                    </div>
                </div>
            </div>

        <div id="proposta" ng-show="tools.show_proposta" class="modal-prop-student">
            <a href="javascript:void(0)"  alt="Fechar janela" ng-click="setTextFocus();closeProposta()" class="close-modal-proposta"><i aria-hidden="true"></i><span>Fechar</span></a>
            <h1 class="prop">Proposta da atividade</h1>
            <div class="container-text-leitura">
                <div class="image-central"><a href="javascript:void(0)" data-backdrop="true" data-target="#moldal_img_{{dataForm.user_id}}" class="click-img" data-title="{{content.data_activity.title}}" data-large="{{content.data_activity.pic_person_large}}" data-toggle="modal"><i class="icon-zoom"></i>
                    <img ng-src="{{content.data_activity.pic_person}}" border="0" class="img-responsive-prop"></a></div>
                <div class="content-prop">
                    <h2 ng-bind-html="content.data_activity.title"></h2>
                    <span class="person-name" ng-bind-html="content.text"></span>
                </div>
            </div>
        </div>
        <div id="revisao" ng-show="tools.show_revisoes" class="modal-review">
            <div class="content-revision-teacher">
                <a href="javascript:void(0)"  alt="Fechar janela" ng-click="setTextFocus();closeRevisoes();" class="close-modal-revisoes"><i aria-hidden="true"></i><span>Fechar</span></a>
                <div class="navigation-tabs">
                    <!-- Nav tabs -->
                    <ul class="nav nav-tabs" role="tablist">
                        <li ng-repeat="tab in content.reviews | startFrom:(currentPage * pageSize) | limitTo:pageSize" ng-if="tab.version != null" ng-if="tab.version != null" role="presentation"  ng-class="{active:(change_version == tab.version.version_number)}"><a href="javascript:void(0)" ng-click="setVersion(tab)" aria-controls="home" role="tab" data-toggle="tab">{{tab.version.version_legend}}</a></li>
                        <li class="nav-page the-left on" ng-hide="currentPage == 0 "><a href="javascript:void(0)" ng-click="currentPage=currentPage-1">
                            <i class="fa fa-arrow-left" aria-hidden="true"></i>
                        </a></li>
                        <li class="nav-page the-right on" ng-hide="(currentPage >= content.reviews.length/pageSize - 1)"><a href="javascript:void(0)" ng-click="currentPage=currentPage+1">
                            <i class="fa fa-arrow-right" aria-hidden="true"></i>
                        </a></li>

                        <li class="nav-page the-left off" ng-if="content.reviews.length > pageSize" ng-show="currentPage == 0"><a href="javascript:void(0)"><i class="fa fa-arrow-left" aria-hidden="true"></i></a></li>
                        <li class="nav-page the-right off" ng-if="content.reviews.length > pageSize" ng-show="(currentPage >= content.reviews.length/pageSize - 1)"><a href="javascript:void(0)"><i class="fa fa-arrow-right" aria-hidden="true"></i></a></li>


                    </ul>

                    <!-- Tab panes -->
                    <div class="tab-content">
                        <div role="tabpanel" ng-repeat="item in content.reviews" class="tab-pane" ng-class="{active:(change_version == item.version.version_number)}">
                            <div class="container-revision final-avaliable">
                                <div class="box-correction" ng-if="item.version.is_revised">
                                    <div class="revision-text" ng-class="{'is-rating':(item.data.nota > -0.1 && item.data.nota != null)}">
                                        <h1>Comentários gerais</h1>
                                        <span ng-bind-html="item.data.revisao_final | ReplaceFilter: '\n' :'<br>'"></span>
                                        <div class="avaliador">
                                            <span ng-if="item.version.owner_review.role == 'coordinator' || item.version.owner_review.role == 'admin'">Responsável: </span>
                                            <span ng-if="item.version.owner_review.role == 'teacher'">Prof(a): </span>
                                            <span ng-bind-html="item.version.owner_review.name"></span>
                                        </div>
                                    </div>
                                    <div class="revision-rating" ng-if="item.data.nota > -0.1 && item.data.nota != null"><div class="nota-legend">Nota</div><span class="nota" ng-bind-html="item.data.nota | number : 1"></span></div>
                                </div>
                                <div class="revision-info" ng-if="!item.version.is_revised">
                                    <h1>ATENÇÃO</h1>
                                    <p>
                                        Essa versão foi publicada e está aguardando a correção do professor.</p>
                                </div>
                                <div class="content-text-review"><div ng-bind-html="breakLineToParagraph(item.version.extra_1)"></div></div>
                            </div>
                            <div class="container-comments" ng-if="content.data.revisoes != null">
                                <div ng-repeat="itemComment in content.data.revisoes">
                                    <div class="revision-items"  ng-bind-html="itemComment.data_revision.text"></div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>

            </div>
        </div>

    </div>
</div>

<div class="modal fade box-image-modal" id="moldal_img_{{dataForm.user_id}}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button"  class="close" data-dismiss="modal" aria-label="Fechar"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel"></h4>
            </div>
            <div class="modal-body">
            </div>
            <div class="modal-footer">
            </div>
        </div>
    </div>
</div>
10
  • Talvez algo como isso, que estou procurando Commented 10/02/2020 às 16:48
  • tem sim, entra lá: alunosam, senha: teste123, painel: https://gutennews.com.br/webapp/link: https://gutennews.com.br/webapp/atividade-texto/atividade/4694/secao/1330/edicao/255, o problema é que tá minificado. Commented 10/02/2020 às 17:36
  • Entrei lá. Tem hora que funciona normal, às vezes tem que clicar 2x para tirar o negrito.
    – Sam
    Commented 10/02/2020 às 17:40
  • Exato, ta bugado. Esse é o problema... parece que tem um evento conflitando. Commented 10/02/2020 às 17:41
  • Vou dar uma olhada lá pra ver se acho o problema.
    – Sam
    Commented 10/02/2020 às 17:42

1 Resposta 1

1

O problema é que ao clicar num dos botões de formatação do texto do editor (negrito, itálico ou sublinhado) o texto selecionado perde ligeiramente o foco e a seleção, fazendo com que a ação dos botões se perca, pois ao clicar num dos botões o foco passa para ele rapidamente.

Você pode evitar isso cancelando o evento onmousedown nesses botões.

Como esses botões estão dentro de uma div.text-edit, basta executar o código abaixo:

$(document).on("mousedown", ".text-edit button", function(){
   return false;
});
1
  • Funcionou!? Nem acredito, valeu! Commented 11/02/2020 às 13:53

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 .