search

GrapesJS / grapesjs

Free and Open source Web Builder Framework. Next generation tool for building templates without coding
https://grapesjs.com
BSD 3-Clause "New" or "Revised" License
22.37k stars 4.05k forks source link

Span tag being stripped on editor load? #180

Closed roytang closed 7 years ago

roytang commented 7 years ago

I have the following simple test case:

<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="grapesjs/css/grapes.min.css">
<script src="http://code.jquery.com/jquery-2.2.0.min.js"></script>
<script src="grapesjs/grapes.min.js"></script>
</head>
<body>
  <form>
    <div id="gjs">
      <div><span class="my-class">Test</span></div>
    </div>
  </form>

  <script type="text/javascript">
  var editor = grapesjs.init({
      height: '100%',
      container : '#gjs',
      fromElement: 1,
      clearOnRender: true,
      components: ''
  });
  </script>
</body>
</html>

When I load the editor and click the "View code" button in the upper panel, the HTML is shown as:

<div>Test
</div>

i.e., the span tag with my custom class is removed/stripped. Why is this happening? Can I prevent it?

Thanks!

artf commented 7 years ago

I've used that trick to avoid some issues with text components and span tags but not sure if it's still necessary. You can avoid it by changing the span tag or make the parent see there is more than one child inside, for example, just by adding an empty space an the end, so from <div><span class="my-class">Test</span></div> to <div><span class="my-class">Test</span> </div>

rgcarrasqueira commented 7 years ago

Hi art! I'm having the same problem. This problem is very evident when we use ckeditor plugin. See my screen cast

ezgif com-resize

artf commented 7 years ago

Thanks @rgcarrasqueira for your screen cast, but I just didn't get where is the disappeared text (or how is happening), I'd really like to solve this, so can you explain better your use case? thk

rgcarrasqueira commented 7 years ago

Hi Art!

I thought that my screencast could explain better than writing it. So the problem happens mainly with ckeditor plugin that addw div and span tags into the code. So, we save into a database with all stuffs right and when we recover the data from a database, or a session, for example, the grapesjs strips all code that has as div or span applied.

I've tried to replace the content for p tag and table>tr>td, after that I've saved into the database and recovered from there and all things was normal. So there is a problem with grapesjs to deal with these div and span tags, mainly if we have ckeditor applied html tags on it.

Thanks for you time to attempt that!

artf commented 7 years ago

Ok thanks @rgcarrasqueira I'll try to fix it as soon as possible

rgcarrasqueira commented 7 years ago

Hey Art!

After this last update, the problem was not perceived any more running grapejs with ckeditor. I've made some content with ckeditor and the divs were not stripped from the canvas. I did not tested with default rte.

Thanks

Rogério

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.