1
How could fix an event conflict issue on the editor click button Quill:
If, for example, I use "control+b", the text bolds and bold, but when I click on the editor button, it seems to have a desired event, like, when I click the first time, it bolds, but then when I click again, it doesn’t remove the boldface, as if he had been barred from the event, and it seems that if I insist too much, sometimes he removes the bold, I came to separate all the Quill editor of my code in a Fiddle, but when I do it works normal, I imagine the problem comes from above, or some event that’s turned off, like e.preventDefault() or e.stopPropagation(), can be several situations, and I am already days trying to figure out a way to fix this, I would like to know in this situation, which is the best solution to try to locate the problem, how could I do to identify where this bug is occurring?
Is there any other way to make the event of clicking on these formatting buttons exclusively from the Quill editor, like the $('.ql-bold,.ql-underline,.ql-italic').unbind() or $('.ql-bold,.ql-underline,.ql-italic').off(); I don’t know, I’ve tried both and it hasn’t changed at all ?
Look in the video the problem.
This is the HTML view:
<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>
Maybe something like That, that I’m looking for
– Ivan Ferrer
have yes, enter there: alunosam, password: teste123, dashboard:
https://gutennews.com.br/webapp/link:https://gutennews.com.br/webapp/atividade-texto/atividade/4694/secao/1330/edicao/255, the problem is that it is minificado.– Ivan Ferrer
I got in there. There are times that works normal, sometimes you have to click 2x to take the bold.
– Sam
Exactly, ta bugado. This is the problem... it seems that has a conflicting event.
– Ivan Ferrer
I’ll take a look there to see if I can find the problem.
– Sam
Thanks, I’m already a few days trying to understand where this event comes from that hangs everything... I even made a breakpoint from Event click the button, and followed by the console, but I found nothing...
– Ivan Ferrer
Doing some tests here I realized one thing: when you select the text click on a button of the editor, the text is quickly deselected and again selected (it is with the blue background and gives a quick blink), so the button fails, because at the exact moment of the click the text is without selection and nothing happens. Already in your fiddle this does not happen.
– Sam
Interestingly, I hadn’t noticed that action, and what that might mean?
– Ivan Ferrer
I realized that when I hold the click of the button in bold the selection disappears, what does not happen in the fiddle. It’s like making a focusout or Blur, when you click anywhere on the site.
– Ivan Ferrer
Let’s go continue this discussion in chat.
– Sam