Freetextbox3.3.0 usage Summary

Fuck!

To use this freetextbox, it took a lot of time.

In fact, we have always used this thing, but the version is very low, and it is the code of other colleagues. I am not familiar with it myself. Now I ran to the source site to download a 3.3.0.

Summary:

0. parameter configuration problems

<FTB:FreeTextBox id="txtContent" OnSaveClick="btnSubmit_Click" toolbarlayout="ParagraphMenu,FontFacesMenu,FontSizesMenu,FontForeColorsMenu,FontBackColorsMenu|Bold,Italic,Underline,Strikethrough,Superscript,Subscript,RemoveFormat|JustifyLeft,JustifyRight,JustifyCenter,JustifyFull;BulletedList,NumberedList,Indent,Outdent;CreateLink,Unlink,InsertImage|InsertRule,InsertDate,InsertTime|InsertTable,EditTable;InsertTableRowAfter,InsertTableRowBefore,DeleteTableRow;InsertTableColumnAfter,InsertTableColumnBefore,DeleteTableColumn|InsertDiv,EditStyle,InsertImageFromGallery,Preview,SelectAll,WordClean,NetSpell|Cut,Copy,Paste,Delete;Undo,Redo,Print,Save"Language="zh-CN"runat="Server"Width="95%"Height="400px"SupportFolder="~/news/ftb/"        JavaScriptLocation="ExternalFile"DesignModeCss="designmode.css"    ImageGalleryUrl="./ftb/ftb.imagegallery.aspx?rif={0}&cif={0}"/>

Where

Language = "ZH-CN", Chinese

Supportfolder, corresponding to javascriptlocation, is the path where the JS is stored.

Imagegalleryurl: the address of the image uploading page. Note that it is written as follows: "./Ftb. imagegallery. aspx? Rif = {0} & CIF = {0 }"

The {0} system will automatically replace it with the value of imagegallerypath.

Imagegallerypath: the path for storing the uploaded image. In the background, I read the settings from the configuration file and assign them a value:

txtContent.ImageGalleryPath = System.Configuration.ConfigurationManager.AppSettings["ImgUpload"];

1. Localization

1) First, When referencing freetextbox, you should set the attribute Language = "ZH-CN"

<FTB:FreeTextBox id="txtContent" OnSaveClick="btnSubmit_Click" toolbarlayout="ParagraphMenu,FontFacesMenu,FontSizesMenu,FontForeColorsMenu,FontBackColorsMenu|Bold,Italic,Underline,Strikethrough,Superscript,Subscript,RemoveFormat|JustifyLeft,JustifyRight,JustifyCenter,JustifyFull;BulletedList,NumberedList,Indent,Outdent;CreateLink,Unlink,InsertImage|InsertRule,InsertDate,InsertTime|InsertTable,EditTable;InsertTableRowAfter,InsertTableRowBefore,DeleteTableRow;InsertTableColumnAfter,InsertTableColumnBefore,DeleteTableColumn|InsertDiv,EditStyle,InsertImageFromGallery,Preview,SelectAll,WordClean,NetSpell|Cut,Copy,Paste,Delete;Undo,Redo,Print,Save"Language="zh-CN"runat="Server"Width="95%"Height="400px"SupportFolder="~/news/ftb/"        JavaScriptLocation="ExternalFile"DesignModeCss="designmode.css"    ImageGalleryUrl="./ftb/ftb.imagegallery.aspx?rif={0}&cif={0}"/>

2) some tips, including inserting text in the image window, can directly modify the JS File

Note the following:

When referencing freetextbox

JavaScriptLocation="ExternalFile"

Where,

SupportFolder="~/news/ftb/"

Is the location where JS is stored.

In the future, pay attention to file encoding. When I edited, the source file was gb2312 and was saved as UTF-8 encoded.

3) to upload the image gallery (image gallery) in Chinese, reload the render event of the Control <Ftb: imagegallery>.

