在线文本编辑器(一)—FreeTextBox
FreeTextBox是最常见的在线文本编辑器了,有诸多好处。
从官方网站http://freetextbox.com/上下载最新的版本,目前来讲最新的版本是4.0 Beta1,是Beta版,我下载了3.2.2版。
下载解压缩之后,内容如下:
介绍一下:
- aspnet_client--存储的是FreeTextBox所用的各个风格的图片、css文件、JavaScript文件,当你的服务器不能正常的在常规模式下显示控件的时候,就需要使用外部资源模式来显示
- Docs--FreeTextBox的详细地帮助文档
如果想进行扩展开发等,就需要阅读一下这些。 - examples--一些例子
- Framework-1.1 2.0 3.0--分别是运用于不同版本下的.Net中的控件
- 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相关推荐
- FCKeditor在线文本编辑器初级应用
2019独角兽企业重金招聘Python工程师标准>>> 首先从FCKeditor的官网( http://www.fckeditor.net/)下载该编辑器,我下载的版本是FCKedi ...
- 这个在线文本编辑器的源代码
第一次用CSND的Blog的时候就被它的在线编辑器所吸引了.一直想自己写一个这样优秀的在线编辑器,但是一直没有时间. 但是,今天上网的时候却看见了这个在线文本编辑器的源代码 .很是激动,以后写的网站程 ...
- 怎样选择在线文本编辑器
在线文本编辑器就是我们平时在网上写博客,写文章时候用到的,比如这篇文章就是用在线文本编辑器写出来的.下面就讨论下几种常用的在线文本编辑器,以及他们的优点. FCKeditor FCKeditor是一款 ...
- kindeditor在方法中动态创建在线文本编辑器
官方编辑器初始化代码: KindEditor.ready(function(K) { editor = K.create('textarea[name="content"]', { ...
- java html文本编辑器,基于Java WebHTML在线文本编辑器解决方案.doc
基于Java WebHTML在线文本编辑器解决方案 基于Java WebHTML在线文本编辑器解决方案 摘要:FckEditor作为众多优秀HTML在线文本编辑器之一,以其支持多语言的优势而受到众多国 ...
- 基于jquery的bootstrap在线文本编辑器插件Summernote
Summernote是一个基于jquery的bootstrap超级简单WYSIWYG在线编辑器.Summernote非常的轻量级,大小只有30KB,支持Safari,Chrome,Firefox.Op ...
- 在线文本编辑器-ueditor实践
2019独角兽企业重金招聘Python工程师标准>>> 1.在线文本编辑器的作用? UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户 ...
- 在线文本编辑器-WebHtmlEditor
一.什么是 WebHtmlEditor ? 她是一个网页的在线文本编辑器,她能够在网页上实现许多桌面编辑软件(如:Word)所具有的强大可视编辑功能:她是一个真正的绿色软件,不需要在计算机上安装任何的 ...
- 在线文本编辑器实现原理
from: https://io-meter.com/2014/09/01/contenteditable-and-selection/ 最近研究了一下在浏览器中实现的 WYSIWYG 文本编辑器的原 ...
最新文章
- python 从大到小循环_python算法(3) 插入排序
- mysql利用binlog删除数据库_MySQL数据库之mysql手动删除BINLOG的方法
- 如果有一个想法,你如何表述?
- SWF 学习笔记 ——《如何在内存中提取出加密的SWF》
- 电脑win7支持的node.js版本
- Android开发:为什么你的学习效率如此低,为什么你很迷茫?
- 量子卡塔教您如何在Q#中进行量子编程
- 小明开了一家糖果店。他别出心裁:把水果糖包成4颗一包和7颗一包的两种。糖果不能拆包卖
- 在VUE中使用Echarts世界地图,并根据经纬度标记位置
- 不要用战术上的勤奋掩盖战略上的懒惰
- 北京大学MOOC 程序设计与算法(三)魔兽世界三(开战)
- 数据库课程设计-宿舍管理系统
- ~7 ccf 2021-04-1 灰度直方图
- 阿里云-SchedulerX分布式调度中心
- 在LINUX如何用键盘复制,粘贴
- 1M带宽、1Mbps、1Mb/s 区分
- iCloud照片库和照片流的差别
- HDU5441 Travel 有秩并查集
- 机器学习之MATLAB代码--CEEMDAN+EEMD+EMD+VMD+IMF重构络(十八)
- 简述数据分析师需要学什么内容