Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • pushpendu 23 posts 113 karma points
    Dec 24, 2014 @ 13:33
    pushpendu
    0

    adding Html tags like <pre><code> in rich text editor

    Hi,

    How can I add Html tags like <pre> <code> in my HTML content. I was able to add <pre><code> in the dropdown but when I run or check the  source code I find it was enclosed within <p> tag. Is there any way where can I display <pre>/<code> tags.

    e.g: I want <pre>sometext</pre> where <pre> is selected from dropdown.....but on source code it shows <p> sometext </p>. I want <pre>sometext </pre> on source code.

    Please help me out.

    Thanks

  • Jan Skovgaard 11280 posts 23678 karma points MVP 10x admin c-trib
    Dec 24, 2014 @ 14:46
    Jan Skovgaard
    0

    Hi Pushpendu and welcome to our :)

    What dropdown is it that you're referring to? Is it within the Umbraco grid editor? Or? I just want to make sure I understand your question before I provide an answer.

    Looking forward to hearing from you,

    /Jan

  • pushpendu 23 posts 113 karma points
    Dec 26, 2014 @ 07:42
    pushpendu
    0

    Hi Jan,

    Thanks for your Reply, I mean to say, its the normal dropdown on Rich text editor ..as we have select heading 1, Heading2, Paragraph.

    Here is the screensort of the dropdown.

     

    When I select code from the dropdown it shows fine in the editor here is the screensort.

    but the problem arises when I check the source code instead of mycontentit gets changed to

    mycontent

    .

     

    Thus natually my Frontend gets Effected.

     

    Thanks

  • Jan Skovgaard 11280 posts 23678 karma points MVP 10x admin c-trib
    Dec 26, 2014 @ 16:21
    Jan Skovgaard
    0

    Hi Pushpendu

    There are probably 2 things you need to do here.

    1: Make sure that tags like <code> and <pre> are allowed in the /config/TinyMceEditor.Config file - Remember to recycle the app pool once the changes have been made.

    2: Make sure to add the desired styling for your output in the CSS, which is being used for you frontend rendering.

    Hope this makes sense.

    /Jan

  • pushpendu 23 posts 113 karma points
    Dec 28, 2014 @ 08:34
    pushpendu
    0

    Hi Jan,

    You seems to be right , I found <pre> tag is allowed in the /config/TinyMceEditor.config file  but not the <code> tag. 

    Can you say how can I add <code> or  allow in the  /config/TinyMceEditor.config so that it displays in my source code. 

    It would be a great help.

    Thanks


  • Jan Skovgaard 11280 posts 23678 karma points MVP 10x admin c-trib
    Dec 28, 2014 @ 10:59
    Jan Skovgaard
    0

    Hi Pushpendu

    You should be able to edit the file and add the code tag in the list of allowed elements and then recycle the app pool once the edit is saved. You can do that by opening your web.config file and then hit save.

    Then the tag should be allowed and appear in your output.

    Hope this helps.

    /Jan

  • pushpendu 23 posts 113 karma points
    Dec 29, 2014 @ 10:49
    pushpendu
    0

    Hi Jan,

    I think something is going wrong, Here are list of steps I am following, please corrent me incase I am wrong:

    1.Added a dropdown element by creating a stylesheet then sub-stylesheet with a name code.

    2.Adding code tag in the /config/TinyMceEditor.config in between <validelement></validelement>

     

    <validElements><![CDATA[+a[id|style|rel|rev|charset|hreflang|dir|lang|tabindex|accesskey|type|name|href|target|title|class|onfocus|onblur|onclick|
    ondblclick|onmousedown|onmouseup|onmouseover|onmousemove|onmouseout|onkeypress|onkeydown|onkeyup],-strong/-b[class|style],-em/-i[class|style],
    -strike[class|style],-u[class|style],#p[id|style|dir|class|align],-ol[class|reversed|start|style|type],-ul[class|style],-li[class|style],br[class],
    img[id|dir|lang|longdesc|usemap|style|class|src|onmouseover|onmouseout|border|alt=|title|hspace|vspace|width|height|align|umbracoorgwidth|umbracoorgheight|onresize|onresizestart|onresizeend|rel],
    -sub[style|class],-sup[style|class],-blockquote[dir|style|class],-table[border=0|cellspacing|cellpadding|width|height|class|align|summary|style|dir|id|lang|bgcolor|background|bordercolor],
    -tr[id|lang|dir|class|rowspan|width|height|align|valign|style|bgcolor|background|bordercolor],tbody[id|class],
    thead[id|class],tfoot[id|class],#td[id|lang|dir|class|colspan|rowspan|width|height|align|valign|style|bgcolor|background|bordercolor|scope],
    -th[id|lang|dir|class|colspan|rowspan|width|height|align|valign|style|scope],caption[id|lang|dir|class|style],-div[id|dir|class|align|style],
    -span[class|align|style],-pre[class|align|style],address[class|align|style],-h1[id|dir|class|align|style],-h2[id|dir|class|align|style],
    -h3[id|dir|class|align|style],-h4[id|dir|class|align|style],-h5[id|dir|class|align|style],-h6[id|style|dir|class|align|style],hr[class|style],
    dd[id|class|title|style|dir|lang],dl[id|class|title|style|dir|lang],dt[id|class|title|style|dir|lang],object[class|id|width|height|codebase|*],
    param[name|value|_value|class],embed[type|width|height|src|class|*],map[name|class],area[shape|coords|href|alt|target|class],bdo[class],button[class],
      -code[class|align|style],iframe[*]]]></validElements>

    3.Save the /config/TinyMceEditor.config and then refreshing.

    4.Lastly opening my web.config file and then hitting save.

     

    Please correct me if I am wrong.

    Thanks

     

     

  • Jan Skovgaard 11280 posts 23678 karma points MVP 10x admin c-trib
    Dec 29, 2014 @ 11:22
    Jan Skovgaard
    0

    Hi Pushpendu

    At a first glance it looks correct - But what does happen now? Does the code tag just now appear in the source or what is happening?

    If you go to the /config/UmbracoSettings.config do you then see a setting for TidyEditorConfig? If not then nevermind - But if you do it should be set to "False", which is also the default setting. Out of the box it's not visible in the config but it can be added...but since you have no interest in enabling it then all is good if it's not present. I'm just asking to check and rule out if it could be a conflict with this.

    /Jan

  • pushpendu 23 posts 113 karma points
    Dec 29, 2014 @ 11:48
    pushpendu
    0

    Hi Jan,

    Everything seems fine,now I am able to view the <code> but it is enclosed inside <p></p> thus again effecting the layout...Is there any way so that I can remove the <p> </p> from enclosing the <code>. I want just <code> </code>

    No I Don't see a setting for TidyEditorConfig

    Thanks

  • pushpendu 23 posts 113 karma points
    Dec 29, 2014 @ 12:02
    pushpendu
    0

    Omg...I doesn't mean it to be solution..how to reopen ?

  • Jan Skovgaard 11280 posts 23678 karma points MVP 10x admin c-trib
    Dec 29, 2014 @ 13:02
    Jan Skovgaard
    0

    Hi Pushpendu

    I deleted the empty post, which was marked as the solution. There is no way to re-open the issue but nevermind - We can still keep posting in here.

    In regards to the

    elements I'm not sure that there is anything to do about it. Sometimes they will wrap the code tags and sometimes they probably won't.

    But in order to make sure it does not affect the layout you could perhaps target it with CSS like p > code{some styling to fix the visuals}

    Hope this helps.

    /Jan

  • pushpendu 23 posts 113 karma points
    Dec 29, 2014 @ 13:12
    pushpendu
    0

    Oh..OK Thanks.

    It was really a Great help.

Please Sign in or register to post replies

Write your reply to:

Draft