search

GrapesJS / ckeditor

This plugin replaces the default Rich Text Editor with the one from CKEditor
BSD 3-Clause "New" or "Revised" License
103 stars 102 forks source link

CKEditor does allow editing on all text content #6

Closed rgcarrasqueira closed 6 years ago

rgcarrasqueira commented 7 years ago

Hi Art!

I've got a new bug about ckeditor plugin. Now, if we have a text inside tag as bellow:

<tr style="box-sizing: border-box;">
      <td id="c2662" width="520" align="left" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 16px; text-align: left;">Foi concedida a você a 
habilitação oficial para jogar  <strong id="c8659" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;">com 50% de desconto</strong> no próximo sorteio de Mega Sena, com a 
oportunidade de ganhar milhões.
       </td>
</tr>

CKeditor does not allow do edit the content. I've made a screencast to show to you what is happening:

kapture 2017-08-15 at 7 24 10

artf commented 7 years ago

The cell component (<td>) is not editable, you have to wrap your text in some other element (eg. <p>)

rgcarrasqueira commented 7 years ago

But you have to agree that it is a problem for a person that a legacy content and trying to edit it using grapesjs. My suggestion is create some command or button that fix this situation to allow the content editing thru the editor. What do you think?

artf commented 7 years ago

@rgcarrasqueira Honestly, I think it's just much easier to fix the legacy template/content and help the editor understand where the content should be editable... Anyway, as an alternative, you might want to try to override the original cell and extend the text one

var textType = comps.getType('text');

comps.addType('cell', {
  model: textType.model.extend({
    ...
  }, {
    isComponent(el) {
    var result = '';
    var tag = el.tagName;
    if(tag == 'TD' || tag == 'TH'){
      result = {
        type: 'cell',
        tagName: tag.toLowerCase()
      };
    }
    return result;
  },
  }),
  view: textType.view
});
rgcarrasqueira commented 7 years ago

Hey Art!

I've placed at my code your snippet but now it is happening the same behaviour at ticket #180 from Grapejs. The editor is stripping content from the canvas. See my screencast

kapture 2017-08-16 at 15 46 27

And this is the html code that I'm trying to work:

JS:

comps.addType('cell', {
            model: textType.model.extend({
                isComponent(el) {

                    var result = '';
                    var tag = el.tagName;
                    if(tag == 'TD' || tag == 'TH'){

                        result = {
                            type: 'cell',
                            tagName: tag.toLowerCase()
                        };
                    }
                    return result;

                },
            }),
            view: textType.view
        });

and the html that must goes to the canvas

