FreeTextBox是最常见的在线文本编辑器了,有诸多好处。

从官方网站http://freetextbox.com/上下载最新的版本,目前来讲最新的版本是4.0 Beta1,是Beta版,我下载了3.2.2版。

下载解压缩之后,内容如下:

介绍一下:

  1. aspnet_client--存储的是FreeTextBox所用的各个风格的图片、css文件、JavaScript文件,当你的服务器不能正常的在常规模式下显示控件的时候,就需要使用外部资源模式来显示
  2. Docs--FreeTextBox的详细地帮助文档

    如果想进行扩展开发等,就需要阅读一下这些。
  3. examples--一些例子
  4. Framework-1.1 2.0 3.0--分别是运用于不同版本下的.Net中的控件
  5. readme.txt--介绍文档,稍后我会详细叙述这部分内容

现在让我们使用一下这个控件,做一个Demo,我用的是.net 3.5下的这个DLL。

新建项目,引用DLL,添加到工具栏之后,如图:

接下来就和其它控件的使用一样了,显示效果:

此处注意要将页面的ValidateRequest设置为不检测:ValidateRequest="false",

也可以在web.config中进行配置:<pages validateRequest="false"></pages>。

FreeTextBox还有很多比较强大的功能,让我们阅读一下文档:

  • 环境需要
    -.NET Framework 1.1,2.0,3.5
    -IIS 5.0,6.0,7.0
  • 安装DLL
    1、根据.net版本,把相应的FreeTextBox.dll复制到bin目录下
    2、如果有授权文件,将FreeTextBox.lic也复制到bin目录下
  • 安装FTB的支持文件
    FTB需要一些JavaScript、imgges、xml才能正确地使用,安装有两种方法
    1、内部资源-所有的这些文件其实都位于FreeTextBox.dll中,.net 2.0可以自动地获取,而.net 1.x需要手动设置一下web.config:
    <?xml version="1.0" encoding="utf-8" ?>
      <configuration>
       <system.web>
        <httpHandlers>
         <add verb="GET" path="FtbWebResource.axd" type="FreeTextBoxControls.AssemblyResourceHandler, FreeTextBox" />
        </httpHandlers>
       <system.web>
    <configuration>
    如果使用这种方法出错了,查看网页的源文件,看一下FtbWebResource.axd的引用位置,如果有明显的错误,根据实际情况修改一下web.config
    2、外部文件-如果不想使用内部方法,也可以使用外部文件的方式,默认的指向~/aspnet_client/FreeTextBox/。
        按照以下步骤:
    -首先设置FTB资源查找模式:JavaScriptLocation=ExternalFile, ToolbarImages=ExternalFile, ButtonImagesLocation=ExternalFile
    -然后指定文件夹位置:SupportFolder="/FreeTextBoxFiles/。
    设置如下:
        <FTB:FreeTextBox id="FreeTextBox1" SupportFolder="~/myfolder/FreeTextBox"
        JavaScriptLocation="ExternalFile"
        ToolbarImages="ExternalFile
        ButtonImagesLocation="ExternalFile"
        runat="server" />
  • 使用FTB
    要想添加到asp.net页面上:
    1、添加引用:<%@ Register TagPrefix="FTB" Namespace="FreeTextBoxControls" Assembly="FreeTextBox" %>
    2、页面中适当的位置添加代码:<FTB:FreeTextBox id="FreeTextBox1" runat="Server" />
  • 自定义FTB
    FTB本身有一些默认的按钮和下拉框在它的工具栏中的,如果想自定义,有三个方法可以使用:
    1、ToolbarLayout String
        这个属性接受一个字符串,这个字符串描述的是工具栏中的项,“,”用来隔开不同的项,“|”用来插入一个分隔符,“;”用来开始一个新的工具栏。
        默认的设置工具栏就是使用这些属性
        <FTB:FreeTextBox id="FreeTextBox1" ToolbarLayout="paragraphmenu,fontsizesmenu;bold,italic,underline| bulletedlist,numberedlist"      runat="Server" />
       还有一些可用的值,可以进行添加,同时还有一些属性只能用在Pro版本,官方网站给出详细介绍:http://freetextbox.com/features/
    2、Procedurally
        也可以像添加DataGrid中列的方法那样来添加工具栏,在这种情况下需要设置AutoGenerateToolbarLayoutFromString=false:
        <FTB:FreeTextBox id="FreeTextBox1" AutoGenerateToolbarsFromString="false" runat="server" >
                <Toolbars>
                    <FTB:Toolbar runat="server">
                        <FTB:ParagraphMenu runat="server" />
                        <FTB:FontSizesMenu runat="server" />
                    </FTB:Toolbar>
                    <FTB:Toolbar runat="server">
                        <FTB:Bold runat="server" />
                        <FTB:Italic runat="server" />
                        <FTB:Underline runat="server" />
                        <FTB:ToolbarSeparator runat="server" />
                        <FTB:BulletedList runat="server" />
                        <FTB:NumberedList runat="server" />
                    </FTB:Toolbar>
                    <FTB:Toolbar runat="server">
                        <FTB:InsertHtmlMenu runat="server">
                            <Items>
                                <FTB:ToolbarListItem Text="Cool1" Value="<b>lalala</b>" runat="server" />
                                <FTB:ToolbarListItem Text="Cool2" Value="<i>lalala</i>" runat="server" />
                                <FTB:ToolbarListItem Text="Cool3" Value="<u>lalala</u>" runat="server" />
                            </Items>
                        </FTB:InsertHtmlMenu>
                        <FTB:StyleMenu runat="server">
                            <Items>
                                <FTB:ToolbarListItem Text="Highlighed" Value="<b>Highlighed</b>" runat="server" />
                                <FTB:ToolbarListItem Text="SmallCaps" Value="<i>smallcaps</i>" runat="server" />
                            </Items>
                        </FTB:StyleMenu>
                    </FTB:Toolbar>
                </Toolbars>
            </FTB:FreeTextBox>
         (这种情况下我在编译的时候出现错误:未知的服务器标记“FTB:StyleMenu”,不知道这个是为什么,是不是和FTB的版本有关系)
    3、Code(后台代码方式)
    按钮和下拉框也可以通过代码设置,如果只想使用自己定义的工具栏,需要设置AutoGenerateToolbarsFromString=false。
    控件:<FTB:FreeTextBox id="FreeTextBox1" AutoGenerateToolbarsFromString="false" runat="server" />
    设置代码:
        void Page_Load(object Src, EventArgs E) {
        Toolbar toolbar1 = new Toolbar();
        toolbar1.Items.Add(new ParagraphMenu());
        toolbar1.Items.Add(new FontSizesMenu());

    FreeTextBox1.Toolbars.Add(toolbar1);

    Toolbar toolbar2 = new Toolbar();
        toolbar2.Items.Add(new Bold());
        toolbar2.Items.Add(new Italic());
        toolbar2.Items.Add(new Underline());
        toolbar2.Items.Add(new ToolbarSeparator());
        toolbar2.Items.Add(new BulletedList());
        toolbar2.Items.Add(new NumberedList());

    FreeTextBox1.Toolbars.Add(toolbar2);

    Toolbar toolbar3 = new Toolbar();
        StyleMenu styleMenu = new StyleMenu();
        styleMenu.Items.Add(new ToolbarListItem("Highlight","Highlight"));
        styleMenu.Items.Add(new ToolbarListItem("SmallCaps","smallcaps"));

    toolbar3.Items.Add(styleMenu);

    FreeTextBox1.Toolbars.Add(toolbar3);
    }

