FTB控件的使用

效果图:



下载地址：
https://files.cnblogs.com/cleo/FTBv3-1-6.zip

http://www.percyboy.com/w/ftb/down/FTB_1.6.3_zh.zip 

http://www.percyboy.com/w/ftb/down/FTB_1.6.3_zh_Source.zip  (源码！！)

    

一.控件版本

     根据本人经验 强烈推荐两个常用也比较好用的版本

    1. FreeTextBox1.6.3(破宝) 源码开放 支持asp.net 1.0 本人试过 在vs2005中不能正常运行.

    2.FreeTextBox3.1.6 最新2.0版 支持asp.net 2005

    同时最重要的也是我们选择他的最大理由，两个都支持文件上传(图片上传功能)

二.操作说明 (asp .net 2005)

    .Net2.0的配置相对简单了很多

   1.把 Framework-2.0 里面的 FreeTextBox.dll   Copy到项目的bin文件夹底下(未编译之前需要手工创建)或在项目中添加引用FreeTextBox.dll 到bin文件夹

   2.把ftb.imagegallery.aspx文件copy 到所在目录(既引用控件文件所在的目录)

   3.把aspnet_client文件夹copy到站点目录，里面的FreeTextBox包含所有的控件素材！！

   4.在页面中引用

    在所引用的页面添加引用<%@ Register Assembly="FreeTextBox" Namespace="FreeTextBoxControls" TagPrefix="FTB" %>

         在页面中添加 控件  <FTB:FreeTextBox ID="content" runat="Server"
           ButtonDownImage="True"
           ImageGalleryPath="../upload"
           Language="zh-CN"
           toolbarlayout="ParagraphMenu,FontFacesMenu,FontSizesMenu,FontForeColorsMenu,FontForeColorPicker,FontBackColorsMenu,FontBackColorPicker|Bold,Italic,Underline,Strikethrough,Superscript,Subscript,RemoveFormat|JustifyLeft,JustifyRight,JustifyCenter,JustifyFull;BulletedList,NumberedList,Indent,Outdent;CreateLink,Unlink,InsertImage|Cut,Copy,Paste,Delete;Undo,Redo,Print,Save|SymbolsMenu,StylesMenu,InsertHtmlMenu|InsertRule,InsertDate,InsertTime|InsertTable,EditTable;InsertTableRowAfter,InsertTableRowBefore,DeleteTableRow;InsertTableColumnAfter,InsertTableColumnBefore,DeleteTableColumn|InsertForm,InsertTextBox,InsertTextArea,InsertRadioButton,InsertCheckBox,InsertDropDownList,InsertButton|InsertDiv,EditStyle,InsertImageFromGallery,Preview,SelectAll,WordClean,NetSpell">
           </FTB:FreeTextBox>还有很多属性，可自己慢慢研究。

         同时ftb.imagegallery.aspx也有属性要设置 各种属性可参考说明

  <FTB:ImageGallery id="ImageGallery1"
   JavaScriptLocation="ExternalFile"
   UtilityImagesLocation="ExternalFile"
   AllowImageDelete="true"
   AllowImageUpload="true"
   SupportFolder="~/aspnet_client/FreeTextBox/"
   AllowDirectoryCreate="false"
   AllowDirectoryDelete="false" runat="Server" />

   这样在后台就可以用content.Text取得编辑框的值进行各种操作了。

下载地址：
https://files.cnblogs.com/cleo/FTBv3-1-6.zip

http://www.percyboy.com/w/ftb/down/FTB_1.6.3_zh.zip 

http://www.percyboy.com/w/ftb/down/FTB_1.6.3_zh_Source.zip  (源码！！)

在aspnet_client文件夹中的FTB-ImageGallery.js修改 以达到插入图片时 插入成功自动关闭窗体

