FreeTextBox的使用

 reeTextBox使用详解

 

 

 

1.下载 FreeTextBox 3.2.2  

http://down.chinaz.com/soft/25097.htm

2. 安装

 

FreeTextBox 3.0以上版本均支持内部模式,即图片资源和javascript都集成在dll中, 本文仅探讨内部模式(Internal Resources).

 

1 ) 把FTBv3-1-1\Framework-1.1\FreetextBox.dll拷入bin目录.

 

2) 在项目中添加FreetextBox.dll的dll引用

 

3) Web.config加入如下代码

 

<?xml version="1.0" encoding="utf-8" ?>

<configuration>

   <httpHandlers>

     <add verb="GET" path="FtbWebResource.axd" type="FreeTextBoxControls.AssemblyResourceHandler, FreeTextBox" />

</httpHandlers>

</system.web>

</configuration>

 

 

3. 使用FreeTextBox

 

1) aspx页面顶上

<%@ Register TagPrefix="FTB" Namespace="FreeTextBoxControls" Assembly="FreeTextBox" %>

 

2) 调用

 

   <FTB:FreeTextBox id="FreeTextBox1" runat="Server" />

 

3)工具栏皮肤

 

 ToolbarStyleConfiguration = Offoce2003/OfficeXP/Office2000/MAC

 

4) 得到保存编辑的内容

 

private void InitializeComponent()

{   

    this.FreeTextBox1.SaveClick += new System.EventHandler(this.FreeTextBox1_SaveClick);

    this.Button1.Click += new System.EventHandler(this.FreeTextBox1_SaveClick);

    this.Load += new System.EventHandler(this.Page_Load);

}

 

private void FreeTextBox1_SaveClick(object sender, System.EventArgs e)

{

    divshow.InnerHtml = FreeTextBox1.Text;

}

      

 

5) 从客户端中检测到有潜在危险的 Request.Form 值

 

<%@ Page language="c#" ... ValidateRequest="false"%>

 

4 图片上传

 

1) 工具栏上添加ImageGallery按钮.

 

<FTB:FreeTextBox ..ToolbarLayout=" ..,InsertImageFromGallery,.. />

 

2) 拷贝 "ftb.imagegallery.aspx" 文件到同一目录下

 

http://wiki.freetextbox.com/default.aspx/FreeTextBoxWiki.ImageGallery

 

3) FreeTextBox 属性设置

 

ImageGalleryPath = "~/image/upload"  上传默认路径

ImageGalleryUrl = "ftb.imagegallery.aspx?rif={0}&cif={0}"  ftb.imagegallery.aspx的目录, 只能用相对目录,不可以用"~"

 

4) ImageGallery 的设置

 

ftb.imagegallery.aspx文件里

 

<FTB:ImageGallery id="ImageGallery1"

                     JavaScriptLocation="InternalResource"

                     UtilityImagesLocation="InternalResource"

                     SupportFolder="~/aspnet_client/FreeTextBox/"

                    

                     AllowImageDelete=true AllowImageUpload=true AllowDirectoryCreate=false AllowDirectoryDelete=false runat="Server" />

 

AllowDirectoryCreate - 能否建立文件夹

AllowDirectoryDelete - 能否删除文件夹

AllowImageUpload - 能否上传图片

AllowImageDelete - 能否删除图片

AcceptedFileTypes - 可以上传文件扩展名的数组(array)

 

为开发者提供的2个属性

 

CurrentDirectories - a string[] array of directories to allow the user to navigate toward

CurrentImages - a FileInfo[] array of files the user should be able to insert.

 

建议: 删掉Page_Load事件可以显著回避上传图片不能即时显示的问题. 不要重写Page_Load

 

 

 

 

直接使用方法

FreeTextBox是一款免费的Asp.net网页编辑器,官方默认为英文版,该版本设置为简体中文版,可以设置文字样式、在线排版、图片上传等(FreeTextBox源码需要单独购买授权),该代码包括了各类应用的演示和实现过程
包括:功能设置、下拉显示、多语言(包括简体中文、繁体、英文等)切换、JS调用、WebParts应用、Ajax无刷新交互、

