CuteEditor 配置详解

 CuteEditor是一款功能非常强大,支持图片上传、文件下载和word类似的文字编辑器。并且Vs2003和Vs2005都可以适用。
CuteEditor6.0页面前端不能用脚本getHTML()获得编辑器内容,因为getHTML()根本不存在,既不在当前页面脚本中定义,也在外链脚本中也找不找这个方法的定义,而CuteEditor5.0可以(CuteEditor5.0有些脚本方法即使存在,在不同浏览器下不一定都能正常工作)。博客园是用了较新版本的CuteEditor,前台脚本对编辑器内容的验证只是作了非空验证,它的代码是这样的:

if (document.getElementById('CE_Editor_Edit_EditorBody_ID') != null && document.getElementById('CE_Editor_Edit_EditorBody_ID').value == '')
{
  alert("请输入内容!");
  return false;
}

一、CuteEditor的安装

      1、将以下文件考贝到你站点根目录下的bin内(这些在CuteEditor6.0/bin下都可以找到)
      CuteEditor.dll,
      CuteEditor.ImageEditor.dll(6.0增加的EditorImage功能),
      CuteEditor.lic(解密文件),
      NetSpell.SpellChecker.dll(拼写检查功能)
      注:(“.dic”为扩展名的文件是词典保存为纯文本文件的格式。将CuteEditor6.0/bin文件夹里的都拷到站点根目录下的bin内也可以)

      2、将CuteSoft_Client文件夹拷贝到项目的根目录
      CuteSoft_Client包含CuteEditor文件夹和example.css,放了控件图片,文件之类的数据example.css它指定了编辑器的样式。(在2.0下可能要把dialog文件夹里面的getfilethub.aspx删除)
      注:FilesPath用来设置所对应的目录,如:FilesPath="~/admin/CuteSoft_Client/CuteEditor/"

      3、在根目录下建立Uploads的文件夹作为上传图片及附件的根目录

      4、将CuteEditor.dll添加到工具箱
     
先在工具箱空白处右击选择“添加选择项”,给选项卡添加一外名称为:CuteEditor。再在该选项卡中右击,选择“选择项 ”,在弹出的对话框的“.NET Frameword组件”标签中选择要添加的DLL文件即可。

      5、CuteEditor属性设置(假设当前页在根目录下)
      1)AutoConfigure设为simple,即选择最简单的界面显示方式
     2)EditorWysiwygModecss设为:CuteSoft_Client/example.cs,需要把example.css文件放到该目录下。
     3)FilesPath设为:CuteSoft_Client/CuteEditor,设置CuteEditor目录的路径

      6、控件的调用代码如下:
      <%@ Register TagPrefix="CE" Namespace="CuteEditor" Assembly="CuteEditor" %> 如果是按照第4步从工具箱中拖放到页面的话,则此代码会自动生成,不需要要手动添加。
      <CE:EDITOR id="Editor1" runat="server" Width="700px" FilesPath="~/CuteSoft_Client/CuteEditor/"   EditorWysiwygModeCss="../example.css" ThemeType="Office2003_BlueTheme"></CE:EDITOR>

二、基本属性:

      EditorWysiwygModeCss :设置样式
      ThemeType :设置风格
      AutoConfigure :选择功能是简单还是复杂的
      Text :设置加载时候默认内容
      MaxHTMLLength :设置最大长度
      BreakElement :默认“回车”产生什么HTML
      URLType :没发现有什么区别
      ResizeMode :自动长度(长度设置的几中形式)
      ReadOnly :是否为只读
      CustomCulture :设置语言类型 china 为zh-cn
      EditCompleteDocument :设置是否完整的HTML页面代码(也就是说是不是包括html头)
      AllowPasteHtml :是否允许粘帖HTML代码
      EnableContextMenu :在文本里是否显示右键菜单

