博客 (753)

本文所述部署 DotNetTextBox 的版本为:免费开源版 3.4.1,仅供参考!

引用dll:

ActiproSoftware.CodeHighlighter.Net20.dll
ActiproSoftware.Shared.Net20.dll
CodeHighlighterTest.dll
DotNetTextBox.dll
EnvDTE.dll
Interop.Word.dll
Microsoft.Vbe.Interop.dll
Office.dll
Word_dntb.dll

调用方法:

1.直接在ASPX页面引用控件的话,请将 DotNetTextBox.dll 复制到页面所在项目的 bin 目录下,并在web.config 的 pages -> controls 节点加:

<add tagPrefix="DNTB" namespace="DotNetTextBox" assembly="DotNetTextBox"/>

在需要加入控件的地方添加:

<DNTB:WebEditor ID="WebEditor1" runat="server" systemFolder="system_dntb/" Skin="skin/XP/" PathType="AbsoluteRoot" />

上面设置了我默认的属性。

2.将默认属性写在 appSettings 里,可以不做。

3.添加控件到VS的工具箱,可以不做。

4.将 system_dntb 目录拷贝到所在项目里。

5.将控件 bin 目录里的 ActiproSoftware.CodeHighlighter.Net20.dll、ActiproSoftware.Shared.Net20.dll、CodeHighlighterTest.dll 拷贝到项目 BIN 目录里(如果不需要代码高亮功能,删除 system_dntb 目录里的 PasteCode.aspx 和 PasteCode.aspx.cs 页面就可以不拷贝这三个 DLL 文件)

6.web.config 中设置 codeHighlighter
configSections中加入:

<section name="codeHighlighter" requirePermission="false" type="ActiproSoftware.CodeHighlighter.CodeHighlighterConfigurationSectionHandler, ActiproSoftware.CodeHighlighter.Net20"/>

加入以下代码为二级节点:

<codeHighlighter>
<cache languageTimeout="3"/>
<keywordLinking enabled="true" target="_blank" defaultKeywordCollectionKey="ActiproKeywords">
<keywordCollection key="ActiproKeywords">
<explicitKeyword tokenKey="IdentifierToken" patternValue="Actipro" url="http://www.actiprosoftware.com" caseSensitive="false"/>
<explicitKeyword tokenKey="IdentifierToken" patternValue="CodeHighlighter" url="http://www.codehighlighter.com" caseSensitive="false"/>
</keywordCollection>
</keywordLinking>
<languages>
<language key="Assembly" definitionPath="~/system_dntb/Lexers/ActiproSoftware.Assembly.xml"/>
<language key="BatchFile" definitionPath="~/system_dntb/Lexers/ActiproSoftware.BatchFile.xml"/>
<language key="C#" definitionPath="~/system_dntb/Lexers/ActiproSoftware.CSharp.xml"/>
<language key="CSS" definitionPath="~/system_dntb/Lexers/ActiproSoftware.CSS.xml"/>
<language key="HTML" definitionPath="~/system_dntb/Lexers/ActiproSoftware.HTML.xml"/>
<language key="INIFile" definitionPath="~/system_dntb/Lexers/ActiproSoftware.INIFile.xml"/>
<language key="Java" definitionPath="~/system_dntb/Lexers/ActiproSoftware.Java.xml"/>
<language key="JScript" definitionPath="~/system_dntb/Lexers/ActiproSoftware.JScript.xml"/>
<language key="Lua" definitionPath="~/system_dntb/Lexers/ActiproSoftware.Lua.xml"/>
<language key="MSIL" definitionPath="~/system_dntb/Lexers/ActiproSoftware.MSIL.xml"/>
<language key="Pascal" definitionPath="~/system_dntb/Lexers/ActiproSoftware.Pascal.xml"/>
<language key="Perl" definitionPath="~/system_dntb/Lexers/ActiproSoftware.Perl.xml"/>
<language key="PHP" definitionPath="~/system_dntb/Lexers/ActiproSoftware.PHP.xml"/>
<language key="PowerShell" definitionPath="~/system_dntb/Lexers/ActiproSoftware.PowerShell.xml"/>
<language key="Python" definitionPath="~/system_dntb/Lexers/ActiproSoftware.Python.xml"/>
<language key="SQL" definitionPath="~/system_dntb/Lexers/ActiproSoftware.SQL.xml"/>
<language key="VB.NET" definitionPath="~/system_dntb/Lexers/ActiproSoftware.VBDotNet.xml"/>
<language key="VBScript" definitionPath="~/system_dntb/Lexers/ActiproSoftware.VBScript.xml"/>
<language key="XAML" definitionPath="~/system_dntb/Lexers/ActiproSoftware.XAML.xml"/>
<language key="XML" definitionPath="~/system_dntb/Lexers/ActiproSoftware.XML.xml"/>
</languages>
<lineNumberMargin foreColor="Teal" paddingCharacter=" " visible="true"/>
<outlining enabled="true" imagesPath="~/system_dntb/OutliningIndicators/"/>
<spacesInTabs count="4"/>
</codeHighlighter>