<div class="c8471 inserted c5596 c3378 c5512 c7644 c9776" id="c482" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;">
  <p id="c8472" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;"> 
  </p>
  <p id="c2480" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif; text-align: center;">{{pagina alternativa}}
  </p>
  <table id="c8480" align="center" border="0" cellpadding="0" cellspacing="0" width="600" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;">
    <tr id="c8482" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;">
      <td id="c8483" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;">
        <img id="c2488" height="55" src="http://www.lottokings.com/mailing/ltk/images/logo_lotosena.png" width="250" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif; display: block;">
      </td>
    </tr>
    <tr id="c8493" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;">
      <td id="c8494" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;">
        <table id="c8495" align="center" border="0" cellpadding="0" cellspacing="0" width="600" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;">
          <tr id="c8497" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;">
            <td id="c2502" width="20" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif; line-height: 0px;"> 
            </td>
            <td id="c8502" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;">
              <table id="c8503" align="center" border="0" cellpadding="0" cellspacing="0" width="560" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;">
                <tr id="c8505" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;">
                  <td id="c8506" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;">
                    <table id="c8507" align="center" border="0" cellpadding="0" cellspacing="0" width="560" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;">
                      <tr id="c8509" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;">
                        <td id="c8510" colspan="3" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;">
                          <img id="c2515" alt="ELEGIBILIDADE CONFIRMADA" height="74" src="http://www.congalotto.com/mailing/cgl/partners/free-ticket/version-5/pt/images/voucher-top.jpg" width="560" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif; display: block; text-align: center; color: white; background-color: #027054; font-size: 24px; line-height: 30px;">
                        </td>
                      </tr>
                      <tr id="c8520" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;">
                        <td id="c8521" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;">
                          <table id="c8522" align="center" border="0" cellpadding="0" cellspacing="0" height="27" width="560" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;">
                            <tr id="c8524" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;">
                              <td id="c8525" rowspan="5" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;">
                                <img id="c2530" height="147" src="http://www.congalotto.com/mailing/cgl/partners/free-ticket/version-5/pt/images/voucher-left.jpg" width="132" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif; display: block;">
                              </td>
                              <td id="c2536" height="123" width="380" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif; border: 2px solid #027054;">
                                <table id="c8533" align="center" border="0" cellpadding="0" cellspacing="0" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;">
                                  <tr id="c8535" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;">
                                    <td id="c2540" width="376" align="center" style="box-sizing: border-box; text-align: center; font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 15px;">Você foi selecionado para começar o ano
                                      <br id="c8541" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;">
                                      participando por
                                    </td>
                                  </tr>
                                  <tr id="c8555" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;">
                                    <td id="c2560" height="10" width="376" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif; line-height: 0px;"> 
                                    </td>
                                  </tr>
                                  <tr id="c8563" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;">
                                    <td id="c2568" width="376" align="center" style="box-sizing: border-box; text-align: center; font-family: Arial, Helvetica, sans-serif; font-size: 25px; line-height: 38px; color: #ff0202; font-weight: bold;">MEGA SENA R$ 46 MILHÕES PARA VOCÊ!
                                    </td>
                                  </tr>
                                  <tr id="c8571" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;">
                                    <td id="c2576" height="10" width="376" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif; line-height: 0px;"> 
                                    </td>
                                  </tr>
                                  <tr id="c8579" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;">
                                  </tr>
                                </table>
                              </td>
                              <td id="c8592" rowspan="5" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;">
                                <img id="c2601" height="147" src="http://www.congalotto.com/mailing/cgl/partners/free-ticket/version-5/pt/images/voucher-right.jpg" width="48" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif; display: block;">
                              </td>
                            </tr>
                          </table>
                        </td>
                      </tr>
                      <tr id="c8614" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;">
                        <td id="c8615" colspan="3" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;">
                          <img id="c2624" alt="Jogue GRÁTIS na maior loteria do mundo" height="60" src="http://www.congalotto.com/mailing/cgl/partners/free-ticket/version-5/pt/images/voucher-bottom.jpg" width="560" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif; display: block; text-align: center; color: #ff0202; background-color: #FFFFFF; font-size: 24px; line-height: 30px;">
                        </td>
                      </tr>
                    </table>
                  </td>
                </tr>
                <tr id="c8637" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;">
                  <td id="c8638" colspan="3" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;">
                    <table id="c8639" align="center" border="0" cellpadding="0" cellspacing="0" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;">
                      <tr id="c8641" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;">
                        <td id="c2650" colspan="3" height="20" width="560" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif; line-height: 0px;"> 
                        </td>
                      </tr>
                      <tr id="c8649" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;">
                        <td id="c2658" width="20" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif; line-height: 0px;"> 
                        </td>
                        <td id="c2662" width="520" align="left" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 16px; text-align: left;">Foi concedida a você a habilitação oficial para jogar 
                          <strong id="c8659" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;">com 50% de desconto</strong> no próximo sorteio de Mega Sena, com a oportunidade de ganhar milhões.
                        </td>
                        <td id="c2678" width="20" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif; line-height: 0px;"> 
                        </td>
                      </tr>
                      <tr id="c8677" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;">
                        <td id="c2686" colspan="3" height="20" width="560" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif; line-height: 0px;"> 
                        </td>
                      </tr>
                    </table>
                  </td>
                </tr>
                <tr id="c8697" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;">
                  <td id="c8698" colspan="3" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;">
                    <table id="c8699" align="center" border="0" cellpadding="0" cellspacing="0" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;">
                      <tr id="c8701" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;">
                        <td id="c8702" colspan="2" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;">
                          <img id="c2711" height="20" src="http://www.congalotto.com/mailing/cgl/partners/free-ticket/version-5/pt/images/cuadro2-top.jpg" width="560" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif; display: block;">
                        </td>
                      </tr>
                      <tr id="c8712" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;">
                        <td id="c8713" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;">
                          <table id="c8714" border="0" cellpadding="0" cellspacing="0" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;">
                            <tr id="c8716" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;">
                              <td id="c2725" bgcolor="#0e9b80" height="50" width="210" align="center" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif; text-align: center; font-size: 20px; line-height: 22px; color: white; font-weight: light; border-left: 2px solid #027054;">Qual destes prazeres
                                <br id="c8722" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;">
                                você desfrutará
                                <br id="c8730" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;">
                                <span id="c2742" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif; color: #c4dfff; font-weight: bold;">quando for
                                  <br id="c8739" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;">
                                  milionário?</span>
                              </td>
                              <td id="c2761" bgcolor="#FFFFFF" height="103" width="348" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif; border-right: 2px solid #027054;">
                                <table id="c8754" border="0" cellpadding="0" cellspacing="0" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;">
                                  <tr id="c8756" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;">
                                    <td id="c2765" colspan="3" height="10" width="348" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif; line-height: 0px;"> 
                                    </td>
                                  </tr>
                                  <tr id="c8764" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;">
                                    <td id="c8765" colspan="3" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;">
                                      <a id="c8766" href="http://kindico.go2cloud.org/aff_c?offer_id=910&aff_id=1&file_id=2538" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;"><img id="c2775" alt="MUDE SUA VIDA AGORA SOLICITE SEU BILHETE GRÁTIS" height="85" src="http://www.congalotto.com/mailing/cgl/partners/free-ticket/version-5/pt/images/cta1.jpg" width="347" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif; display: block; background-color: #fd8b1f; color: #FFFFFF; text-align: center; font-size: 18px; line-height: 40px;"> </a>
                                    </td>
                                  </tr>
                                  <tr id="c8784" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;">
                                    <td id="c2793" colspan="3" height="20" width="348" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif; line-height: 0px;"> 
                                    </td>
                                  </tr>
                                </table>
                              </td>
                            </tr>
                          </table>
                        </td>
                      </tr>
                    </table>
                  </td>
                </tr>
                <tr id="c8828" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;">
                  <td id="c8829" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;">
                    <table id="c8830" border="0" cellpadding="0" cellspacing="0" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;">
                      <tr id="c8832" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;">
                        <td id="c8833" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;">
                          <table id="c8834" border="0" cellpadding="0" cellspacing="0" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;">
                            <tr id="c8836" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;">
                              <td id="c2845" height="545" width="210" bgcolor="#ffffff" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif; border-left: 2px solid #027054; background-color: #ffffff;">
                                <table id="c8838" border="0" cellpadding="0" cellspacing="0" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;">
                                  <tr id="c8840" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;">
                                    <td id="c8841" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;">
                                      <img id="c2850" height="55" src="http://www.congalotto.com/mailing/cgl/partners/free-ticket/version-5/pt/images/flecha.jpg" width="208" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif; display: block;">
                                    </td>
                                  </tr>
                                  <tr id="c8851" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;">
                                    <td id="c8852" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;">
                                      <a id="c8853" href="http://kindico.go2cloud.org/aff_c?offer_id=910&aff_id=1&file_id=2538" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;"><img id="c2862" alt="Mansão de Luxo" height="130" src="http://www.congalotto.com/mailing/cgl/partners/free-ticket/version-5/pt/images/icono1.jpg" width="208" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif; display: block; text-align: center; font-size: 18px; line-height: 21px; color: #027054;"> </a>
                                    </td>
                                  </tr>
                                  <tr id="c8871" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;">
                                    <td id="c8872" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;">
                                      <a id="c8873" href="http://kindico.go2cloud.org/aff_c?offer_id=910&aff_id=1&file_id=2538" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;"><img id="c2882" alt="Super Carro" height="130" src="http://www.congalotto.com/mailing/cgl/partners/free-ticket/version-5/pt/images/icono2.jpg" width="208" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif; display: block; text-align: center; font-size: 18px; line-height: 21px; color: #027054;"> </a>
                                    </td>
                                  </tr>
                                  <tr id="c8891" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;">
                                    <td id="c8892" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;">
                                      <a id="c8893" href="http://kindico.go2cloud.org/aff_c?offer_id=910&aff_id=1&file_id=2538" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;"><img id="c2902" alt="Iate" height="130" src="http://www.congalotto.com/mailing/cgl/partners/free-ticket/version-5/pt/images/icono3.jpg" width="208" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif; display: block; text-align: center; font-size: 18px; line-height: 21px; color: #027054;"> </a>
                                    </td>
                                  </tr>
                                  <tr id="c8911" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;">
                                    <td id="c8912" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;">
                                      <a id="c8913" href="http://kindico.go2cloud.org/aff_c?offer_id=910&aff_id=1&file_id=2538" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;"><img id="c2922" alt="Diamantes" height="133" src="http://www.congalotto.com/mailing/cgl/partners/free-ticket/version-5/pt/images/icono4.jpg" width="208" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif; display: block; text-align: center; font-size: 18px; line-height: 21px; color: #027054;"> </a>
                                    </td>
                                  </tr>
                                </table>
                              </td>
                            </tr>
                          </table>
                        </td>
                        <td id="c2960" rowspan="5" width="340" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif; border-right: 2px solid #027053;">
                          <table id="c8953" border="0" cellpadding="0" cellspacing="0" width="346" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;">
                            <tr id="c8955" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;">
                              <td id="c8956" width="20" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;"> 
                              </td>
                              <td id="c2968" width="306" align="left" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 16px; text-align: left;">Seguro e confiável: Lotosena lhe oferece a plataforma mais segura e confiável de aquisição de tickets de loteria. Com acesso a mais de 50 loterias estatais, bolões e sorteios milionários, suas transções e acesso aos prêmios estão absolutamente seguros.
                                <br id="c8965" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;">
                                <br id="c8969" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;">
                                Hoje é dia de jogar na Mega-Sena por R$1,00. Jogue na Lotosena e fique milionário!
                                <br id="c8977" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;">
                                <br id="c8981" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;">
                                Você só precisa confirmar a sua participação de acordo com as regras do jogo.
                                <br id="c8989" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;">
                                <br id="c8993" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;">
                                <a id="c8997" href="http://kindico.go2cloud.org/aff_c?offer_id=910&aff_id=1&file_id=2538" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;">Clique aqui para jogar agora! </a>
                                <br id="c9002" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;">
                                <br id="c9006" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;">
                                <span id="c3018" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif; color: #027054; font-weight: bold; font-size: 15px;">ESTE É O SEU ANO: MUDE SUA VIDA COM UM PRÊMIO INCRÍVEL </span>
                                <br id="c9014" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;">
                                <br id="c9018" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;">
                                Você tem 2 horas para confirmar a sua participação no próximo sorteio. é grátis e ganhe já 50% de desconto. Basta seguir as instruções e preparare-se para ganhar.
                                <br id="c9026" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;">
                                <br id="c9030" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;">
                                Boa sorte!
                              </td>
                              <td id="c9041" width="20" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;"> 
                              </td>
                            </tr>
                            <tr id="c9048" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;">
                              <td id="c3057" colspan="3" height="15" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif; line-height: 0px;"> 
                              </td>
                            </tr>
                            <tr id="c9056" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;">
                              <td id="c3065" colspan="3" align="center" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif; text-align: center; font-size: 24px; line-height: 26px; color: #027054; font-weight: bold;">NÃO ESPERE MAIS!
                              </td>
                            </tr>
                            <tr id="c9064" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;">
                              <td id="c3073" colspan="3" height="15" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif; line-height: 0px;"> 
                              </td>
                            </tr>
                            <tr id="c9072" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;">
                              <td id="c9073" colspan="3" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;">
                                <table id="c9074" border="0" cellpadding="0" cellspacing="0" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;">
                                  <tr id="c9076" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;">
                                    <td id="c9077" width="20" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;"> 
                                    </td>
                                    <td id="c9081" width="203" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;">
                                      <table id="c9082" border="0" cellpadding="0" cellspacing="0" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;">
                                        <tr id="c9084" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;">
                                          <td id="c9085" align="left" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;">
                                            <img id="c3094" src="http://www.congalotto.com/mailing/cgl/partners/free-ticket/version-5/pt/images/firma.jpg" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif; display: block;">
                                          </td>
                                        </tr>
                                        <tr id="c9095" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;">
                                          <td id="c3104" width="200" align="left" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 16px; text-align: left;">Beatriz Alves
                                            <br id="c9101" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;">
                                            Diretora de Contas
                                          </td>
                                        </tr>
                                      </table>
                                    </td>
                                    <td id="c9124" width="102" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;">
                                      <img id="c3133" alt="CRIANDO MILIONÁRIOS DESDE 2007" src="http://www.congalotto.com/mailing/cgl/partners/free-ticket/version-5/pt/images/sello.jpg" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif; display: block; background-color: #f1e59d; text-align: center; font-size: 16px; line-height: 19px;">
                                    </td>
                                    <td id="c9131" width="20" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;"> 
                                    </td>
                                  </tr>
                                </table>
                              </td>
                            </tr>
                            <tr id="c9150" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;">
                              <td id="c3159" colspan="3" height="20" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif; line-height: 0px;"> 
                              </td>
                            </tr>
                          </table>
                        </td>
                      </tr>
                      <tr id="c9170" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;">
                        <td id="c9171" colspan="2" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;">
                          <table id="c9172" border="0" cellpadding="0" cellspacing="0" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;">
                            <tr id="c9174" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;">
                              <td id="c9175" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;">
                                <img id="c3184" height="16" src="http://www.congalotto.com/mailing/cgl/partners/free-ticket/version-5/pt/images/cuadro2-bottom.jpg" width="560" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif; display: block;">
                              </td>
                            </tr>
                          </table>
                        </td>
                      </tr>
                    </table>
                  </td>
                </tr>
              </table>
            </td>
            <td id="c3226" width="20" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif; line-height: 0px;"> 
            </td>
          </tr>
          <tr id="c9225" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;">
            <td id="c9226" colspan="3" height="20" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;"> 
            </td>
          </tr>
          <tr id="c9233" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;">
            <td id="c9234" colspan="3" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;">
              <table id="c9235" border="0" cellpadding="0" cellspacing="0" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;">
                <tr id="c9237" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;">
                  <td id="c9238" width="122" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;"> 
                  </td>
                  <td id="c9242" width="355" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;">
                    <a id="c9243" href="http://kindico.go2cloud.org/aff_c?offer_id=910&aff_id=1&file_id=2538" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;"><img id="c3252" alt="PARTICIPAR AGORA" src="http://www.congalotto.com/mailing/cgl/partners/free-ticket/version-5/pt/images/cta2.jpg" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif; display: block; text-align: center; color: #FFFFFF; background-color: #fa7d20; font-size: 20px; line-height: 35px;"> </a>
                  </td>
                  <td id="c9258" width="122" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;"> 
                  </td>
                </tr>
              </table>
            </td>
          </tr>
          <tr id="c9277" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;">
            <td id="c9278" colspan="3" height="20" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;"> 
            </td>
          </tr>
          <tr id="c9285" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;">
            <td id="c9286" colspan="3" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;">
              <img id="c3295" height="101" src="http://www.congalotto.com/mailing/cgl/partners/free-ticket/version-5/pt/images/logos.jpg" width="600" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif; display: block;">
            </td>
          </tr>
          <tr id="c9296" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;">
            <td id="c9297" colspan="3" height="20" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;"> 
            </td>
          </tr>
          <tr id="c9304" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;">
            <td id="c9305" colspan="3" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;">
              <table id="c3314" align="center" border="0" cellpadding="0" cellspacing="0" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif; border-top: 2px solid #F3F3F4;">
                <tr id="c9308" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;">
                  <td id="c3317" height="10" width="600" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif; font-size: 1px; line-height: 1px; border: none;"> 
                  </td>
                </tr>
                <tr id="c9316" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;">
                  <td id="c3325" align="center" valign="top" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif; border: none;">
                    <p id="c3326" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif; font-size: 10px; color: #666666; padding: 0; margin: 0; line-height: 15px; text-align: center;">A Lotosena - Todos os direitos reservados. Se você não visualizar corretamente este e-mail, 
                      <a href="http://kindico.go2cloud.org/aff_c?offer_id=910&aff_id=1&file_id=2538" id="viewonline_1" name="viewonline_1" target="_blank" xt="SPCLICKTOVIEW" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif; color: #0183c6; text-decoration: none;">clique aqui</a>.
                    </p>
                    <p id="c3343" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif; font-size: 10px; color: #666666; padding: 0; margin: 10px 0 0 0; line-height: 15px; text-align: center;">Lotosena é operado por: Triangulum N.V., Landhuis Groot Kwartier, Groot Kwartierweg 12, Willemstad, Curaçao.
                    </p>
                  </td>
                </tr>
                <tr id="c9345" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;">
                  <td id="c3354" height="5" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif; font-size: 1px; line-height: 1px; border: none;"> 
                  </td>
                </tr>
              </table>
            </td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
  <p id="c9383" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;">
    <img id="c9384" height="1" src="https://goo.gl/3DLprt" width="1" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;">
    <img id="c9387" height="1" src="http://kindico.go2cloud.org/aff_i?offer_id=910&aff_id=1&file_id=2538" width="1" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;">
  </p>
  <p id="c3401" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif; text-align: center;"> 
  </p>
  <p id="c3405" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif; text-align: center;">
    <font id="c9398" face="verdana, sans-serif" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;">
      <font id="c9399" color="#000000" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;">Você está recebendo essa newsletter, porque você está cadastrado na lista VantagensNaWeb e 
      </font>agora pode aproveitar promoções exclusivas dos nossos parceiros comerciais
      <font id="c9407" color="#000000" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;">. Caso você tenha recebido essa mensagem por engano ou não queira mais recebê-la, por favor clique no link abaixo 
      </font>
      <font id="c9411" color="#000000" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;">para efetuar o cancelamento da sua inscrição. Nós respeitamos o seu direito e apoiamos regras nacionais e internacionais, políticas de privacidade, leis Anti-Spam e Unsolicited Commercial E-mail. 
      </font>
    </font>
  </p>
  <p id="c3429" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif; text-align: center;">{{descadastro}}
  </p>