三、CuteEditor文件夹里的配置

      1)控制工具拦显示:在CuteSoft_Client/CuteEditor/Configuration/AutoConfigure 里设置
      2)控制右键显示:CuteSoft_Client/CuteEditor/Configuration/ContextMenuMode里设置
      3)设置权限:CuteSoft_Client/CuteEditor/Configuration/Security里设置

       例如要设置各种组件的大小等属性限制,如控制上传文件的大小等,可在CuteSoft_Client/CuteEditor/Configuration/Security修改“Security”文件夹中的“Default.config”文件即可
      ==========================
      <?xml version="1.0" encoding="utf-8" ?>
      <configuration>
      <security name="RestrictUploadedImageDimension">true</security>   //是否限制上传图象尺寸
      <security name="OverWriteExistingUploadedFile">false</security>   //如果上传的文件已经存在,是否将其覆盖
      <security name="UseTimeStampRenameUploadedFiles">true</security> //重命名为时间
      <security name="AutoResizeUploadedImages">true</security>   //是否自动调整上传图象
      <security name="MaxImageWidth">1024</security>   //上传图象的最大宽度
      <security name="MaxImageHeight">768</security>   //上传图象的最小宽度
      <security name="MaxImageSize">1000</security>   //上传图象文件的最大值
      <security name="MaxMediaSize">100</security>   //上传媒体文件的最大值
      <security name="MaxFlashSize">100</security>   //上传Flash文件的最大值
      <security name="MaxDocumentSize">10000</security>   //文档最大值
      <security name="MaxTemplateSize">1000</security>   //模板最大
      <security name="ImageGalleryPath">~/uploads</security>   //图象文件上传路径
      <security name="MediaGalleryPath">~/uploads</security>   //媒体文件上传路径
      <security name="FlashGalleryPath">~/uploads</security>   //Flash文件上传路径
      <security name="TemplateGalleryPath">~/templates</security>   //模板路径
      <security name="FilesGalleryPath">~/uploads</security>   //文件库路
      <security name="MaxImageFolderSize">102400</security>   //图象文件夹最大
      <security name="MaxMediaFolderSize">102400</security>   //媒体文件夹最大值
      <security name="MaxFlashFolderSize">102400</security>   //Flash文件夹最大值
      <security name="MaxDocumentFolderSize">102400</security>   //文档文件夹最大值
      <security name="MaxTemplateFolderSize">102400</security>   //模板文件夹最大值
      <security name="ThumbnailWidth">80</security>   //最小宽
      <security name="ThumbnailHeight">80</security>   //最小高度
      <security name="ThumbnailColumns">5</security>   //最小列数
      <security name="ThumbnailRows">3</security>   //最小行数
      <security name="AllowUpload">true</security>   //是否允许上传
      <security name="AllowModify">true</security>   //是否允许修改
      <security name="AllowRename">true</security>   //是否允许重命名
      <security name="AllowDelete">true</security>   //是否允许删除
      <security name="AllowCopy">true</security>   //是否允许复制
      <security name="AllowMove">true</security> <!-- this is rename too -->   //是否允许移动
      <security name="AllowCreateFolder">true</security>   //是否允许创建文件夹
      <security name="AllowDeleteFolder">true</security>   //是否允许删除文件夹
      <security name="ImageFilters">   //这里过滤(设置)图象文件格式
            <item>.jpg</item>
            <item>.jpeg</item>
            <item>.gif</item>
            <item>.png</item>
      </security>
      <security name="MediaFilters">   //这里过滤(设置)媒体文件格式
            <item>.avi</item>
            <item>.mpg</item>
            <item>.mpeg</item>
            <item>.mp3</item>
      </security>
      <security name="DocumentFilters">   //这里过滤(设置)文档文件格式
            <item>.txt</item>
            <item>.doc</item>
            <item>.pdf</item>
            <item>.zip</item>
            <item>.rar</item>
            <item>.avi</item>
            <item>.mpg</item>
            <item>.mpeg</item>
            <item>.swf</item>
            <item>.jpg</item>
            <item>.jpeg</item>
            <item>.gif</item>
            <item>.png</item>
            <item>.htm</item>
      </security>
      </configuration>
      ========================

      4)设置工具拦按钮具体功能:CuteSoft_Client/CuteEditor/Configuration/Shared 里设置
      5)设置工具拦按钮具体功能:CuteSoft_Client/CuteEditor/Configuration/Shared 里设置
      6)设置语言:CuteSoft_Client/CuteEditor/Configuration/Languages里设置
      7)添加字体:CuteSoft_Client/CuteEditor/Configuration/Shared/Common.config里设置
      感觉 CuteEditor 每处都可以 改变,因为它整体思路都是用摸板,具体体现形式写在配置文件里面。用户修改配置文件或是它提供的属性就可以实现自己的功能!

