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.
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">×</span></button>
<h4 class="modal-title" id="myModalLabel"></h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
https://gutennews.com.br/webapp/
link:https://gutennews.com.br/webapp/atividade-texto/atividade/4694/secao/1330/edicao/255
, o problema é que tá minificado.