FreeTextBoxWrapper assembly for CS v2.1

This post has 86 Replies | 12 Followers

Top 50 Contributor
Posts 494
Points 16,520
MVPs
Dennis Alexander:
I was working now your your control. I noticed, that you can put files in your Thread. This wont work really. I selected an file, but it wont add it to my reply. Its a bit sad that you cant upload a file directly when you reply or make a new Thread. Is it possible to create a button which uploads a File into a Downloads-Section?

For example i made in my Downloads a new Group Called "Forum Files", and an Folder for "Dev-Projects". Is it possible to upload via your modified control into this Folder a File and display it in my Thread (or Link maybe) ? 

The FreeTextBox wrapper control uses "Content Selector" control in order to provide this kind of functionality. "Content Selector" control belongs in Community Server framework; I don't make the functionality, it is ready to use. In order to be able to upload files also, it should be expanded. It is not in my current plans to do so, but perhaps in the near future... Smile

 

George J.

 

George J. Capnias
Athens, Hellas
Daily Cycle
  • | Post Points: 5
Top 50 Contributor
Posts 494
Points 16,520
MVPs

Dennis Alexander:
How did you do this ? I only know that this is possible in Gallery and Blogs ?! 

FreeTextBox control provides such functionality with FreeTextBox Image Gallery. Before "Content Selector" control was included in Community Server framework, this was the only way to provide such functionality. Although, it only allows you to upload photos in a selected folder in your site, not files.

 

George J.

George J. Capnias
Athens, Hellas
Daily Cycle
  • | Post Points: 5
Top 50 Contributor
Posts 494
Points 16,520
MVPs

This version of the control works under Community Server v2.1 series. The release provides assemblies for both .NET Framework v1.1 and .NET Framework v2.0 versions of Community Server.

I must say there are new features in the control, in order to satisfy the requests I had. The installation is easier now, as except copying the provided files, one should only change CommunityServer.config file in order to get the editor working.

Some screenshots:

  • The new editor layout:

  • Inserting code in a post:

  • Inserting existing content with Content Manager:

  • Inserting an emotion icon in a post:

  • Working with the new editor:

Where to download:
The file is available to download in CommunityServer.org Downloads in the Add-ons section.

How to install:
Inside the archive there are folders named with the CS v2.1 release numbers (B1, B2, RC1, RTM) as well as a "FreeTextBox3" folder and a "Themes" folder. Inside every release folder there is a .NET Framework v1.1 and a .NET Framework v2.0 folder.

Copy their contents on the corresponding "Bin" folder on community server web site. Also copy the "FreeTextBox3" folder and the "Themes" folder in the root folder of the site. All the files are not replacing any older ones, except the Skin-ContentSelectorModal.ascx in "Themes/Default/Skins" folder.

There is also a CommunityServer.txt file. Copy the 2 lines inside the "editors" section in the "editors" section in CommunityServer.config. There should be only one default editor.

That's It! You're done.

Caution: If you have installed the pre-release version of this control, have in mind that the namespace and the name of the assembly have changed from Telligent.FreeTextBoxWraper to CommunityServer.FreeTextBoxWrapper.

Advanced Installation:
The new control can be further set-up using the control’s properties:

  • By default the control is displaying 5 toolbars, but there are 2 more hidden; in order to use them, use the properties showToolbarGeneral="true" and showToolbarTables="true". The second toolbar will be blank, except you are a FreeTextBox Pro user.
  • By default the control enters the emotion icons as bbCode; it uses brackets to surround the smiles. If you wish to enter the images instead of bbCode, you can uncomment the line below in insertemoticons.aspx in FreeTextBox3 folder and comment out the line following it.
    var content = "<img src='"+img.src+"' alt='" + img.alt + "'/>"';
  • In case someone does not like the new Emotion Icon picker menu, he can change back to the old dropdown menu using the property useOldSmilies="true".
  • When using the "insert code snippet" feature, with the "numbered lines" feature, there is a default template in order to produce the output layout. If one needs to change this layout, it can be done be changing the string numberedOutputPattern variable in insertcode.aspx file in FreeTextBox3 folder.
  • By default the control uses a modal dialog to insert code snippets to posts. In case somebody wants to use the functionality provided with the previous version of the control – use a toolbar with the available languages for highlight that instead of highlighting the code, it surrounds it with the [ code ] tags – he can use the property useLanguageToolbar="true". Also in order for this option to work properly, one needs a change in CommunityServer.config; replace the "ForumSourceCode" in "CSModulles" section with:
    <add name="ForumSourceCode" type="CommunityServer.FreeTextBoxWrapper.CodeHighlightingModule, CommunityServer.FreeTextBoxWrapper" />
  • In case someone needs to insert Media Player, Real Player or Flash Movie objects in posts, he can enable the functionality of the FreeTextBxWrapper with the property allowObjectTags="true"; three new buttons will be displayed in the last toolbar. This feature is not tested thoroughly. Don’t forget to enable also the object tag in CommunityServer.config file.
  • In case someone needs to modify the existing toolbars – in case there are too many buttons for him – there are the properties toolbarLayout, toolbarEdit, toolbarFormating, toolbarParagraph, toolbarTables, toolbarGeneral – string variables – that can receive the configuration for the toolbars just like described in FreeTextBox Help file for the ToolbarGenerator.ToolbarItemFromString function. An example would be:
    toolbarLayout = "ParagraphMenu,FontFacesMenu,FontSizesMenu,FontForeColorsMenu,FontBackColorsMenu"
    No spaces between the commas are allowed.


