Feature Request

Topics: ASP.NET 2.0, Controls, Themes
May 24, 2009 at 3:10 AM

Dear BlogEngine.NET Programmers:

I really want the ability to insert advertisements and other custom code on the right hand side of my blog (where the blogroll and cloud show up).  I tried to do it with the TextBox feature (even tried an iframe) but it keeps removing all HTML and/or JavaScript code I input which I assume is by design.


Can I request that you allow an option to insert custom code into the TextBox or another similar item called Custom Code so I can insert adds or other custom html/javascript I create?  Is there a way to do this now that I'm not aware of?  Thanks!

- Joshua

Coordinator
May 24, 2009 at 7:53 AM

Which version of BE are you using?

BE 1.5 is using a much newer version of the tinyMce WYSIWYG editor, compared to BE 1.4.5.  The newer version of tinyMce, in general, is easier to work with for doing things like this.

In either case, there's an option you can use to tell tinyMce to allow the iframe tag.  See this discussion.

That discussion discusses allowing the iframe tag when using the WYSIWYG editor on the Add Entry tab in the control panel.  To allow the iframe tag to be used for the TextBox widget, you would want to make the same change in the edit.ascx file in the widgets\TextBox folder.

I think adding a script tag into the WYSIWYG editor should work already.

You may need to setup the extended_valid_elements property for the iframe tag so it also allows certain attributes of the iframe tag to be used.  For example:

extended_valid_elements : "iframe[name|id|src|frameborder|width|height]"

The documentation is here.  It should be possible to use these configuration options tinyMce offers to get it to work the way you want it to.  BE doesn't strip out any tags itself.

May 24, 2009 at 1:40 PM

BenAmada:

I'm using the very latest release from the website.  I don't want to use iframes if I don't have to and I'm not talking about the main blog entry window.  I want to add a button (ad) just below the tag cloud and with no programming experience required.  I would think this would be a standard feature since every other blog software or service out there allows it really easily.

- Joshua

Coordinator
May 24, 2009 at 8:16 PM

Joshua,

Isn't the ad going to have custom code for it?  A script tag, an iframe, etc.  Depending on who the ad is from (Google, Amazon, etc) you might have different HTML markup for the ad.

I thought your idea of copying-and-pasting the ad code into a TextBox widget made sense.  That works, or should work, for script tags -- but not for an iframe.  Making a one-time modification of the TextBox widget's edit.ascx file (adding extended_valid_elements) should allow you to copy-and-paste ad code into a TextBox widget (when you click the HTML toolbar icon).

How much easier can it get than that?  No programming experience is necessary.  What do you have in mind to make this process even easier ... or why couldn't anyone not do what I just explained?

May 24, 2009 at 9:51 PM

Ben:

Yes, I have custom code generated by the company.  It is basically a simple <script language=text/javascript> type tag.  However, when I put that into the the textbox all of the code gets converted to HTML tags rather then rendering as it is supposed to.  I looked in the edit.ascx file per your instructions and there was no extended_valid_elements but I'm assuming that I would just add that under the theme_advanced_xxx section with the appropriate properties.

Here is what my edit.ascx looks like now:

 

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="edit.ascx.cs" Inherits="widgets_TextBox_edit" %>
<%@ Import Namespace="BlogEngine.Core" %>

<script type="text/javascript" src="<%=Utils.RelativeWebRoot %>editors/tiny_mce3/tiny_mce.js"></script>
<script type="text/javascript">
    tinyMCE.init({
        // General options
        mode: "exact",
        elements : "<%=txtText.ClientID %>",
        theme: "advanced",
        plugins: "inlinepopups,fullscreen,contextmenu,cleanup,emotions,table,iespell",
        convert_urls: false,
     
      // Theme options
        theme_advanced_buttons1: "fullscreen,code,|,cut,copy,paste,|,undo,redo,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,bullist,numlist,outdent,indent,|,iespell,link,unlink,sub,sup,removeformat,cleanup,charmap,emotions",
        theme_advanced_buttons2: "",
        theme_advanced_toolbar_location: "top",
        theme_advanced_toolbar_align: "left",
        theme_advanced_statusbar_location: "bottom",
        theme_advanced_resizing: true,
        theme_advanced_source_editor_height: 425,
       
        tab_focus : ":prev,:next"
    });
</script>

<asp:TextBox runat="server" ID="txtText" TextMode="multiLine" Columns="100" Rows="10" style="width:700px;height:372px" /><br />

I want to be able to post just about any HTML/JavaScript/DHMTL/etc code I want in there.  What properties would I put in the extended_valid_elements tag to do this?

As a response to your (how much easier can it get than that?) comment I would like to say that other blogging platforms easily allow a click of a button, insert the code, and your done.  I believe BlogEngine.Net should be the same way for non-technical users if we want the platform to grow in user base.

I appreciate the help Ben!

- Joshua

 

 

Coordinator
May 24, 2009 at 10:51 PM

Joshua,

In the edit.ascx file, the "extended_valid_elements" property can be added anywhere in there, but here's a good place:

        .......... existing stuff .................

        theme_advanced_resizing: true,
        theme_advanced_source_editor_height: 425,
        extended_valid_elements: "iframe",
        tab_focus : ":prev,:next"
    });

Then when you Edit the TextBox widget, the WYSIWYG editor comes up.  At that point, click the "HTML" icon in the toolbar icons (second icon from the left).  At that point, you can paste in any HTML.  After pasting in the HTML, and clicking the Save button, the code you pasted in should be working -- fingers crossed :)  If not, do a View Source to see what made it through.

May 24, 2009 at 11:18 PM

Ben:

That didn't help.  It left the same HTML replacement code.  Secondly, I tried removing extended_valid_elements and replaced it with cleanup : false and that seemed to do a little better as it no longer did as much modifying but yet it still did enough that the code doesn't work.  I even tried a simple hello world javascript example and that didn't work either.  I think I'm going to give up.  If my blog becomes popular enough I might switch to wordpress or another blogging platform because BlogEngine seems to be a bit slow anyway, the post at a later date and time doesn't work (I think you tried to help me on that but I haven't been able to get that to work either) and now I can do a simple task like adding a snipit of code to the site.

 

Thanks anyway for the help Ben.

 

- Joshua

Coordinator
May 25, 2009 at 12:00 AM

Joshua,

Sorry to hear you're having so many troubles.  I just tested this, and got it to work with one additional modification.  For the extended_valid_elements property, I needed to set it like this:

extended_valid_elements: "iframe[name|id|src|frameborder|width|height]",

After doing that, I opened up the TextBox widget, clicked the HTML toolbar icon and pasted in the HTML markup below.  It worked for me ...  I get a JavaScript alert, and the iframe shows the page for dotnetblogengine.net

<script type="text/javascript">
    alert('test');
</script>
<iframe src="http://dotnetblogengine.net/"></iframe>

May 25, 2009 at 2:03 AM

Ben:

You're the man!  That fixed it!  Not sure why allowing an iframe would work even when you don't have to use an iframe in the TextBox but it does LOL.  Thanks Ben!

- Joshua

Aug 25, 2009 at 3:22 AM

Thanks a LOTT :D! yay!! this fix worked great on my blog. Thank you BenAmada :D!!