直接使用的方法:
  (1) 复制 bin 目录下的 FreeTextBox.dll 文件到你的 Web 应用程序目录中的 bin 目录;
  (2) 复制 HelperScripts 目录下的三个文件到你的 Web 应用程序目录中或其子目录中,注意使用时要指定 HelperFilePath 属性;
      假设把三个文件放于应用程序下的 helpfile 目录:this.FreeTextBox1.HelperFilesPath="helpfile"; 即指向了此目录。
  (3) 复制 images 目录下的 ftb 目录到你的 Web 站点根目录下的 images 目录中。  此目录中包含界面的各种皮肤图片
  (4) 在应用程序目录下建立images目录,此目录用于上传图片的图片库,必须有,否则插入图片将不可用
  (5) 使用:在应用程序中建立相应的WEB窗体 在HTML代码页
      页头添加<%@ Register TagPrefix="ftb" Namespace="FreeTextBoxControls" Assembly="FreeTextBox"  %> 引入控件标签
      复制<FTB:FreeTextBox id="FreeTextBox1" runat="server" Width="500px" Height="400px" />到页面中需要的位置
      
      也可以把控件添加到工具栏,通过直接拖拽来使用控件

 

文件夹下有Asp.net1.1/2.0/3.5各个环境下可以使用的FreeTextBox.dll

 

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要将 HTML 中的 FreeTextbox 和文本框转换成 PDF,可以使用 iText 这个开源的 Java PDF 库。 首先,需要将 HTML 字符串转换成 PDF 文档对象。iText 提供了 `HtmlConverter.convertToPdf()` 方法可以实现这个功能,示例如下: ```java // 假设 html 为包含 FreeTextbox 和文本框的 HTML 字符串 ByteArrayOutputStream pdf = new ByteArrayOutputStream(); PdfDocument pdfDoc = new PdfDocument(new PdfWriter(pdf)); ConverterProperties props = new ConverterProperties(); HtmlConverter.convertToPdf(html, pdfDoc, props); ``` 这段代码将 HTML 字符串转换成 PDF 文档对象,并将结果输出到 `ByteArrayOutputStream` 中,可以通过 `pdf.toByteArray()` 获取转换后的 PDF 字节数组。 接下来,需要将 PDF 文档对象中的文本框和图片元素替换成 iText 中的对应元素。iText 提供了 `PdfAcroForm` 类和 `Image` 类分别表示 PDF 中的表单和图片,可以通过 `pdfDoc.getAcroForm()` 获取 PDF 文档的表单对象,然后使用 `PdfAcroForm.addField()` 方法添加文本框,使用 `Image.getInstance()` 方法添加图片,示例如下: ```java // 获取表单对象 PdfAcroForm form = PdfAcroForm.getAcroForm(pdfDoc, true); // 替换 FreeTextbox 中的文本框 Elements textboxes = doc.select("div.FreeTextbox input[type=text]"); for (Element textbox : textboxes) { String name = textbox.attr("name"); float left = Float.parseFloat(textbox.attr("data-left")); float top = Float.parseFloat(textbox.attr("data-top")); float width = Float.parseFloat(textbox.attr("data-width")); float height = Float.parseFloat(textbox.attr("data-height")); PdfTextFormField field = PdfFormField.createText(pdfDoc, new Rectangle(left, top, width, height), name, ""); form.addField(field); } // 替换 FreeTextbox 中的图片 Elements imgs = doc.select("div.FreeTextbox img"); for (Element img : imgs) { String src = img.attr("src"); float left = Float.parseFloat(img.attr("data-left")); float top = Float.parseFloat(img.attr("data-top")); float width = Float.parseFloat(img.attr("data-width")); float height = Float.parseFloat(img.attr("data-height")); Image image = Image.getInstance(new URL(src)); image.setAbsolutePosition(left, top); image.scaleToFit(width, height); pdfDoc.addNewPage().add(image); } ``` 这段代码中,`doc.select("div.FreeTextbox input[type=text]")` 通过 CSS 选择器查找所有 `<div>` 元素中 class 属性为 `FreeTextbox` 的子元素中的输入框元素,然后遍历所有输入框元素,通过 `PdfFormField.createText()` 方法创建对应的 PDF 文本框,将其添加到 PDF 表单对象中。 `doc.select("div.FreeTextbox img")` 通过 CSS 选择器查找所有 `<div>` 元素中 class 属性为 `FreeTextbox` 的子元素中的图片元素,然后遍历所有图片元素,通过 `Image.getInstance()` 方法创建对应的 iText 图片对象,并设置其位置和大小,将其添加到新建的 PDF 页面中。 最后,需要关闭 PDF 文档对象并输出结果: ```java pdfDoc.close(); response.setContentType("application/pdf"); response.setHeader("Content-Disposition", "attachment; filename=test.pdf"); response.setContentLength(pdf.size()); ServletOutputStream out = response.getOutputStream(); out.write(pdf.toByteArray()); out.flush(); ``` 这段代码中,通过 `pdfDoc.close()` 方法关闭 PDF 文档对象,然后将 PDF 内容写入 HTTP 响应输出流中,浏览器会自动下载名为 `test.pdf` 的 PDF 文件。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值