You are welcome to feedback.

 

George J.

George J. Capnias
Athens, Hellas
Daily Cycle
Not Ranked
Posts 21
Points 325

Hi, I've just installed your new version, looks very good , great setup experience.

I think I found a bug, I'm running the RTM version of CS2.1.

The code snippet editor's text box width is only about 20% of the window width.

 

Top 50 Contributor
Posts 494
Points 16,520
MVPs

This is a .NET Framework v2.0 issue only.

Inside the FreeTextBox3 folder, check the insertcode.aspx: Find:

<asp:TextBox Runat="server" id="rawCode" rows="22" cols="107" TextMode="MultiLine" />

Replace it with:

<asp:TextBox Runat="server" id="rawCode" rows="22" columns="107" TextMode="MultiLine" />

 

George J.

George J. Capnias
Athens, Hellas
Daily Cycle
Not Ranked
Posts 4
Points 95

In case someone needs to insert Media Player objects, Real Player objects or Flash Movie objects in posts, he can enable the functionality with the allowObjectTags = "true"; three new buttons will be displayed in the last toolbar. This feature is not tested thoroughly. Don't forget to enable the object tags in CommunityServer.config.

where edit in CommunityServer.config?

  • | Post Points: 20
Top 50 Contributor
Posts 494
Points 16,520
MVPs

Your <markup> section should be like this:

  <MarkUp>
   <globalAttributes>
    <class enable = "true" />
    <align enable = "true" />
    <id enable = "true" />
    <valign enable="true" />
    <style enable="true" />
   </globalAttributes>
   <html>
    <h1 />
    <h2 />
    <h3 />
    <h4 />
    <h5 />
    <h6 />
    <h7 />
    <strong />
    <em />
    <u />
    <b />
    <i />
    <strike />
    <sub />
    <sup />
    <font size = "true" color = "true" face = "true" />
    <blockquote dir = "true" />
    <ul />
    <ol />
    <li />
    <p dir = "true" />
    <address />
    <div />
    <hr />
    <br />
    <a id = "true" href = "true" title = "true" name = "true" target= "true" rel = "true" />
    <span />
    <img src="true" alt="true" title="true" height="true" width="true" hspace="true" vspace="true" border="true" />
    <table border="true" cellpadding="true" cellspacing="true" bgcolor="true" width="true" background="true" />
    <th />
    <td rowspan = "true" colspan = "true" bgcolor="true" nowrap="true" />
    <tr />
    <pre />
    <code />
    <xmp />
    <lecut />
    <center />
    <object id="true" width="true" height="true" classid="true" codebase="true" align="true" border="true" standby="true" type="true" />
    <param name="true" value="true" />
    <embed src="true" align="true" border="true" width="true" height="true" type="true" pluginspage="true" name="true" showcontrols="true" showpositioncontrols="true" showaudiocontrols="true" showtracker="true" showdisplay="true" showstatusbar="true" autosize="true" showgotobar="true" showcaptioning="true" autostart="true" autorewind="true" animationatstart="true" transparentatstart="true" allowscan="true" enablecontextmenu="true" clicktoplay="true" invokeurls="true" defaultframe="true" />
   </html>
  </MarkUp>

George J.

George J. Capnias
Athens, Hellas
Daily Cycle
  • | Post Points: 35
Not Ranked
Posts 28
Points 495
rscrvc replied on Wed, Aug 30 2006 7:32 PM

Hi!

 

Thanks for what appears to be a wonderful aid for this community.  I can see the benefits of this item, however I'm stymiied by my own inability to get it to funcition correctly. When I attempt to edit anything, I get an edit window, however I'm unable to display any of the current content- see: http://kshealthconsumer.org/photos/error/images/3/original.aspx

It's a blank window, in which I can see neither the content that existed, nor can I enter anything. It's this way in design view and HTML, though HTML view also greys out the controls. I've never viewed the preferences and other that apparently are part of this lovely tool.

So does anyone have any idea how I've managed to bork this incredibly easy installation, and what shall I do to fix it? I'm not so keen on my home page continuing to read Community Server, tickled as I am with CS & all...

Cheers! 

 