FTB还有其他一些特性和使用方法,目前我只有这么多研究,以后知道了新内容,再和大家分享。

转载于:https://www.cnblogs.com/baby_shark/archive/2009/05/05/1449599.html

在线文本编辑器(一)—FreeTextBox相关推荐

  1. FCKeditor在线文本编辑器初级应用

    2019独角兽企业重金招聘Python工程师标准>>> 首先从FCKeditor的官网( http://www.fckeditor.net/)下载该编辑器,我下载的版本是FCKedi ...

  2. 这个在线文本编辑器的源代码

    第一次用CSND的Blog的时候就被它的在线编辑器所吸引了.一直想自己写一个这样优秀的在线编辑器,但是一直没有时间. 但是,今天上网的时候却看见了这个在线文本编辑器的源代码 .很是激动,以后写的网站程 ...

  3. 怎样选择在线文本编辑器

    在线文本编辑器就是我们平时在网上写博客,写文章时候用到的,比如这篇文章就是用在线文本编辑器写出来的.下面就讨论下几种常用的在线文本编辑器,以及他们的优点. FCKeditor FCKeditor是一款 ...

  4. kindeditor在方法中动态创建在线文本编辑器

    官方编辑器初始化代码: KindEditor.ready(function(K) { editor = K.create('textarea[name="content"]', { ...

  5. java html文本编辑器,基于Java WebHTML在线文本编辑器解决方案.doc

    基于Java WebHTML在线文本编辑器解决方案 基于Java WebHTML在线文本编辑器解决方案 摘要:FckEditor作为众多优秀HTML在线文本编辑器之一,以其支持多语言的优势而受到众多国 ...

  6. 基于jquery的bootstrap在线文本编辑器插件Summernote

    Summernote是一个基于jquery的bootstrap超级简单WYSIWYG在线编辑器.Summernote非常的轻量级,大小只有30KB,支持Safari,Chrome,Firefox.Op ...

  7. 在线文本编辑器-ueditor实践

    2019独角兽企业重金招聘Python工程师标准>>> 1.在线文本编辑器的作用? UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户 ...

  8. 在线文本编辑器-WebHtmlEditor

    一.什么是 WebHtmlEditor ? 她是一个网页的在线文本编辑器,她能够在网页上实现许多桌面编辑软件(如:Word)所具有的强大可视编辑功能:她是一个真正的绿色软件,不需要在计算机上安装任何的 ...

  9. 在线文本编辑器实现原理

    from: https://io-meter.com/2014/09/01/contenteditable-and-selection/ 最近研究了一下在浏览器中实现的 WYSIWYG 文本编辑器的原 ...

最新文章

  1. python 从大到小循环_python算法(3) 插入排序
  2. mysql利用binlog删除数据库_MySQL数据库之mysql手动删除BINLOG的方法
  3. 如果有一个想法,你如何表述?
  4. SWF 学习笔记 ——《如何在内存中提取出加密的SWF》
  5. 电脑win7支持的node.js版本
  6. Android开发:为什么你的学习效率如此低,为什么你很迷茫?
  7. 量子卡塔教您如何在Q#中进行量子编程
  8. 小明开了一家糖果店。他别出心裁:把水果糖包成4颗一包和7颗一包的两种。糖果不能拆包卖
  9. 在VUE中使用Echarts世界地图,并根据经纬度标记位置
  10. 不要用战术上的勤奋掩盖战略上的懒惰
  11. 北京大学MOOC 程序设计与算法(三)魔兽世界三(开战)
  12. 数据库课程设计-宿舍管理系统
  13. ~7 ccf 2021-04-1 灰度直方图
  14. 阿里云-SchedulerX分布式调度中心
  15. 在LINUX如何用键盘复制,粘贴
  16. 1M带宽、1Mbps、1Mb/s 区分
  17. iCloud照片库和照片流的差别
  18. HDU5441 Travel 有秩并查集
  19. 机器学习之MATLAB代码--CEEMDAN+EEMD+EMD+VMD+IMF重构络(十八)
  20. 简述数据分析师需要学什么内容

热门文章

  1. JAVA 11.11
  2. 【Linux】【GPU】linux上如何查看GPU的运行情况?
  3. Unity循环滚动背景效果制作(uGUI)
  4. 钓鱼Wi-Fi搭建实践
  5. 每天一算法(双色河内塔又叫汉诺塔)
  6. 关于计算机网络实验心得体会以及两种错误情况
  7. 展示一下基于flask框架的网页播放器的代码
  8. 一、多线程是什么?为什么要用多线程?
  9. 现代信号处理笔计 4 线性估计
  10. 用免疫算法解决TSP问题