tinymce formatting my code - Installing umbraco

Mike 16 posts 36 karma points

Oct 21, 2009 @ 11:22

TinyMCE formatting my code!

Hi all, losing my mind over this so hopefully someone can point me in the right direction!

I'm trying to add a subscribe form to our website but TinyMCE keeps spitting out my code. Below is the intended code

<!-- Form -->

<form action="http://genericnamehere.createsend.com/t/r/s/tuukkt/" method="post">
<div>
  <span class="label"><label for="name">Name:</label></span>
  <span><input type="text" name="cm-name" id="name" size="25" /></span>
</div>
<div>
<span class="label"><label for="tuukkt-tuukkt">Email Address:</label></span>
<span><input type="text" name="cm-tuukkt-tuukkt" id="tuukkt-tuukkt" size="25" /></span>
</div>
<div>

<div>
  <span class="label"><label for="Company">Company:</label></span>
  <span><input type="text" name="cm-f-gjkv" id="Company" size="25" /></span>
</div>
</div>
<div>
<span class="button"><input type="submit" value="Subscribe" /></span>
</div>
</form>

And here is what TinyMCE does to it

<!-- Form -->
<form action="http://genericnamehere
.createsend.com/t/r/s/tuukkt" method="post">
</form>
<div>
<span><label>Name:</label></span> <span><input name="cm-name" size="25" type="text" /></span> 
</div>
<div>
<span><label>Email Address:</label></span> <span><input name="cm-tuukkt-tuukkt" size="25" type="text" /></span> 
</div>
<div>
<div>
<span><label>Company:</label></span> <span><input name="cm-f-gjkv" size="25" type="text" /></span> 
</div>
</div>
<div>
<span><input type="submit" value="Subscribe" /></span> 
</div>

First of all you can see the <form> tag in now immediately closed, which is a pretty fatal error. Why is it doing this?

Secondly, the <span> tags lose their CLASS attribute, the <label> tags lose their FOR attribute and the <input> tag loses its ID attribute.

I've looked at TinyMCE.cfg and, as far as I can see, this should not be the case.

<validElements>
    <![CDATA[+a[id|class|style|title|dir<ltr?rtl|lang|xml::lang|onclick|ondblclick|onmousedown|onmouseup|onmouseover|onmousemove|onmouseout|onkeypress|onkeydown|onkeyup],a[rel|rev|charset|hreflang|tabindex|accesskey|type|name|href|target|title|class|onfocus|onblur],
strong/b,em/i,strike,u,#p[align],-ol[type|compact],-ul[type|compact],-li,br,img[longdesc|usemap|src|border|alt=|title|hspace|vspace|width|height|align],-sub,-sup,
-blockquote,-table[border=0|cellspacing|cellpadding|width|frame|rules|height|align|summary|bgcolor|background|bordercolor],
-tr[rowspan|width|height|align|valign|bgcolor|background|bordercolor],tbody,thead,tfoot,
#td[colspan|rowspan|width|height|align|valign|bgcolor|background|bordercolor|scope],#th[colspan|rowspan|width|height|align|valign|scope],caption,-div,
-span[class],-code,-pre,address,-h1,-h2,-h3,-h4,-h5,-h6,hr[size|noshade],
-font[face|size|color],dd,dl,dt,cite,abbr,acronym,del[datetime|cite],ins[datetime|cite],
object[classid|width|height|codebase|*],param[name|value|_value],#embed[src|bgcolor|FlashVars|PLUGINSPAGE|width|height|name|align|type|*],script[src|type],map[name],area[shape|coords|href|alt|target],bdo,
button,col[align|char|charoff|span|valign|width],colgroup[align|char|charoff|span|valign|width],dfn,fieldset,form[action|accept|accept-charset|enctype|method],
input[accept|alt|checked|disabled|maxlength|name|readonly|size|src|type|value],
kbd,label[for],legend,noscript,optgroup[label|disabled],option[disabled|label|selected|value],
q[cite],samp,select[disabled|multiple|name|size],small,textarea[cols|rows|disabled|name|readonly],tt,var,big] ]]></validElements>
  <invalidElements>font</invalidElements>

Sorry for the long post but can anyone help out with this?

Cheers

Copy Link

Jan Skovgaard 11280 posts 23678 karma points MVP 11x admin c-trib

Oct 21, 2009 @ 12:20

Is there any reason why you are placing your form inside a rich text editor field?

If you need to build a form in the RTE I think you should look into Axendo form package instead.

But I am pretty sure you can achieve your goal by just making your form in an XSLT macro or just directly in a template. It all depends on your usage. But the RTE field is not intended for building forms directly in it imho. :)

/Jan

Copy Link

Mike 16 posts 36 karma points

Oct 21, 2009 @ 12:35

Well, I'm not a 'techie' and our webserver/Umbraco is hosted in another office. It can take some time before my requests are answered let alone implemented :)

The form code is generated by our email marketing software (campaign monitor) and I'd have no idea on how to turn that into an XSLT!

Really I just wish Umbraco wouldn't take it uopn itself to format everything given that these elements are in the valid elements list. Though having said that I've noticed that the form tag itself doesn't break until I click 'save'.

Copy Link

dandrayne 1138 posts 2262 karma points

Oct 21, 2009 @ 12:47

You should be able to add this to an xslt file, if you have access to the "developers" section on your umbraco install