-r
Top 50 Contributor
Posts 494
Points 16,520
MVPs

Hi,

I am not quite sure was is the problem here! This is not an install issue - you can see the editor. As far as I can see, there the editor is not fully loaded(?); that why you can not see the content you want to edit.

The toolbar of the control is grey/disabled, when you use the editor in the html source mode. I can not tell for sure, because the the bottom of the editor is not shown in the picture. The colors of the photo do not help to figure out more.

Have you tried to see the same page with less open tabs?

 

George J.

 

George J. Capnias
Athens, Hellas
Daily Cycle
  • | Post Points: 5
Not Ranked
Posts 21
Points 250

I really love the "Insert Code Snippet" feature. However, I think it would be greatly improved by making use of CSS styles rather than inserting formatting directly in the post's HTML. One reason for this is that sometimes code formatting needs to be changed retrospectively to make it blend in with a different blog/forum colour scheme. Just try using a blog theme with a black background and see how your code snippets look!

Another tool I've been using does produce HTML with CSS, below is an example of the style sheet I've been using in my CSS Override settings of my blog to format C# code. This is a really quick and easy technique for a non-administrator to change the way code looks in their blog.

.csharpcode
{
	font-size: small;
	color: black;
	font-family: Courier New , Courier, Monospace;
	background-color: white;
	/*white-space: pre;*/
}

.csharpcode pre { margin: 0em; }

.csharpcode .rem { color: #ccff99; }

.csharpcode .kwrd { color: #0000ff; }

.csharpcode .str { color: #006080; }

.csharpcode .op { color: #0000c0; }

.csharpcode .preproc { color: #cc6633; }

.csharpcode .asp { background-color: #ffff00; }

.csharpcode .html { color: #800000; }

.csharpcode .attr { color: #ff0000; }

.csharpcode .alt 
{
	background-color: #f4f4f4;
	width: 100%;
	margin: 0em;
}

.csharpcode .lnum { color: #606060; }
Top 500 Contributor
Posts 60
Points 780
bneste replied on Thu, Sep 7 2006 1:09 PM
Sorry if this isn't the best place to ask. I really like the look of the smiley picker in your screenshots, but I'd prefer to stick with TinyMCE. Have you thought of making a plugin for TinyMCE? I can't stand the pop-up window smiley picker, but like TMC for the most part.
  • | Post Points: 20
Not Ranked
Posts 2
Points 40
Zizou06 replied on Sat, Sep 9 2006 12:17 PM

Great editor! Thanks.

I've tried to use allowObjectTags="true" but it gave the error "Type 'CommunityServer.FreeTextBoxWrapper.FreeTextBoxEditor' does not have a property named 'allowObjectTags'". I'm using FTBW for 2.1.60809.935 - not sure whether this version of FTBW really supports the tag.

 

  • | Post Points: 35
Top 150 Contributor
Posts 153
Points 2,380

In case someone needs to insert Media Player objects, Real Player objects or Flash Movie objects in posts, he can enable the functionality with the allowObjectTags = "true"; three new buttons will be displayed in the last toolbar. This feature is not tested thoroughly. Don't forget to enable the object tags in CommunityServer.config.

where edit in CommunityServer.config?

which file allow me to enable  allowObjectTags = "true";

is this function locate in communityserver.config?

  • | Post Points: 20
Top 200 Contributor
Posts 108
Points 1,655

Great editor! 

I'm just having trouble with one thing though.  I'm trying to get the Insert Image From Gallery button to work.  When I click on that button and try to upload an image the status box tells me Your permissions do not allow you do upload images.  I then setup IIS to allow write access to the community server folders but that still did not solve the problem.  Has anybody else run into the same problem?  Any solutions?  Thanks.

  • | Post Points: 20
Top 50 Contributor
Posts 494
Points 16,520
MVPs

NameOfTheDragon:
I really love the "Insert Code Snippet" feature. However, I think it would be greatly improved by making use of CSS styles rather than inserting formatting directly in the post's HTML. One reason for this is that sometimes code formatting needs to be changed retrospectively to make it blend in with a different blog/forum colour scheme. Just try using a blog theme with a black background and see how your code snippets look!

There is an xml file in the bin directory that you can customize the css colors rendered, in order to be able to read the code in black background. Also you can override the code tag in your custom css in order to choose the background color. 

The wrapper control uses a highlighter component that renders inline html tags. Do you have in mind a different highligher engine that uses css to highlight?

 

George J.

 

George J. Capnias
Athens, Hellas
Daily Cycle
  • | Post Points: 5
Page 2 of 6 (87 items) < Previous 1 2 3 4 5 Next > ... Last » | RSS
Powered by Community Server (Commercial Edition), by Telligent Systems

Copyright© 2008 Telligent Systems Inc. All rights reserved
CommunityServer.com  •  Telligent.com