在sharepoint中,自带一个html文本编辑器,可以对字体的大小,颜色甚至复制和粘贴都可以。这次做项目我们准备通过spd把这个编辑器放到自定义的aspx页面中。费了很大的力气,终于在博客堂()和另一个老外的博客上找到了答案,简单的实现如下,具体的原理可以到博客堂看。
需求:把如下的控件放到自定义的aspx页面里。
实现:页面的开头做如下的引用:
<script type="text/javascript" lang ge="javascript" src="/_layouts/2052/form.js"></script>
把如下的代码放到页面响上。(文本操作栏是通过js实现的)
<textarea name="txtTextArea1" rows="6" cols="20" id="txtTextArea1" title="Body123" class="ms-long" ></textarea>
<script lang ge="javascript" type="text/javascript">
RTE_ConvertTextAreaToRichEdit("txtTextArea1", tr, false, "", "2052", null, null, null, null, null,"FullHtml", "\/",null,null,null,null);
</script>
当然,你也可以把textarea 换成服务器端的空间textbox,不过此时要注意RTE_ConvertTextAreaToRichEdit()的第一个参数和textbox的客户端的id值对应。
扩展:如果你需要的是如下的html编辑器
只需要把RTE_ConvertTextAreaToRichEdit()方法做如下的改动:
RTE_ConvertTextAreaToRichEdit("txtTextArea1", tr, false, "", "2052", null, null, null, null, null,"Compatible", "\/",null,null,null,null);
今天看到博客园中的一些 SharePoint 爱好者们在讨论关于 SharePoint 内容编辑器中的文件上传。
SharePoint Portal Server在这点上和一些OA应用相比缺乏几个特性,经常被用户提到:
1、只有门户列表的编辑器才能够添加图片,其他如通知列表的编辑器则不能在正文中直接插入图片。
2、内容编辑器不能像FreeTextBox这样方便的直接上传图片,必须将图片首先上传到文档库中,然后再通过URL引用。
问题确实是这样,不符合大多数用户的使用习惯。之前,我在开发公司门户的时候对这个问题有一点肤浅的了解,所以抛砖引玉,希望能够看到更好的解决方案。
其实,门户列表和通知列表中使用的内容编辑器是同一个控件,名字叫:RichTextBox,通过查看客户端的HTML代码可以分析出来。RichTextBox控件是通过Javascript创建的,他们之间工具条上的区别,如:剪切、复制、粘贴、添加图片等功能按钮取决于调用该控件时的一个属性:RestrictedMode。当RestrictedMode=true的时候插入图片的功能是被禁止显示的,此时的情况就出现在如通知列表编辑器的情况下。SharePoint对站点定义的模型确实值得称道,对他了解越深,就越发觉得精彩。在Page UnGhosted状态下,ONet.XML、Schema.XML、WebTemp.XML、DocIcon.XML支撑起WSS/SPS网站的框架结构,当然,这里我们不是谈论这个,我们关心的是另一个文件——FldTypes.XML。用自己的话来描述,FldTypes.XML的主要用途就是定义了列表和库的栏类型和显示样式。我们的主题也是从这个文件入手的!
在客户端察看一个通知列表的添加通知页面NewForm.aspx文件的客户端HTML代码中可以看到<SCRIPT>fld = new TextField(xxx,"xxx","xxx","xxx");......</script>这样形式的一段脚本,没错,就是它输出了那个令人难堪的编辑器。OK,脚步先停在这里,我们在去看FldTypes.XML文件,我喜欢用XMLSpy来查看XML,他对XML的结构再了解不过了,
从图中可以看到,最下面Field TypeName=Note的节就是当我们在创建栏时选择了多行文本形式时的样式定义了。在他的子节点中,我们可以找到图中的CDATA,正好和我们在客户端看到的Javascript对应。
明白了吗?玄机的地方就在Javascript中!
接着向下,Javascript的定义在Ows.js文件里,一番分析,在Ows.js的6082行,function RichTextFieldBuildUI()是用来Render编辑器UI的函数,而他调用了RTE_ConvertTextAreaToRichEdit。
strBaseElementID,
fRestrictedMode,
fAllowHyperlink,
strDirection,
strWebLocale)
其中第二个参数fRestrictedMode参数决定了编辑框是否使用限制模式。
一番改动之后,我已经能够在通知列表中使用和门户列表相同的编辑器了,可以以链接形式添加图片,但保存的时候还是无法正确的保存图片,图片会被自动去掉,当然,这是可以解决的,现在的精力容不得我继续深究了,毕竟这不是最影响我目前项目的重点。另一方面,至于想象将RichTextBox替换成FreeTextBox的可行性,我认为是很小的,通过修改Server端代码几乎没有可能,如果你有足够的精力改写Ows.js中的RTE_ConvertTextAreaToRichEdit函数,那么应该是可行的办法吧。
砖抛完了,可能几乎没用,只能提供一些思路。