function FTB_InsertImage() {
    
    image = document.getElementById('img_preview');
    src = document.getElementById('img_preview').src;
    if (src == '' || src == null) return;
    
    alt = document.getElementById('img_alt').value;
    title = document.getElementById('img_title').value;
    width = image.width; //document.getElementById('img_width').value;
    height = image.height; //document.getElementById('img_height').value;
    align = document.getElementById('img_align').options[document.getElementById('img_align').selectedIndex].value;
    
    hspace = document.getElementById('img_hspace').value;
    vspace = document.getElementById('img_vspace').value;
    border = document.getElementById('img_border').value;
    
    ftb = document.getElementById('TargetFreeTextBox').value;

    img = '<img src="' + src + '"' + ' temp_src="' + src + '"' + 
        ( (alt != '') ? ' alt="' + alt + '"' : '' ) + 
        ( (title != '') ? ' title="' + title + '"' : '' ) + 
        ( (width != '') ? ' width="' + width + '"' : '' ) + 
        ( (height != '') ? ' height="' + height + '"' : '' ) + 
        ( (height != '') ? ' height="' + height + '"' : '' ) + 
        ( (align != '') ? ' align="' + align + '"' : '' ) + 
        ( (hspace != '') ? ' hspace="' + hspace + '"' : '' ) + 
        ( (vspace != '') ? ' vspace="' + vspace + '"' : '' ) + 
        ( (border != '') ? ' border="' + border + '"' : '' ) + 
        ' />';
        
    window.opener.FTB_API[ftb].InsertHtml(img);
    window.close(); //这个是我加上去的，原始文件没有这行。
};

显然，ftb.imagegallery.aspx 会在用户点击 Insert 按钮之后生成图片的html代码，并调用指定的FTB的InsertHtml方法将代码传递过去。因此，只要为某一元素添加InsertHtml方法，并附加到 FTB_API 对象上，就可以接收和利用 ftb.imagegallery.aspx 返回的图片代码。

<asp:TextBox ID="oThumbnail" runat="server" Width="200px"></asp:TextBox>
<input id="Button1" type="button" value="" onclick="pickThumbnail('<%= oThumbnail.ClientID %>');" />
<script type="text/javascript">
<!--
    function pickThumbnail(src_id) {
        var o = document.getElementById(src_id);
        if (o.InsertHtml === undefined) {
            o.InsertHtml = function(img) {
                //this.value = img;
                var div = document.createElement("DIV");
                div.innerHTML = img;
                //div.firstChild.src 取得图片的绝对网址。这里处理为绝对根路径。
                this.value = div.firstChild.src.substr((location.protocol+"//"+location.host).length);
            }
            FTB_API[o.id] = o;
        }
        // rif 代表图片文件夹的根目录，cif 代表当前目录
        var gallery = window.open("ftb.imagegallery.aspx?rif=~/images&cif=~/images&ftb="+o.id,'gallery','width=700,height=600,toolbars=0,resizable=1');
        gallery.focus();    
    }
// -->
</script>

以上代码在IE7.0及Firefox测试通过。点击下载打包的示例网站


PS: ftb.imagegallery.aspx 在点击Insert按钮后是不会自动关闭的。如果想点击此按钮后关闭该窗口。可以改用ExternalFile方式，然后打开 aspnet_client\FreeTextBox\FTB-ImageGallery.js 文件，在FTB_InsertImage函数的最后加上window.close()；我这里是第77行之后加入了这一句。

 

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

我在此网站http://www.percyboy.com/w/ftb/down/下载了
FreeTextBox 1.6.3 中文版 [307KB]
FreeTextBox 1.6.3 中文版源代码 [420KB]  

1.先把freetextbox.dll添加到项目中

2.把 - ftb.colorpicker.aspx
           - ftb.imagegallery.aspx
           - ftb.inserttable.aspx
从文件夹HelperScripts复制出来，放到外面与 - test.aspx (测试)同等级目录，
（不这么做，插入背景色，图片，表格就不好使）

3.把images文件夹放到test.aspx (测试)同等级目录下,来存放上传的图片.

4.在test.aspx 中,加图片的路径
<FTB:FreeTextBox id="FreeTextBox1" runat="server" Width="700" ButtonPath="\images\ftb\office2003\"/>

this.FreeTextBox1.Text 这个就是FTB中你输入的文本的内容，这是带HTML标记的

this.FreeTextBox1.HtmlStrippedText 这个是将HTML标记去掉的文本

5.写入数据库
在CSDN上看到朋友们说怎么把FreeTextBox内容写入数据库中
我做了一下.就是把所有产生的HTML代码都插入数据库的一个字段中
可以做一个新闻表
news
字段ID(自增) content addtime(getdate)
  

private void Page_Load(object sender, System.EventArgs e)
   {
    // Put user code to initialize the page here
    if (!IsPostBack)
    {
     SqlConnection myConn = new SqlConnection("server=(local)；database=mm；uid=sa；pwd=123")；
     SqlCommand myCmd = new SqlCommand("select * from test where id=2",myConn)；
     myConn.Open()；
     SqlDataReader myDr；
     myDr=myCmd.ExecuteReader()；
     myDr.Read()；
     Response.Write(myDr["content"].ToString())；
     myDr.Close()；
     myConn.Close()；
    }
   }

