Forcing a custom element to be a BLOCK-level element

Hey, all. I've been working on a plugin to essentially duplicate and expand the functionality of fakeobjects -- a placeholders plugin for working with text nodes. When I'm all done with my project, integrating CKEditor into Dreamwidth, I plan on posting a tutorial since this kind of thing probably comes up a lot.

Anyway, I was hoping someone more advanced than me could help out with a stumbling block I've run into.

I'm using a datafilter to grab an element, in this case <cut>, and replace it with a styled <div> for the WYSIWYG view; then, in source mode, it turns back into the <cut> element that users were expecting. (It's basically jump text, if you're familiar with blogs but not with LiveJournal/Dreamwidth.) This part works fine. The only problem is that DIV is a block-level element and <cut> is not. (So when the datafilter switches them, CKEditor suddenly thinks it needs to wrap <cut> in <p>'s, which causes a jarring visual effect where empty <p>'s will crop up every time.

This wouldn't be happening if I could get CKEditor to recognize the <cut> as a block-level element, and I really need it to do that -- <cut> needs to be able to contain <p>'s, and <table>'s, and <div>'s.

ANYWAY. I managed to trick CKEditor into believing a different custom element was a SELF-CLOSING element by adding this to the top of my plugin:

CKEDITOR.dtd.$empty['customelementnamehere'] = 1;

But this:

CKEDITOR.dtd.$block['customelementnamehere'] = 1;

totally destroys the editor. (Specifically, it tells me that L[M] IS UNDEFINED, pointing to an error somewhere in ckeditor.js itself, which is the kind of thing I've only ever encountered before with syntax errors.

(And no, isEmpty doesn't really work for getting the above effect, for those of you who might suggest it -- only doing that made my plugin really TREAT the <customelementnamehere /> as a self-closing element.)

...okay, so. Lots of babbling here. The point is that the $block thing is apparently more complicated than I realized. And I'm hoping someone out there can point me in the right direction!

For reference, because I don't want to ask anyone to track down source documentation to help me:
http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.dtd.html

Thu, 07/22/2010 - 15:40

comp615

Joined: 02/07/2010

Posts: 295

Re: Forcing a custom element to be a BLOCK-level element

Just a thought here, couldn't you replace your div with a span element instead? Or better yet, just inject custom CSS to make it treat your fake DIV element as you want it to be treated (I think you can switch inline/block using CSS right?). Does that sounds like it might work?

Thu, 07/22/2010 - 18:13

libek

Joined: 22/06/2010

Posts: 13

Re: Forcing a custom element to be a BLOCK-level element

Well, like I said, I really need it to be a block-level element. It doesn't make any sense for the Dreamwidth-specific <cut> tag to be inside of <p>'s. It needs to be able to contain <p>'s.

Mon, 09/19/2011 - 19:54

manuelbertelli

Joined: 19/09/2011

Posts: 2

Re: Forcing a custom element to be a BLOCK-level element

Any help here? I really want to know it too.

Mon, 09/19/2011 - 20:15

manuelbertelli

Joined: 19/09/2011

Posts: 2

Re: Forcing a custom element to be a BLOCK-level element

BTW, what I'm trying to do is this:

I've created a new element called <secao> used in Source mode that has only one attribute called "nome", so my element is used this way:

<secao nome="Example"></secao>

Inside this tag, I can have many others elements including another <secao>. My <secao> tag works like a Fieldset element (a wrapper with a label).

Well, to represent it in Visual mode, I created a few elements used in this structure:

<secaoview>
  <secaotitle>Example</secatotitle>
  <secaobody>
  </secaobody>
</secaoview>

To achieve what I want, I'm using some customized DTD like this:

// secao is a body element, so it won't be wrapped by <p> tags
CKEDITOR.dtd.$body['secao'] = 1;

CKEDITOR.dtd.$block['secaoview'] = 1;
CKEDITOR.dtd.$block['secaotitle'] = 1;
CKEDITOR.dtd.$block['secaobody'] = 1;

CKEDITOR.dtd.$blockLimit['secaoview'] = 1;
CKEDITOR.dtd.$blockLimit['secaobody'] = 1;

// nonEditable so user can't change "nome" typing directly, it should use dialog helper
CKEDITOR.dtd.$nonEditable['secaotitle'] = 1; 

// declaring new elements in secaoview, otherwise editor crashes
CKEDITOR.dtd['secaoview'] = {
 'secaotitle': 1,
 'secaobody': 1
};

CKEDITOR.dtd['secaotitle'] = {'#': 1}; // secaotitle only has to have TextNode elements
CKEDITOR.dtd['secaobody'] = CKEDITOR.dtd['div']; // secaoboyd should behaves and accepts whatever "div" accepts
CKEDITOR.dtd['secaobody']['secaoview'] = 1; // augmenting secaobody scopes to accept another secaoview element

Well, everything is working all right, but my problem is this:

When I walk around my text using keyboard arrow keys, I can't edit my "secaotitle" element but I can walk inside with cursor inside this. When CKEditor recognizes I'm walking inside my textnode inside "secaotitle" it automatically wraps <p> around this textnode and brokes.

How do I avoid this anoying <p> wrapping my textnode inside my custom element "secaotitile"?