7.在使用的页面需要设置page: ValidateRequest="false" EnableEventValidation="false"

8.搜索 id 为 OutliningEnabledCheckBox 的单选框,更改默认 Checked="true",显示行号也可以改为选中,不过这样不方便读者复制代码使用。

另外提醒一点,DotNetTextBox 在 UpdatePanel 中使用时,回传后会丢失内容,使用时注意。

4,953

下载最新的免费CodeHighlighter组件 http://www.CodeHighlighter.com

1。确保web.config中的languages节点的.xml文件路径正确。
2。可以在insertCode.aspx更改编辑的默认设置,如checkbox的check等。(或在项目中搜索相关代码)

 


 

 

 

DotNetTextBox 已集成CodeHighlighter,我的修改如下:

xoyozo 16 年前
4,574
 
如何使用,点官网右侧 usage
另外参考: http://blog.csdn.net/jiji262/archive/2007/09/10/1779454.aspx

SyntaxHighlighter is here to help a developer/coder to post code snippets online with ease and have it look pretty. It's 100% Java Script based and it doesn't care what you have on your server.

效果图
xoyozo 16 年前
4,106
CuteEditor在很多网站上都有介绍了,是一款超级Cool的web在线编辑器,下载地址用google找一下就能找到,就不提供了,但是安装方法还是要说一下,因本次是使用vs2005。

      我们在vs2005里面新建个web site吧,把CuteEditor.dll(主控件)、CuteEditor.lic(许可证)、CuteEditor.ImageEditor.dll(因为5.0增加了个EditorImage的功能)、NetSpell.SpellChecker.dll(拷这个的原因是默认打开拼写检查)这几个文件拷贝到web site的bin目录下,刷新bin目录(不像vs2003需要引用dll),同时我们也要把解压缩后的CuteSoft_Client目录全部拷贝到应用程序的根目录下。然后把CuteEditor添加到工具面板.我们在工具面板里面右键选择"选择项",在出来的对话框里面选择"游览",找到CuteEditor.dll,一路确定就可以了。

      我们再添加个CuteEditor.aspx,把工具面板里面的Editor拖到页面上来,这时你就可以运行你的程序使用CuteEditor了,运行如下图:

      上面的只是个最简单的安装,还有比如控制CueEditor的显示,已经安全性和那个什么上传的啊,还有控制用户上传的目录啊,或者给每个用户建个他们自己的图片目录啊,还必须要另外设置,这些暂时先略过吧,您可以自己看一下说明进行设置,这里不多说了。我们现在要开始要给CuteEditor增加高亮代码显示功能,俺这里使用的是CodeHighlighter控件,您可以到http://www.codehighlighter.com下载最新版,最新版同时支持.net1和.net2,因为使用的是vs2005,俺就使用了最新版,现在我们先来给CuteEditor增加一个按钮和打开插入高亮代码的页面代码。

CuteEditor.aspx代码

3,286

 

