码迷,mamicode.com
首页 > 其他好文 > 详细

UEditor | 百度富文本使用

时间:2015-04-21 16:14:33      阅读:255      评论:0      收藏:0      [点我收藏+]

标签:

《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文件 效果就出来了。如下图:
技术分享








UEditor | 百度富文本使用

标签:

原文地址:http://blog.csdn.net/fanbin168/article/details/45169649

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!