学生作品中要用到格式化输入内容的功能,于是就用到了在线html编辑器,用过很多的编辑器,从最早的freetextbox,到后来的fck editor,不过近来还是看好百度出的ueditor,KindEditor 貌似也不错。在这里就以ueditor为例来讲讲怎么使用ueditor。
1.下载
当前最新的是1.3.6版,可以在这里下载,选择自己需要的版本。
2.使用
首先,把下载下来的代码解压到你的应用程序根目录,并把该目录改成ueditor(关于路径需要在editor_config.js中修改相应配置);
其次,在需要使用编辑器的页面添加如下代码,注意这里的js文件的路径:
<!-- 加载编辑器的容器 -->
<script id="editor" type="text/plain"></script>
这里写你的初始化内容
</script>
<!-- 配置文件 -->
<script type="text/javascript" src="ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="ueditor.all.js"></script>
<!-- 实例化编辑器 -->
<script type="text/javascript">
UE.getEditor('editor');
</script>
再次,在asp.net里面获取编辑器里面的内容,代码如下:
string content=Request.Params["editorValue"];
与取值相对应的是赋值,这个比较复杂,一般来说我们在代码中先定义一个public的字符串变量Content,把上述代码
<script id="editor" type="text/plain"></script>
修改这里
</script>
改成
<script id="editor" type="text/plain"></script>
<% =Content %>
</script>
这样在当你要给编辑器赋值的时候,只要给Content赋值就行了。
3.配置
ueditor默认的一些路径都是从根目录开始的,如/myProject/ueditor/
,所以修改了路径后要修改window.UEDITOR_HOME_URL
的值,editor_config.js
里还有很多上传有关的路径要修改,没有什么特殊要求,可以用默认的。
此外ueditor的按钮也是可以定制的,因为实际上用不上那么多的按钮,也太复杂了。可以在editor_config.js
中修改,也可以在编辑器实例化的时候写代码。
//单行工具
toolbars: [
['fullscreen', 'source', 'undo', 'redo', 'bold']
]
//多行工具,竖线 '|' 代表按钮之间的分割线
toolbars: [
['fullscreen', 'source', 'undo', 'redo'],
['bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc']
]
建议修改按钮的时候把原先的按钮配置先注释掉,再重新选择你需要的按钮。
4.注意事项
可能会出现如下错误:
从客户端(editorValue=”……”)中检测到有潜在危险的 Request.Form 值
这个需要在web.config中设置,有两个地方,第一个地方添加requestValidationMode="2.0"
,第二个地方添加validateRequest="false"
,最后的结果类似下面的代码:
<httpRuntime targetFramework="4.5" requestValidationMode="2.0" />
<pages validateRequest="false">
今天上课的时候还发现,如果你创建的是网站website而不是项目project,那么整个website在启动的时候会出错,其原因就在于ueditor目录中的app_code
中有一些它自己的代码,你需要把它放到根目录下的app_code
下面,否则网站不理解这些代码,也就会出错。【2014/5/21 20:19:55 更新】