从官网
http://cutesoft.net
http://www.cuteeditor.cn/
下载最新版CuteEditor
发布网站后如果提示:
无法为类型 CuteEditor.Editor 授予有效的许可证
则搜索此句,可找到解决办法:
下载CuteEditor.lic覆盖即可
注意一点,即破解后的CuteEditor能在调试下正常运行,而发布后破解失效,原因是发布的时候并不把CuteEditor.lic复制到项目里,需手工移动。
xoyozo 16 年前
3,671

做过网页美工的朋友都知道,IE6 及更早版本不支持 PNG 的半透明效果,因此在设计的时候不能更灵活地运用一些元素和技巧,本人是搞开发的,偶尔也会涉及美工的东西,就像这个我的个人主页,我已经放弃对IE6 的兼容性支持了,IE6 总会有退出历史舞台的一天,不过看网站统计,客户端浏览器还是有近五成是IE6,不过一年前是八九成的。最近在网上发现一段 JS 代码,据说能让IE6 轻松支持 PNG 的半透明,先来看看:

<script language="javascript" type="text/javascript">
function correctPNG()
{
 for(var i=0; i<document.images.length; i++)
 {
 var img = document.images[i]
 var imgName = img.src.toUpperCase()
 if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
 {
 var imgID = (img.id) ? "id='" + img.id + "' " : ""
 var imgClass = (img.className) ? "class='" + img.className + "' " : ""
 var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
 var imgStyle = "display:inline-block;" + img.style.cssText
 if (img.align == "left") imgStyle = "float:left;" + imgStyle
 if (img.align == "right") imgStyle = "float:right;" + imgStyle
 if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
 var strNewHTML = "<span " + imgID + imgClass + imgTitle
 + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
 + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
 + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"
 img.outerHTML = strNewHTML
 i = i-1
 }
 }
}
window.attachEvent("onload", correctPNG);
</script>

看了下代码,发现它只能对 <img> 标签里的 PNG 进行处理,而对 css 里的 PNG 背景无能为力,另外,对 <img> 的 src是引用 .aspx 等格式时也无效。

处理 css 中的 PNG 透明是这样的:

html>body .menublockmiddle{
background: url(../images/menu_block/menu_block_r1_c3.png) no-repeat;
}
* html .menublockmiddle{
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=crop, src="../images/menu_block/menu_block_r1_c3.png");
}

每个背景图都必须像这样写成两个,分别让IE和非IE识别,从而导引 css 异常烦琐,所以,虽然我们能完美解决 PNG 在 IE6 下的兼容性,但是这是美工的活,我已经放弃这么做了。

4,131

PNG半透明背景图片效果
PNG图片在网页设计中扮演着一个很重要的角色,利用PNG图片的特点可以制作出实用,绚丽的效果,可是对于PNG图片的支持却不是很理想,Firefox和Opera对PNG支持的比较好,特别是Firefox浏览器。可是IE却不理PNG,使得设计者无法很随意的使用png图片。

IE5.5+的AlphaImageLoader滤镜为通向png提供了一个道路,如果他载入的是PNG(Portable Network Graphics)格式,则0%-100%的透明度也被提供。我们就利用这个滤镜和hack来设计一个半透明png背景图片的模型

这里是个超链接测试

(X)HTML: <div id="wrap">
<p><a href="http://www.jluvip.com"><strong>PNG半透明背景图片效果</strong></a><br />:PNG图片在网页设计中扮演着一个很重要的角色,利用PNG图片的特点可以制作出需要使用绚丽的效果,可是对于PNG图片的支持却不是很理想,Firefox和Opera对PNG支持的比较好,特别是Firefox浏览器。可是IE却不理PNG,是的设计者无法很随意的使用png图片。</p>
<p>IE5.5+的AlphaImageLoader滤镜为通向png提供了一个道路,如果他载入的是PNG(Portable Network Graphics)格式,则0%-100%的透明度也被提供。我们就利用这个滤镜和hack来设计一个半透明png背景图片的模型
</p>
<p><a class="test" href="http://www.jluvip.com">这里是个超链接测试</a></p>
CSS: #wrap{ width:460px;margin:20px auto 20px 80px;text-align:left;height:300px; padding:20px; border:1px #eee solid;}
/*not for ie 6.0*/
html>body #wrap{background: url(img/bgcanvas.png) repeat;}
/*for ie 6.0*/
* html #wrap {
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src="img/bgcanvas.png");
background:none;
}
#wrap a{color:#c00; text-decoration: none; position:relative;}/*解决IE下链接失效的问题*/
#wrap a:hover{ text-decoration:underline;}