</div>
artf commented 7 years ago

Not yet tested but first of all, try to fix this:

comps.addType('cell', {
            model: textType.model.extend({
               /*  first object is for internal methods */
               },{
               /*  the second one is for static methods and  isComponent is one of them*/
                isComponent(el) {
rgcarrasqueira commented 7 years ago

Hi Art!

Sorry, but I did not understant what to put here:


{
               /*  first object is for internal methods */
               }

It could be blank? It could be like that?


       comps.addType('cell', {
            model: textType.model.extend({},{
                isComponent(el) {

                    var result = '';
                    var tag = el.tagName;
                    if(tag == 'TD' || tag == 'TH'){

                        result = {
                            type: 'cell',
                            tagName: tag.toLowerCase()
                        };
                    }
                    return result;

                },
            }),
            view: textType.view
        });

Thanks!

Rogério Carrasqueira

2017-08-17 8:10 GMT-03:00 Artur Arseniev notifications@github.com:

Not yet tested but first of all, try to fix this:

comps.addType('cell', { model: textType.model.extend({ / first object is for internal methods / },{ / the second one is for static methods and isComponent is one of them/ isComponent(el) {

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/artf/grapesjs-plugin-ckeditor/issues/6#issuecomment-323039817, or mute the thread https://github.com/notifications/unsubscribe-auth/AAF9BLs1WbwKkfZWBM9ShGUM9-gT68aKks5sZB-_gaJpZM4O3bxy .

rgcarrasqueira commented 7 years ago

I've tried with your suggestion, but after that I cannot drag text inside to any other cell into the table. I can put a screencast if cannot got the point.

Thanks!

Rogério Carrasqueira

rgcarrasqueira commented 7 years ago

kapture 2017-08-17 at 8 36 20

artf commented 7 years ago

Try to compose the text and the cell (or vice versa)

model: textType.model.extend(cellType.model).extend({},
 { ...
...
view: textType.view.extend(cellType.view),
rgcarrasqueira commented 7 years ago

Art,

I've downloaded last version (0.9.15) and put this code:

comps.addType('cell', {
        model: textType.model.extend(cellType.model).extend({},{
            isComponent(el) {
                var result = '';
                var tag = el.tagName;
                if(tag == 'TD' || tag == 'TH'){

                    result = {
                        type: 'cell',
                        tagName: tag.toLowerCase()
                    };
                }
                return result;

            },
        }),
        view: textType.view.extend(cellType.view)
    });

And editor presented many problems, including some blocks and other functions stopped works. I suggest to you that get the html code and try in your side, I think that is more easy to understand what is happening

Thanks

rgcarrasqueira commented 7 years ago

Hi Art!

I got your point, but I think that we are almost there, but the editor was not placed in a friendly position, and click over the cell to edit, all previous styles were lost, see the screenshot:

JS

var cellType = editor.DomComponents.getType('cell');
comps.addType('cell', {
        model: textType.model.extend(cellType.model).extend({},{
            isComponent(el) {
                var result = '';
                var tag = el.tagName;
                if(tag == 'TD' || tag == 'TH'){

                    result = {
                        type: 'cell',
                        tagName: tag.toLowerCase()
                    };
                }
                return result;

            },
        }),
        view: textType.view.extend(cellType.view)
    });

Before Click:

screen shot 2017-08-18 at 10 37 47

After Click on cell: screen shot 2017-08-18 at 10 35 53

artf commented 6 years ago

I close this as with the latest 4.x version of CKEditor everything works as expected