forceclass false doesn't work

blackbirdzzz commented 7 years ago

Hi artf , thanks again for your answers since i started my project and thanks again for this beautifull project,

I told you that i wanted to stop the auto create class that delete my inline css, and you said : to forceclass set it on false , when i set forceclass false this doesn't work is it normal ? or i need to do something else ?

this is my index code :

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">

  <title>TheKooples - Newsletter - BUILDER</title>

  <link rel="stylesheet" href="css/pagebuilder.css">
  <link rel="stylesheet" href="css/tools.css">
  <link rel="stylesheet" href="css/gjs-koop-preset-webpage.css">
  <link rel="stylesheet" href="css/gjs-koop-scroll.css">
  <link rel="icon" href="http://cdn.thekooples.com/skin/frontend/base/default/favicon.ico" type="image/x-icon">
  <link rel="shortcut icon" href="http://cdn.thekooples.com/skin/frontend/base/default/favicon.ico" type="image/x-icon">
  <script src="dist/sweetalert.min.js"></script>
  <link rel="stylesheet" type="text/css" href="dist/sweetalert.css">

  <link rel="stylesheet" href="css/tooltip.css">
  <script src="./node_modules/jquery/dist/jquery.min.js"></script>
  <script src="./node_modules/grapesjs/dist/grapes.min.js"></script>
  <script src="./dist/grapesjs-preset-newsletter.min.js"></script>

</head>
<style>
  body > .inner {
  display: none;
}

body.pg-loaded > .inner {
  display: block;
}
  body,
  html {
    height: 100%;
    margin: 0;
  }

</style>

<body>

  <div id="gjs" style="height:0px; overflow:hidden">

  </div>

<style>
  .hide { position:absolute; top:-1px; left:-1px; width:1px; height:1px; }
</style>

<iframe name="hiddenFrame" class="hide"></iframe>

<form onsubmit="return builderForm();" id="builder-form" class="builder-form" action="" style="display:none" target="hiddenFrame">

    <div class="putsmail-c">
      <p style="font-weight: bold;margin-top: 10px;margin-bottom:10px;text-transform: uppercase;text-align: center;font-size: 10px;">
        Remplir tout les champs pour procéder à une traduction de la newsletter !</p>
    </div>
    <div class="gjs-sm-property" style="margin-bottom: 5px;">
      <p style="margin-bottom:0px; padding: 4px;margin-top: 2px;color: #00acff;font-weight: bold;">Nom de la newsletter :</p>

      <div class="gjs-field">
        <span id="gjs-sm-input-holder">
            <input type="text" id="nl_name" name="nl_name" placeholder="NL-001-FR-M-CATEGORY-Name" required>
          </span>
      </div>
    </div>

    <div class="gjs-sm-property" style="margin-bottom: 5px;">
      <p style="margin-bottom:0px; padding: 4px;margin-top: 2px;color: #00acff;font-weight: bold;">Nom du sheets :</p>

      <div class="gjs-field">
        <span id="gjs-sm-input-holder">
            <input type="text" id="nl_sheets" name="nl_sheets" placeholder="Sheets 1" required>
          </span>
      </div>
    </div>
    <div class="gjs-sm-property" style="margin-bottom: 5px;">
      <p style="margin-bottom:0px; padding: 4px;margin-top: 2px;color: #00acff;font-weight: bold;">Nom de l'utm-compaign :</p>

      <div class="gjs-field">
        <span id="gjs-sm-input-holder">
            <input type="text" id="nl_utm" name="nl_utm" placeholder="sale-collection-mixte-fr" required>
          </span>
      </div>
    </div>
    <div class="gjs-sm-property">
      <p style="margin-bottom:0px; padding: 4px;margin-top: 2px;color: #00acff;font-weight: bold;">Pays de la newsletter:</p>

      <div class="gjs-field">

        <span id="gjs-sm-input-holder">
<select id="nl_lang">
  <option value="french">France</option>
  <option value="europe">Europe</option>
  <option value="german">Allemagne</option>
  <option value="england">United-Kingdom</option>
  <option value="america">United-State</option>
  <option value="suisse-fr">Suisse - France</option>
  <option value="suisse-de">Suisse - Allemagne</option>
  <option value="luxembourg">Luxembourg</option>
</select>        
  </span>
      </div>
    </div>
    <input type="hidden" name="body">
    <button class="gjs-btn-prim gjs-btn-import"  style="width: 100%;margin-top: 0px;">ENREGISTRER</button>
  </form>

  <script type="text/javascript">
    var editor = grapesjs.init({
      allowScripts: 1,
      showOffsets: 1,
       forceClass: false,
      noticeOnUnload: 0,
      height: '100%',
      storageManager: {
        id: 'gjs-',
        type: 'local',
        autosave: false,
        autoload: false,
        storeComponents: 1,
        storeStyles: 1,
      },
      assetManager: {
        upload: 'https://test.page'
      },
      protectedCss: '',
      container: '#gjs',
      fromElement: true,
      plugins: ['gjs-preset-newsletter'],
      pluginsOpts: {
        'gjs-preset-newsletter': {
          modalLabelImport: "Copiez ici votre code pré-fait à fin de l'importer",
          modalLabelExport: 'Rendu du code de la Newsletter',
          importPlaceholder: '<table class="table"><tr><td class="cell">Importez votre code ici.</td></tr></table>',
        }
      }
    });

     function builderForm()
    {
      editor.nl_name = document.getElementById("nl_name").value;
      editor.nl_sheets = document.getElementById("nl_sheets").value;
      editor.nl_utm = document.getElementById("nl_utm").value;
      editor.nl_lang = document.getElementById("nl_lang").value;
      editor.trigger('builder_form');
    }

  </script>
</body>

</html>

artf commented 7 years ago

Can you elaborate exactly where is your problem and what do you expect? If you expect an output like this <div style="...">text</div>, at the moment, it's not possible as the editor will always put the style outside of HTML, so the result will be <div id="c123">text</div> where c123 is pushed in CSS

blackbirdzzz commented 7 years ago

Its not possible to disable it ? cause it works great with the grapesjs newsletter export command

blackbirdzzz commented 7 years ago

Also artf , sorry but i got another question how to enable to edit text in cell : cause when i dblclick in this cell i can't edit text with the RTE editor : see the picture bellow thanks

https://image.noelshack.com/fichiers/2017/39/1/1506347606-capture-d-ecran-2017-09-25-a-15-53-01.png

artf commented 7 years ago

the export used in newsletter it's just another command, with the built-in one it's not possible. The cell is not an editable element, so you can create a new one or just wrap the text with another tag

lock[bot] commented 5 years ago

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

GrapesJS / grapesjs

forceclass false doesn't work #329