-2

Although I have advanced knowledge in HTML, JS, and CSS, I have some co-workers who do not. For that reason, I have installed the CKEditor module, which they love.

I, on the other hand, have had nothing but grief with this module. . . Let me explain.

I have been making and editing "templates" in Notepad++, copying them, and pasting them into the CKEditor through the "plain text" option.

This usually works, kinda... At least it only screws things up in a way I can work around, usually.

Right now, it is screwing things up in a way that I cannot work around.

So, lets say I enter a block like this one:

<p>
    <a href="facebook.com" >
        <div class="facebook" ></div>
    </a>
    <a href="twitter.com" >
        <div class="twitter" ></div>
    </a>
    <a href="linkedin.com" >
        <div class="linkedin" ></div>
    </a>
</p>

This is almost exactly what I am entering

And what I get instead is this:

<p>
    <a href="facebook.com" >
</p>
<div class="facebook" ></div>
<a href="facebook.com" ></a>
<a href="twitter.com" >
    <div class="twitter" ></div>
</a>
<a href="linkedin.com" >
    <div class="linkedin" ></div>
</a>
<p></p>

I've tested this in multple different browsers and I am getting the same result. What am I doing wrong? Is this a known issue? Is there a different Wysiwyg editor I can use that doesn't have this issue? Thanks everyone!

  • Any reason you can't create another text format like your wysiwyg text format without the wysiwyg on? – Jance Dec 8 '14 at 19:38
  • ? Slightly confused by what you mean @Jance . Could you explain further? This sounds promising. Maybe something that I hadn't thought of. – WebWanderer Dec 8 '14 at 19:50
  • check out my answer. You may need to install a new module, and I've only done it with tineyMCE, but the module should work with CKeditor as well. – Jance Dec 8 '14 at 20:03
  • Yet a terrible place for this, but whatever, I'm in desperate need. Hey @Jance , your quite helpfull, could you help me out? – WebWanderer Dec 19 '14 at 20:02
1

CKEditor does this intentionally because your inline tags should not contain block level tags.... an easy work around is to change your divs to spans and add a class that makes the span display block.

If it is your preference to use invalid html (I have needed to before) another option is to add this line:

CKEDITOR.dtd.a.div = 1;

I wouldn't recommend this unless absolutely necessary since changing the dtd can have unexpected results.

  • What exactly does adding that line to the CKEditor do? – WebWanderer Dec 8 '14 at 19:51
  • "Each element in the DTD is represented by a property in this object. Each property contains the list of elements that can be contained by the element. Text is represented by the # property." - CKEditor Docs – Trey Dec 8 '14 at 19:56
  • so it basically tells CKEditor that div tags are allowed in a tags – Trey Dec 8 '14 at 19:56
1

So drupal allows admins to create text formats (see at /admin/config/content/formats). There you can create multiple different text formats (like an html format, plain text, etc, etc.)

You could duplicate the Full Html, name it something like "Full HTML (No Wysiwyg)." If you download the WYSIWYG module, I think you should be able to use that to tell ckeditor what text formats to be used on. So if you download and install that module, you should be able to control what text formats ckeditor shows up on at /admin/config/content/wysiwyg.

0

I found the answer I needed (not quite the one I was looking for) thanks to @Trey for pointing me in the right direction. My issue was with the CKEditor DTD.

I simply had to remove the <p> element for my block to work:

<a href="facebook.com" >
    <div class="facebook" ></div>
</a>
<a href="twitter.com" >
    <div class="twitter" ></div>
</a>
<a href="linkedin.com" >
    <div class="linkedin" ></div>
</a>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.