0%

ueditor在asp.net中的使用

学生作品中要用到格式化输入内容的功能,于是就用到了在线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 更新】