《1》
首先我们需要来认识下UEditor,它是由百度web前端研发部开发所见即所得富文本web编辑器,并且是基于BSD协议的开源产品,允许自由使用和修改,这也是小编最看中它的地方,开源就意味着可以自己来定制这个编辑器。
接着我们来下载这个编辑器,打开UEditor的官方主页点击下载 因为我们是基于ASP.NET进行开发,所以选择 [1.4.3
.Net 版本] UTF-8版 就可以了
下载下来的文件名叫 ueditor1_4_3-utf8-net.zip 我们给它解压后 再将解压后的文件夹的名字修改为 ueditor 然后给它复制到我的项目的根目录下。如下图:
接着,我们将ueditor.config.js 和ueditor.all.js文件引入到项目中的UEditorTest.html文件中
然后再将项目里添加一个引用 ,引用文件是 ueditor/net/Bin/Newtonsoft.Json.dll ,将这个Newtonsoft.Json.dll文件添加为引用。
那现在就开始使用吧
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script src="ueditor/ueditor.config.js"></script> <script src="ueditor/ueditor.all.js"></script> </head> <body> <form action="UEditorHandler.ashx" method="post"> <script id="container" name="content" type="text/plain"> </script> </form> </body> </html>
<script type="text/javascript"> var ue = UE.getEditor('container', { initialFrameWidth: 800, //设置富文本的宽度为800px initialFrameHeight: 200, //设置富文本的高度为200px initialContent: "Hi 我是百度富文本", }); </script>
此时我们点击一下Visual studio2013菜单栏的”生成“ 生成解决方案 ,然后再运行UEditorTest.html文件 效果就出来了。如下图:
时间: 2024-10-28 04:39:51