Go to developer section, right click on the xslt folder and choose 'create', keep "create macro" checked
paste the code below into this window and save
Go to the "macros" section open your new macro. Choose "use in editor" and disable "render in editor"
Use the insert macro button to stick the new macro into your editor

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE xsl:stylesheet [ <!ENTITY nbsp "&#x00A0;"> ]>
<xsl:stylesheet 
   version="1.0" 
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform" 
 xmlns:msxml="urn:schemas-microsoft-com:xslt"
  xmlns:umbraco.library="urn:umbraco.library" xmlns:Exslt.ExsltCommon="urn:Exslt.ExsltCommon" xmlns:Exslt.ExsltDatesAndTimes="urn:Exslt.ExsltDatesAndTimes" xmlns:Exslt.ExsltMath="urn:Exslt.ExsltMath" xmlns:Exslt.ExsltRegularExpressions="urn:Exslt.ExsltRegularExpressions" xmlns:Exslt.ExsltStrings="urn:Exslt.ExsltStrings" xmlns:Exslt.ExsltSets="urn:Exslt.ExsltSets" 
  exclude-result-prefixes="msxml umbraco.library Exslt.ExsltCommon Exslt.ExsltDatesAndTimes Exslt.ExsltMath Exslt.ExsltRegularExpressions Exslt.ExsltStrings Exslt.ExsltSets ">


<xsl:output method="xml" omit-xml-declaration="yes"/>

<xsl:param name="currentPage"/>

<xsl:template match="/">

<form action="http://genericnamehere.createsend.com/t/r/s/tuukkt/" method="post">
<div>
  <span class="label"><label for="name">Name:</label></span>
  <span><input type="text" name="cm-name" id="name" size="25" /></span>
</div>
<div>
<span class="label"><label for="tuukkt-tuukkt">Email Address:</label></span>
<span><input type="text" name="cm-tuukkt-tuukkt" id="tuukkt-tuukkt" size="25" /></span>
</div>
<div>

<div>
  <span class="label"><label for="Company">Company:</label></span>
  <span><input type="text" name="cm-f-gjkv" id="Company" size="25" /></span>
</div>
</div>
<div>
<span class="button"><input type="submit" value="Subscribe" /></span>
</div>
</form>


</xsl:template>

</xsl:stylesheet>

Worth a shot!

Copy Link

Mike 16 posts 36 karma points

Oct 21, 2009 @ 13:48

Hi, thanks Dan!

I tried this on our test server and it seemed to work well. However, our developer put it on the webserver and Umbraco is still removing the <form> tags when the page is saved.

:-/

Copy Link

dandrayne 1138 posts 2262 karma points

Oct 21, 2009 @ 14:21

Did he disable rendering in editor? TinyMCE doesn't (shouldn't) interfere with markup from a macro if the macro isn't actually being rendered in the editor.

Also, you want to be sure that this isn't being added inside a

<form runat="server">

tag in your templates, else it will cause problems.

This might call for just creating a new template for your textpage (called campaignmonitor or whatever) and assigning it to the page that you want to use this on.

Dan

Copy Link

Mike 16 posts 36 karma points

Oct 21, 2009 @ 14:35

Dan, thanks for your help.

Rendering was disabled and I'm not sure about the template but there's no runat="server" on the page source if that helps?

TinyMCE isn't removing the <form> tag itself (after clicking update). Umbraco removes it when the page is saved.

Copy Link

dandrayne 1138 posts 2262 karma points

Oct 21, 2009 @ 14:55

You won't see the runat="server" when viewing source - you should be looking for an outer form tag as nested forms won't work.

You could also try this

<TidyEditorContent>False</TidyEditorContent>

having said this, I do think that this kind of thing belongs in templates.

Dan

Copy Link

Mike 16 posts 36 karma points

Oct 21, 2009 @ 15:20

Ahh, this form is nested within another form. I never notied that before.

Thank you Dan. At least we now have an idea of what needs fixing :)

Copy Link

Rich Green 2246 posts 4008 karma points

Oct 29, 2009 @ 22:34

On a related note TinyMCE is removing a class. I've set

<TidyEditorContent>False</TidyEditorContent>

However in HTML I paste this in

<strong class="heading1"><span>Widget</span> Online Store</strong>

And TinyMCE saves this

<strong><span>Widget</span> Online Store</strong>

Any ideas how to stop this?

Rich

Copy Link

Peter Dijksterhuis 1442 posts 1722 karma points

Oct 29, 2009 @ 23:49

Did you restart the application after you changed the tinyMCEconfig? If you didn't, the changes won't take effect.

You can restart the application by touching the web.config.

HTH,

PeterD

Copy Link

dandrayne 1138 posts 2262 karma points

Oct 30, 2009 @ 10:20

You may also need to find

strong/b,em/i

in the TinyMCE settings config file and change it ti=o

strong/b[class],em/i

(then restart your app)

Dan

Copy Link

raz 18 posts 22 karma points

Dec 14, 2009 @ 11:28

Hi guys,

I am having some trouble with the RTE (tinymce v3) after upgrading to v4.0.3.

It seems that all new lines (Enter hits) are now translated into <div></div> instead of <p></p> as before.... what could be the issue and how could I change that to its normal behaviour? Not even the combination Shift+Enter, that produced a <br> before, is working anymore...

Unfortunately I didn't manage to find a diferent topic talking about my issue and decided that this one is the appropriate on to comment in.

Thank you!

Copy Link

Nik Wahlberg 639 posts 1237 karma points MVP

Dec 14, 2009 @ 13:50

Hi Raz, I think I would start a new topic for this issue as it is not related to the original form issue. In your new post, could you also specify which version of browser you're using (and your other sttas).

Thanks,
Nik

Copy Link

is working on a reply...

Flag this post as spam?

TinyMCE formatting my code!