Question

I’m using orchard CMS to build a website, i added a page via the orchard’s text editor.
I input the following code and save:

<a class="tile wide imagetext bg-color-blue" href="./bootstrap-scaffolding.html">
     <div class="image-wrapper">
          <img src="content/img/My Apps.png" />
      </div>
      <div class="column-text">
      <div class="text">Grid system</div>
          <div class="text">Layouts</div>
          <div class="text">Responsive design</div>
       </div>
     <span class="app-label">SCAFFOLDING</span>
</a>

But i find that the code is changed in text editor when open the editor again, they are:

<h2>Bootstrap Metro</h2>
<div class="image-wrapper"><img src="content/img/My Apps.png" /></div>
<div class="column-text">
<div class="text">Grid system</div>
<div class="text">Layouts</div>
<div class="text">Responsive design</div></div>
<a class="tile wide imagetext bg-color-blue" href="./bootstrap-scaffolding.html"><span class="app-label">SCAFFOLDING</span> </a>

The changed code are:

<a class="tile wide imagetext bg-color-blue" href="./bootstrap-scaffolding.html"><span class="app-label">SCAFFOLDING</span> </a>

Could you please give me any suggestion?

Answer 1

I got it to work by changing the TinyMCE options (in orchard-tinymce.js, but you can try out TinyMceDeluxe which has some alternate methods of configuring the options).

, forced_root_block: false
, preformatted: true
, schema: 'html5'
, valid_children: '+a[div],+a[span]'

I’m pretty sure it was the “valid_children” setting that fixed the problem, but the others preceding it are things I tried first, and I had them in the config when I got to trying valid_children. You can try removing the other options and just using valid_children to see if it will work.

There is also a doctype option that might work; it controls the doctype of the iframe that TinyMCE creates. In HTML5 <div> elements are valid children of the a tag, so if the tinyMCE code were properly applying the doctype or schema rules we wouldn’t have to set valid_children. (This is why I tried schema: 'html5' above, but that didn’t seem to work)