Public partial class ftb_imagegallery: system. web. UI. page {protected override void render (htmltextwriter writer) {writer. write (this. chinesegallery ();} // <summary> // obtain the control, chinese: // </Summary> // <returns> </returns> private string chinesegallery () {stringwriter writer = new stringwriter (); // provide a Writable Text area htmltextwriter buffer = new htmltextwriter (writer); // Let htmlwriter operate on this area, we can get the content base in this area. render (buffer); // first draw the page, let's get the initial Page HTML code string html = writer. tostring (); // locate this code, and we will process it and convert English to Chinese characters // html = html. replace ("there are no images:", "no image now"); html = html. replace ("Upload File", "Upload image"); html = html. replace ("status </div>", "status </div>"); html = html. replace ("selected image", "selected image"); html = html. replace ("create folder", "create directory"); html = html. replace ("delete image", "delete this image"); html = html. replace ("\" Upload \ "", "\" Upload \ ""); html = html. replace ("<legend> preview", "<legend> preview image"); html = html. replace ("<legend> dimensions", "<legend> set display size"); html = html. replace ("original size", "source image size"); html = html. replace ("Custom size", "set to"); html = html. replace ("lock image ratio", "lock size ratio"); html = html. replace ("percentage", "percentage"); html = html. replace ("image gallery", "my photo album"); html = html. replace ("<legend> Properties", "<legend> image attributes"); html = html. replace ("align", "horizontal arrangement"); html = html. replace ("border", "border"); html = html. replace ("vspace", "left margin"); html = html. replace ("hspace", "Top margin"); html = html. replace ("Alt", "converted text"); html = html. replace ("title", "image title"); html = html. replace ("value = \" insert \ "", "value = \" insert into editor \ ""); // return HTML ;}}

In this way, you can obtain a Chinese Image Upload interface.

2. License issues

Freetextbox has some features that require a license. For example, if you insert an image without a license, only a JS dialog box is displayed, allowing you to simply write an address, rather than a highly functional setting interface. During my local test, I had a license automatically, but I didn't find this problem. After I uploaded it to the server, I found that this function could not be used. I was puzzled for a while, super disgusting.

On the Internet, a godman taught me how to generate a license, and how many spaces are there in DES encryption. I think it's too big. Time is not enough.

Fortunately, the author of freetextbox is honest about whether there is a license. Currently, it is only different from whether the following sentence will be output:

<script type="text/javascript" src="/WebManage/news/ftb/FTB-Pro.js"></script>

Local license

<script type="text/javascript" src="/WebManage/news/ftb/FTB-Utility.js"></script><script type="text/javascript" src="/WebManage/news/ftb/FTB-FreeTextBox.js"></script><script type="text/javascript" src="/WebManage/news/ftb/FTB-ToolbarItems.js"></script><script type="text/javascript" src="/WebManage/news/ftb/FTB-Pro.js"></script><!-- ************************************************* --><!-- * FreeTextBox v3 (3.3.0.22838)                  * --><!-- * http://www.freetextbox.com/                   * --><!-- * ASP.NET HTML editor for PC/IE & Mozilla       * --><!-- * License Type: LocalhostLicense (To: none)     * --><!-- ************************************************* -->

No license on the server

<script type="text/javascript" src="/webmanage/news/ftb/FTB-Utility.js"></script><script type="text/javascript" src="/webmanage/news/ftb/FTB-FreeTextBox.js"></script><script type="text/javascript" src="/webmanage/news/ftb/FTB-ToolbarItems.js"></script><!-- ************************************************ --><!-- * FreeTextBox v3 (3.3.0.22838)                 * --><!-- * http://www.freetextbox.com/                  * --><!-- * ASP.NET HTML editor for PC/IE & Mozilla      * --><!-- * License Type: NoLicense (To: Unlicensed)     * --><!-- ************************************************ -->

As a result, you can insert an image after the control manually.

<FTB:FreeTextBox id="txtContent" OnSaveClick="btnSubmit_Click" toolbarlayout="ParagraphMenu,FontFacesMenu,FontSizesMenu,FontForeColorsMenu,FontBackColorsMenu|Bold,Italic,Underline,Strikethrough,Superscript,Subscript,RemoveFormat|JustifyLeft,JustifyRight,JustifyCenter,JustifyFull;BulletedList,NumberedList,Indent,Outdent;CreateLink,Unlink,InsertImage|InsertRule,InsertDate,InsertTime|InsertTable,EditTable;InsertTableRowAfter,InsertTableRowBefore,DeleteTableRow;InsertTableColumnAfter,InsertTableColumnBefore,DeleteTableColumn|InsertDiv,EditStyle,InsertImageFromGallery,Preview,SelectAll,WordClean,NetSpell|Cut,Copy,Paste,Delete;Undo,Redo,Print,Save"Language="zh-CN"runat="Server"Width="95%"Height="400px"SupportFolder="~/news/ftb/"        JavaScriptLocation="ExternalFile"DesignModeCss="designmode.css"    ImageGalleryUrl="./ftb/ftb.imagegallery.aspx?rif={0}&cif={0}"/>    <script type="text/javascript" src="/WebManage/news/ftb/FTB-Pro.js"></script>

Be sure to add it to the end. It cannot be placed before the control. I don't know why.

3. Compatibility with IE and IE kernel browsers

This is reflected in uploading images.

It's okay to use ff and chrome browsers, but IE6 \ 7 and cool dogs based on these kernels, also, 360, will crash as soon as the picture is uploaded. This has nothing to do with whether there is a license. It is probably related to Js. On the official demo, I tried it in the same browser. There is no problem at all. Looking at the page source code, it does not directly reference JS, it should rely on the control itself to output the JS mode.

Later, the two sentences of code in the FTB-ImageGallery.js was commented out.

Function ftb_resizegalleryarea () {gallery = document. getelementbyid ('gallery '); gallerytop = document. getelementbyid ('gallerytop'); gallerybottom = document. getelementbyid ('gallerybottom '); sidebar = document. getelementbyid ('gallerysidebar'); If (ftb_browser.isie) {// check window heightif (document. body. offsetheight <(gallerytop. offsetheight + gallerybottom. offsetheight + sidebar. offsetheight) {window. resizeTo (750, gallerytop. offsetheight + gallerybottom. offsetheight + sidebar. offsetheight + 100);} // this code will crash // Gallery. style. height = document. body. offsetheight-(gallerytop. offsetheight + gallerybottom. offsetheight); // Gallery. style. width = document. body. offsetwidth-Sidebar. offsetwidth;} else {If (window. innerheight <(gallerytop. offsetheight + gallerybottom. offsetheight + sidebar. offsetheight) {window. resizeTo (750, gallerytop. offsetheight + gallerybottom. offsetheight + sidebar. offsetheight + 100);} Gallery. style. height = Window. innerheight-(gallerytop. offsetheight + gallerybottom. offsetheight); Gallery. style. width = Window. innerwidth-Sidebar. offsetwidth ;}};