nbsp;

观看效果

3,515

&#13;&#10;

xoyozo 16 年前
4,624

一般来说,我们在写博客或做网站时都需要对插图做一些效果,比如增加阴影、图片圆角、倒映等等。这些效果一般可以用3个方法实现,一是用PS实现对图片进行修改,二是使用CSS,三是使用JavaScript。使用PS会破坏原图,而且要花费一定的时间。Netzgesta上有很多实现图片特效的JavaScript提供下载,很多效果都是相当漂亮的。

1、水倒映

10个用能用JavaScript实现的图片特效(可能吧 www.kenengba.com)

这个js将为图片添加水倒映的特效,时下web2.0站点很喜欢这种效果。

如果你喜欢在线生成水倒映效果,可以参考这里

js下载链接

2、圆角+阴影

或许你记得用RoundPic能在线生成圆角图片,事实上用这个js也可以实现效果。

js下载链接

3、高光圆角阴影

10个用能用JavaScript实现的图片特效(可能吧 www.kenengba.com)

这个效果可以用来做按钮。是我最喜欢的特效之一。

js下载链接

4、斜光阴影效果

和上面的效果看起来非常相似,但也有不同的地方。

js下载链接

5、相框效果

10个用能用JavaScript实现的图片特效(可能吧 www.kenengba.com)

如果你在做图片博客,可以你会喜欢这个js,使用后博客文章内的图片都有相框的效果。

js下载链接

6、黑色相框

不喜欢白色没有立体感的相框,那试试这个立体感充足的js效果吧。

js下载链接

7、放大镜

10个用能用JavaScript实现的图片特效(可能吧 www.kenengba.com)

一个很有趣的js,实现放大镜效果。记得在去年Google开发者日的时候,某个主讲人也有说到在GMaps里实现放大镜的有趣效果。具体效果点击这里

js下载链接

8、菲林效果

如果你在写一个电影博客,这个效果或许会让你喜欢。

js下载链接

9、花边效果

很简单的图片花边效果。

js下载链接

10、翻页效果

10个用能用JavaScript实现的图片特效(可能吧 www.kenengba.com)

翻页效果是很常见的,Google一下你会发现有很多相关的教程,如果你不想花时间去学,直接下载这个js吧。

js下载链接

安装使用方法:

将下载的压缩包解压之后上传到网站空间,然后在需要显示效果的head里添加代码,比如高光阴影效果Glossy,添加的代码是:

<script type="text/javascript" src="glossy.js"></script> 

对于Wordpress,可以在header.php里添加。如果只要求文章页里出现效果,也可以考虑在single.php里添加。

然后,在想要显示特效的图片的<img>标记里添加:

class="glossy"

这样效果就出现了。

其它效果添加方法类似。

via BlogOhblog

4,601

习惯于 IE6/7 页面设计的朋友都知道,下面的代码实现了在宽频显示器下所有页面内容居中显示,文字在内部靠左显示:


Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

--><div style="width: 100%; text-align: center;">
<div style="width: 1000px; text-align: left;">
文字
</div>
</div>

而在支持 web 标准的浏览器中显示却有可能居中无效,这时只要在内部的 div 的 style 加上 margin:auto 就行了.


Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

--><div style="width: 100%; text-align: center;">
<div style="width: 1000px; text-align: left; margin: auto;">
文字
</div>
</div>

效果:

文字
文字
文字
文字
文字

4,649