四、CuteEditor的服务器端控制

      1)设置编辑器的默认文本:
            Editor1.Text = "Default Text";              //服务器端方法
            var editor = document.getElementById('<%=Editor1.ClientID %>');    //JavaScript方法
            var editorText = editor.getHTML();
      2)修改文件的上传目录:Editor1.SetSecurityGalleryPath("~/uploads/jpg");
            修改上传文件的总大小(以Flash为例):Editor1.SetSecurityMaxFlashFolderSize(1000);
            修改单个上传文件的大小(以Flash为例):Editor1.SetSecurityMaxFlashSize(kb);   //默认KB为单位

      3)多用户文件夹
            由于上传的文件统一被放置到uploads文件夹中,可以通过程序控制为每个用户建立一个上传的文件 夹。代码如下:
            using System.IO;
            string username = Session["username"].ToString() ;
            fullPath = Server.MapPath("uploads//") + username;
            if (!Directory.Exists(fullPath))
            {
                  Directory.CreateDirectory(fullPath);
            }
            Editor1.SetSecurityGalleryPath("~/uploads/" + username);

<br/>CuteEditor功能特点 <br/>是什么使CuteEditor成为Html在线编辑器的领航者?除了其强大的功能和方便的使用, 这里还有一些顶尖的技术因素是CuteEditor编辑器成为你编辑和发布Web内容的最佳选择: <br/> 界面简洁加载速度快 <br/><br/>由于才有了很多优化方法,所以CuteEditor非常简单、小巧、装载速度快,但仍然保持功能强大、执行效率高的特点。 <br/> <br/> 跨浏览器,跨平台的所见即所得在线html编辑器 <br/><br/>兼容市面上最流行的ie5.5+,firefox1.0+,mozilla1.3+, netscape7+和Safari(1.3+)浏览器,并且包括Mac和Linux操作平台。 <br/> <br/> CuteEditor遵循Web标准,没有类似 <FONT> 这种标签 <br/><br/>你的Html编辑器还在使用类似 <FONT>这种标签么? CuteEditor会帮助你构建用户最新Web标准的html代码标签,自动生成简洁的HTML/XHTML代码。 为什么要遵循Web标准? <br/><br/>学习应用Web标准有很多益处,下面给几个简单例子:<br/><br/>获得好的搜索引擎排名: The separation of content and presentation makes the content represent a larger part of the total file size. Combined with semantic markup this will improve search engine rankings. <br/>更快的下载和加载网页: Less HTML results in smaller file sizes and quicker downloads. Modern web browsers render pages faster when they are in their standards mode than when they are in their backwards compatible mode. <br/>适应未来网页浏览器: When you use defined standards and valid code you future-proof your documents by reducing the risk of future web browsers not being able to understand the code you have used. <br/>代码编写简单,维护方便: Using more semantic and structured HTML makes it easier and quicker to understand code created by somebody else. <br/>适应其他设备: Semantic HTML, where structure is separated from presentation, makes it easier for screen readers and alternative browsing devices to interpret the content. <br/>非常好的适应性: A semantically marked up document can be easily adapted to print and alternative browsing devices, like handheld computers and cellular phones, just by linking to a different CSS file. You can also make site-wide changes to presentation by editing a single file. <br/>Read more:<br/>我的网页符合Web标准,你的呢? <br/> 能自动清理HTML代码中Word标记 <br/><br/>When text is pasted from Microsoft Word allot of unnecessary word specific markup is carried across. This can result in web pages that take an unnecessarily long time to download. The Paste from Word button solves this by removing word markup before pasting the text into your page. <br/> <br/> 支持W3C WAI和section 508的无障碍引导 <br/><br/>Cute Editor optional accessibility settings ensure your site complies with Section 508, so people with disabilities can have full access to your content.<br/> <br/> 输出的HTML或不错的XHTML供你选择 (Demo)<br/><br/>Cute Editor supports output well-formed XHTML. Your choice of XHTML 1.0 or HTML 4.01 output. <br/><br/> <br/> 无限次的撤销/恢复<br/><br/>Many of the other editors on the market cannot undo or redo certain actions, and certain table operations - such as cell merge or column deletion. Cute Editor 4.0 has a new custom undo/redo implementation to make you can now safely undo those actions. <br/><br/> <br/> 多语言支持,通过简单设置XML即可完成 (Demo)<br/><br/>All labels, buttons, tooltips and messages are located in external XML files, so that the language of the editor can be switched with a single property. You can also create a new language in a matter of minutes. <br/> <br/> 完全支持页面编辑(从 <HTML> 到 </HTML>) (Demo)<br/><br/>Cute Editor 4.0 allows you to edit a full HTML page, including <title>, <!DOCTYPE...> and some other options. You can also insert Form elements (checkbox, button, textarea, etc.) and modify certain properties of the element.<br/> <br/> 默认换行为软回车 (Demo)<br/><br/>Most other editors insert double line returns which can be annoying for clients who are used to editing in Microsoft Word. CuteEditor can be configured to use <div>, <br> or <p> tags when you press enter. In either mode <br> tags can be created by using shift+enter.<br/> <br/> 支持代码缩进和小写字母<br/><br/>Cute Editor displays nicely indented code in the HTML mode and the generating HTML tags and Attributes are in lower case. This is very convenient and important for the advanced users. <br/> <br/> 支持全屏编辑 (Demo)<br/><br/>It does not open a new window, instead it will resize to fit the browser screen. Edit in full screen mode, maximizing your available space. <br/><br/> <br/> 没有打开较慢的Java或ActiveX组件<br/><br/>100% DHTML, JavaScript ASP.Net code. There are no slow Java or ActiveX components to worry about and everything is handled in the browser! <br/><br/> <br/> 支持相对地址和URL自动关联(Demo)<br/><br/>With Cute Editor, you have the choice of using either a relative or absolute URL. <br/> <br/> 部署简单<br/><br/>The perfect addition to your content management system! Only a couple lines of code , you don't need to be an expert. Allows you to add an online HTML editing functionality that works with standard HTML form.<br/> <br/> 可以简单的通过API隐藏按钮和标签 <br/><br/>Cute Editor allows developers to set the image directory, set the controls width, disable image uploading and deleting, restrict access to the source/preview tabs, hide buttons and lists that you don't want your clients to see or access. <br/> <br/> 支持图片的文字环绕 <br/><br/>Locate the image you want to wrap text around, and click any justify button in the toolbar. The image will float to the desired direction. Text will be positioned around the image. <br/> <br/> 支持文件下载 <br/><br/>You can upload document files, create a link from your HTML content to the document files (zip files, ppt files...). <br/> <br/> CSS型皮肤 (Demo)<br/><br/>Cute Editor provides several built in themes that are ready to use. Developers can completely change the appearance of the toolbar and the dialogs by simply modifying the supplied classes and images. <br/> <br/> 高级的表格管理<br/><br/>Create and modify tables and table cells. Set their border color, alignment, cellspacing and more! Once you've created a table, simply right click inside of it and use the handy popup menu to change its attributes. <caption>,<summary>,<thead>,<tfoot>,<th> tags are supported. <br/><br/> <br/> 图片插入和自动上传<br/><br/>Built-in thumbnail generator. Thumbnail images are dynamically created; Supports upload new images. Paging - specify how many images. Support auto resize images.<br/> <br/> 具有特殊的对话框<br/><br/>With Style builder dialog box you can apply CSS style attributes directly to any HTML elements on your Web page.<br/> <br/> 支持内容模板 (Demo)<br/><br/>The basic idea behind a Content Management System (CMS) is to separate the management of content from design. Cute Editor allows the site designer to easily create and establish templates to give the site a uniform look. Templates may be modified when desired. <br/> <br/> 通过限制html和文字的长度来保护你的数据库 (Demo)<br/><br/>If you tried to insert a record whose text length is greater than allowed by your table, an error will be reported. To prevent this type of error from occurring, developers can use MaxHTMLLength or MaxTextLength in the Cute Editor to limit the length of the user抯 input. <br/> <br/> Apply security to control user access to resources <br/><br/>Cute Editor allows developers to assign a pre-defined set of permissions by group or individual. This prevents a normal user to access the administration functionality. <br/><br/>The details of permissions are specified by an XML security policy file. Each level maps to a specific file. The default mappings: <br/><br/>admin设置 admin.config <br/>default设置 default.config <br/>guest设置 guest.config <br/>You can customize and extend each policy file by editing the XML security policy file. You can also create your own policy files that define arbitrary permission sets.<br/><br/>Comparison of the sample security policy file <br/><br/> <br/>Permissions/Resource Setting Admin Default Guest <br/>AllowUpload <br/>AllowDelete <br/>AllowCopy <br/>AllowMove <br/>AllowCreateFolder <br/>AllowDeleteFolder <br/>RestrictUploadedImageDimension <br/>AutoResizeUploadedImages <br/>MaxImageWidth 6400 640 640 <br/>MaxImageHeight 4800 480 480 <br/>MaxImageSize 10000 100 100 <br/>MaxMediaSize 10000 100 100 <br/>MaxFlashSize 10000 100 100 <br/>MaxDocumentSize 10000 100 100 <br/>ImageGalleryPath ~/uploads ~/uploads/member ~/uploads/guest <br/>MediaGalleryPath ~/uploads ~/uploads/member ~/uploads/guest <br/>FlashGalleryPath ~/uploads ~/uploads/member ~/uploads/guest <br/>FilesGallaryPath ~/uploads ~/uploads/member ~/uploads/guest <br/>ImageFilters .jpg <br/>.jpeg <br/>.gif <br/>.png .jpg <br/>.jpeg <br/>.gif <br/> .jpg <br/>.jpeg <br/>.gif <br/> <br/>MediaFilters .avi <br/>.mpg <br/>.mpeg <br/>.mp3 .avi <br/>.mpg <br/>.mpeg <br/> .avi <br/>.mpg <br/>.mpeg <br/> <br/>DocumentFilters .txt, .doc<br/>.pdf, .zip<br/>.rar, .avi<br/>.mpg, .mpeg<br/>.mp3, .jpg<br/>.jpeg,.gif<br/>.png .pdf, .doc<br/> .txt, .doc<br/>.pdf, .zip<br/> <br/> <br/> 在线图片编辑<br/><br/>People that input content on a website are generally not web designers, so most don't have that design & technical fibre in them. With online image editor, you can now edit image file with no image editing software to download or install! Easy drag and drop familiar interface. Resize, change dimensions, scale, crop, add text, optimize, rotate, flip, mirror and add watermark. <br/> <br/> 控制上传文件夹大小<br/><br/>Max Upload Folder size(Including all subfolders and files. A must have feature for people who have limited hosting space.) Dynamic display of available free space in the Upload Folder.Limits the size of your upload folder. If the max is reached uploads will be disabled. <br/> <br/> 支持图片热点<br/><br/>Image maps are pictures with clickable regions also known as "hotspots." When users click on one of the hotspots, they're directed to the page you designate. CuteEditor 5.0 lets you easily create image maps to add fun and excitement to a page<br/> <br/> <div> 的盒模式<br/><br/><div> boxes offer a much greater ability to control the layout of a page. With CuteEditor, you can put any content between <div> tags and then use CSS to style all sorts of borders, backgrounds, etc. <br/> <br/> 通用虚拟键盘<br/><br/>Virtual Keyboard does not require changes to language settings of your system and even speeds up the entire text input process for your customers. It lets your native speaking clients to access your web resources from any location in the world without changing national keyboard layouts and fonts on their machines. <br/> <br/> 把图片存到数据库<br/><br/>With CuteEditor you can easily use a Sql Server database or access database as the file storage. <br/> <br/> RTF和HTML之间互相转换<br/><br/>With CuteEditor you can easily convert an HTML document into an RTF file and RTF file into HTML or XHTML document. <br/> <br/> 生成PDF文件<br/><br/>CuteEditor also allows you dynamically create Adobe PDF documents from ASP.NET.<br/> cuteEditor6.0多语言版(集成lic文件) <br/><br/>目前功能强大,最好的Asp.net编辑器之一 <br/>除了一般html编辑器具有的功能外,还有word过滤、图片在线处理、加水印等实用功能 <br/>使用关键步骤: <br/><br/>1、引用bin下的cuteEditor文件 <br/>2、在aspx页面顶部中添加引用 <br/>3、在aspx页面中加入代码 <br/>4、最后可以在.cs文件中通过来读取Editor1.Text的值来进行任意的扩展和控制了 <br/>具体配置可参照default.aspx和default.aspx.cs <br/><br/>关于cuteEditor6.0的特征及体验请浏览cuteEditor.cn,系统集成了lic授权文件,仅供体验测试使用,请不要用于任何商业用途! <br/><br/> <br/>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值