UEditor | 百度富文本使用

《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

UEditor | 百度富文本使用的相关文章

UEditor百度富文本编辑器--让编辑器自适应宽度的解决方案

UEditor百度富文本编辑器的initialFrameWidth属性,默认值是1000. 不能够自适应屏幕宽度.如图1: 刚开始的时候,我是直接设置initialFrameWidth=null的.效果如图2: 这样子UEditor百度富文本编辑器会在第一次加载的时候获取屏幕宽度,然后赋值给initialFrameWidth属性. 这样子确实是可以在第一次加载的时候适应屏幕宽度,但是却似乎宽度稍微过了一点点,超过上面的灰条了.而且这里还有一个问题: 当你改变浏览器大小时,会有个很严重的排版BUG

[转]UEditor百度富文本编辑器--让编辑器自适应宽度的解决方案

转自http://www.cnblogs.com/VAllen/p/UEditor-InitialFrameWidth-Auto.html UEditor百度富文本编辑器的initialFrameWidth属性,默认值是1000. 不能够自适应屏幕宽度.如图1: 刚开始的时候,我是直接设置initialFrameWidth=null的.效果如图2: 这样子UEditor百度富文本编辑器会在第一次加载的时候获取屏幕宽度,然后赋值给initialFrameWidth属性. 这样子确实是可以在第一次加

ueditor百度富文本编辑器使用解决方案

写网站的时候都是用asp.net2.0写的 但是看了百度的富文本编辑器使用说明都是.net framework 4.0 版本的 百度了半天看的各种的解决方案 我把最新版本的百度富文本编辑器下载下来 改了.sln 文件信息 可以用vs2008打开 当然会报一些错误 ..类名不存在等等 百度了半天还是没解决问题后来放弃了.(最终还是用了百度的) 于是就找了kindeditor但是觉得他长得有点丑..还是放弃了 又接着百度ueditor配置方法看到了一篇博文 http://blog.sina.com.

Ueditor百度富文本编辑器添加h5手机端预览功能

一.需求分析 项目中用到富文本编辑器的地方很多,富文本编辑器一般都是在pc后台上,因为前端是手机端,因此每次再富文本编辑内容保存以后,在手机端展示的样式和我们在富文本中编辑的不太一样,因此就需要在编写完内容之后可以模拟手机端进行预览一下,但是后端用富文本编辑器的地方比较多,不适合在每个页面进行开发,因此做成插件功能放入ueditor之中的方式改动的代价比较小. 首先看下效果 二.代码 先在ueditor.css中添加按钮样式图片: 路径:ueditor\themes\default\css\ue

UEditor百度富文本编辑器--preview在线预览时头部被挡住的解决方案

问题截图: 正常情况应该是如下显示: 解决方案: 1.打开ueditor/dialogs/preview/preview.html 2.找到body节点下面这一句 document.getElementById('preview').innerHTML = editor.getContent(); 在它上面加一句 parent.document.getElementById('edui_fixedlayer').style.top = '46px'; PS:至于这个46px,得根据头部被挡住部分

ueditor百度富文本编辑器linux下报错: class path resource [config.json] cannot be resolved to absolute file path because it does not reside in the file system

具体报错信息如下 java.io.FileNotFoundException: class path resource [config.json] cannot be resolved to absolute file path because it does not reside in the file system: jar:file:/home/java/wcq-new-server/wcq/wcq-admin/target/wcq-admin.jar!/BOOT-INF/classes!

Django集成百度富文本编辑器uEditor

UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码. 首先从ueEditor官网下载最新版本的包,目前官网上提供了ASP..NET.PHP.JSP版本的,django版本只有一个第三方个人开发的,但看上出配置起来稍微复杂一点. 这里不介绍uEditor的使用方法,也不过多解释uEditor的配置方法,官网上都有详细的文档和API介绍,下载的Demo中也有常用的方法的示例代码,这里主要介绍uEdi

Jfinal整合百度富文本编辑器ueditor

ueditor配置文件ueditor.config.js修改参数serverUrl:(改为要调用的controller) 后台添加该路由指定的controller package com.sandu.mega.admin.ueditor; import com.jfinal.aop.Clear; import com.jfinal.core.Controller; import com.jfinal.kit.Ret; import com.jfinal.upload.UploadFile; im

百度富文本Ueditor总结

1.话不多说,直接引入库 百度富文本 2.去找到两个例子项目 3.删删减减,要什么不要什么,自己把握 4.由于百度富文本没有人维护了,该库的作者,维护了一些东西,建议是直接从例子里面拿ueditor的源码 5.配置文件 6.作者优化的内容 郑昊川 7.我所遇到的其他坑 serverUrl没有http开头,则会报错,获取不到配置文件,需要写死请求地址,多个环境很容易出现问题. 初步预想,没有http开头的地址,ueditor判断为本地文件,js获取到该文件后,按照预期文件解析,导致报错 则.处理方