private void Button1_Click(object sender, System.EventArgs e)
   {
    SqlConnection myConn = new SqlConnection("server=(local)；database=mm；uid=sa；pwd=123")；
    SqlCommand myCmd = new SqlCommand("insert into test (content) values('"+FreeTextBox1.Text+"')",myConn)；  
    myConn.Open()；
              myCmd.ExecuteNonQuery()；
    myConn.Close()；
   }

［注］web.config
在system.web节加入:
   <pages validateRequest="false"/>

Freetextbox是一个免费的.net mshtml 编辑器。
我所用的免费的freetextbox版本是中文版本1.6.3的汉化的freetextbox。
获得的地址。http://www.percyboy.com/w/ftb/
下载之后仔细看看其中的说明，你就可以使用这个完美的编辑器。
其中示例是在内联代码方式下，如果在代码后置下使用Freetextbox 呢。
1、首先我们把 FreeTextBox.dll 文件copy到我们的项目中的bin目录里。
然后在我们的项目里添加新的引用，在添加引用对话框选择项目标签，浏览/选择你的FreeTextBox.dll/打开/确定。应用就添加完成了。

2、如何获得FreeTextBox.dll 中所使用到的名字空间，本中文版本1.6.3 有3个名字空间。
using FreeTextBoxControls;
using FreeTextBoxControls.Design;
using FreeTextBoxControls.Common;
可以在引用的FreeTextBox.dll 查看对象浏览。
点开树型目录就可以清晰的看到，上面所说的名字空间了。
其他的版本类似可以获得。
3、在aspx文件添加freetextbox
<%@ Register TagPrefix="ftb" Namespace="FreeTextBoxControls" Assembly="FreeTextBox" %>
具体的方法和内联一样的。
同时cs文件中会有如下代码：
protected FreeTextBoxControls.FreeTextBox FreeTextBox1;产生
添加完后，运行一下就可以看到结果了。
在设计模式下我们还可以查看FreeTextBox 属性。
4、如何把FreeTextBox 内容写到数据库，我们在aspx文件中添加一个bottom
其的onclick=“my_add"
cs文件
protected void my_add(object sender, System.EventArgs e)
         {
             // 在此处放置用户代码以初始化页面
          Response.Write(FreeTextBox1.Text);
         }
此处是输出内容，可以改成我们需要方法。

----心得-------------------------------------------------------

   在使用FreeTextBox控件进行文本编辑后，进行保存时需要取编辑内容对应的HTML文本内容。取编

辑内容使用my_freetextbox.ViewStateText属性会比使用my_freetextbox.Text属性，在后续的字

符串内容处理上会方便一些。

       在所取出的字符串中，系统自动加上了“\r\n”的回车换行字符串标示，在存储内容到数据库之前最

好将这些“\r\n”字符串用空串“”替换掉（如：my_str=my_str.Replace("\r\n","")），否则在将

来调用时会导致不正常显示。

       在所取出的字符串中，系统还把编辑文本中的双引号“用转义字符\进行了处理，如原字符串为

“wangshixin said "hello!"”，所取得的字符串实际为“wangshixin said \"hello!\"”，因此需要

将所获得的字符串中的全部“\"”用特定的字符串替换掉。在将来提取显示时，再将特定字符串替换为

“\"”（如：my_str=my_str.Replace("\"","wangshixin750920")）。

-----还有,再加上--------------------------------------------------------------------------
  

FreeTextBox1.Text 取得内容（带html标签的）

FreeTextBox1.HtmlStrippedText   也是取得内容（不带Html标签的）
------关于WORD中过来的内容,出错解决------------------------------------------------------------
把从word复制的文本粘贴到freetextbox里，提交到数据库的时候会提示有危险代码，也就是单引号，这是为什么？
在Dottext里的freetextbox,同一篇word文档，提交时就没有问题。
我现在找到的原因是dottext里的freetextbox在提交的时候会把危险代码重新编码好像，而在我的项目里的freetextbox就不会。
查看包含freetextbox控件的页面源文件，又发现license不同，是不是有

把页面中的validateRequest指令设成false即可，或者直接改web.config:<pages validateRequest="false" buffer="true"/>