PANmedia / raptor-editor

Raptor, an HTML5 WYSIWYG content editor!
www.raptor-editor.com
GNU General Public License v3.0
533 stars 136 forks source link

Editor wraps everything in <p> tags #58

Open bubach opened 11 years ago

bubach commented 11 years ago

Hi, when having the editor tied to a H1-tag it will wrap this text into a P-tag even if it's already a header. It will do this, no matter if I cancel the edit, or if I decide to edit another area it will still add P into the editable H1.

bubach commented 11 years ago

Solved the issue by wrapping the H1 tag with a DIV - but should still be addressed since one of the demos use it directly on a H1 title. This might in fact be the desired behavior - in that case the examples should be changed to not use editable class directly on a H1-tag.

ChrisGitIt commented 11 years ago

Hi all, i have the same problem with automagically added

tags. Somehow, all elements will be wrapped up when editing. Is this due to several browser bugs? Am i supposed to remove this tags while saving?

Any hints are welcome. In the meantime a try to find a way around.

Thanks in advanced!

bubach commented 11 years ago

Mostly this is the desired behaviour for any editor that works on a DIV-element. All text inside is has to be wrapped into something, and it chooses the P-tag as default. Unless you connect Raptor to a H1 tag directly in which case you will get

text

Just make sure to enclose all your editable areas in a DIV-tag and it should work as expected on H1, like

text

without any P-tag generated.

But maybe this isn't working for your specific case, so could you please describe what you are trying to avoid? Also, it might be possible to have Raptor check the parent element and count that as part of the editable area

Regards, Christoffer

On Sun, Nov 11, 2012 at 4:23 PM, ChrisGitIt notifications@github.comwrote:

Hi all, i have the same problem with automagically added

tags. Somehow, all elements will be wrapped up when editing. Is this due to several browser bugs? Am i supposed to remove this tags while saving?

Any hints are welcome. In the meantime a try to find a way around.

Thanks in advanced!

— Reply to this email directly or view it on GitHubhttps://github.com/PANmedia/Raptor/issues/58#issuecomment-10268256.

ChrisGitIt commented 11 years ago

Hi Christoffer and Thanks for your reply! But somehow these <#p> Tags do not make sense for me. I mean: Why an extra enclosing Tag? This means that these new HTML5 Tags like <#header>,<#nav> (tested and not working as desired) and probably <#articel> or <#sub> will be populated with not needed tags. As of my understanding of HTML there is are no special need to do so.

I would not care if i have no special need for an extra HTML Text Node and normal HTML Node. I'm currently writing a special HTML Template System and my data of all pure text Element would be converted into a more complex HTML Element (including my desired pure text node). This converting is desired by default (because pure Text node CAN become a HTML Node, but in many cases its totally unnecessary. In my case the HTML Template Engine should be able to perform well in High Concurrency and High Availability situations. I've tested a simple HTML Page with these extra <#p> Tags and it's taking 5% longer to load properly and produces 10% more content to be transferred.

So, thanks again for the input! Maybe i'll have to hack raptor or switch to another Editor ... currently evaluating Aloah, Mercury and elrte.

If you have any suggestion to hack Raptor (via Config?) i would appreciate your comment!

Greets, Chris

bubach commented 11 years ago

As I said, in mist cases you want to edit a DIV and the text have to be a P, H1 or similar. That goes för HTML5 too. But I agree, there should be a config switch för this - in case you'd want to edit directly on a P or H1 tag för example. I'm afraid that I dont't know enought about the Raptor source to acomplish this.

On Thursday, November 15, 2012, ChrisGitIt notifications@github.com wrote:

Hi Christoffer and Thanks for your reply! But somehow these

Tags do not make sense for me. I mean: Why an extra enclosing Tag? This means that these new HTML5 Tags like , (tested and not working as desired) and probably or will be populated with not needed tags. As of my understanding of HTML there is are no special need to do so.

I would not care if i have no special need for an extra HTML Text Node and normal HTML Node. I'm currently writing a special HTML Template System and my data of all pure text Element would be converted into a more complex HTML Element (including my desired pure text node). This converting is desired by default (because pure Text node CAN become a HTML Node, but in many cases its totally unnecessary. In my case the HTML Template Engine should be able to perform well in High Concurrency and High Availability situations. I've tested a simple HTML Page with these extra

Tags and it's taking 5% longer to load properly and produces 10% more content to be transferred.

So, thanks again for the input! Maybe i'll have to hack raptor or switch to another Editor ... currently evaluating Aloah, Mercury and elrte.

If you have any suggestion to hack Raptor (via Config?) i would appreciate your comment!

Greets, Chris

— Reply to this email directly or view it on GitHub.

< https://github.com/notifications/beacon/gGx5aPO09eOGKVzeJ2VeGZaFZ_OpY8ETFQIq_qt6o7yXDbjQIbB9K8JKQu0Txc-a.gif

Norinarc commented 8 years ago

I'm having the same issue where content is being wrapped in a

tag. However, in my case the content is wrapping at exactly the midpoint (or 50% of the width) of the editor area. The wrap perfectly aligns to the right edge of the toolbars when the class is set to 'raptor-editing-inline'. The width of the editor area (Textarea) is 610px and the text in the editor wraps at 305px. Should I be targeting a DIV instead of a Textarea?

$(componentName).raptor({
        autoEnable: true,
        enableUi: false,
        unloadWarning: false,
        classes: 'raptor-editing-inline',
        plugins: {
            textBold: true,
            textItalic: true,
            textUnderline: true,
            textStrike: true,
            textBlockQuote: true,
            textSizeDecrease: true,
            textSizeIncrease: true,
            listOrdered: true,
            listUnordered: true,
            dock: {
                docked: true,
                dockToElement: true
            },
            unsavedEditWarning: false
        },
    });
Norinarc commented 8 years ago

Non-issue. Sorry I took up the space... I neglected to double check the CSS in my project which has a

tag style with a set width. The Textarea becomes hidden and a DIV is injected to create the editor area which subjects the default

tag to the CSS attached to the page.