百度富文本编辑器

时间：2017-01-07 14:00:00 阅读：555 评论：0 收藏：0 [点我收藏+]

标签：toolbar ott location dtd pos val 解压 sea bre

【下载所需资源】---------------------------------------
百度搜索—— 百度富文本编辑器——进入首页（百度编辑器-UEditor-首页）

百度编辑器 - UEditor - 首页
—— 上方导航【下载】——选择对应的版本下载（我选的是 1.4.3.3 .Net 版本 utf-8版）

【把资源引入自己的项目】---------------------------------------

这里，模拟需求：新建一个项目 MyTest，要使用富文本编辑器的功能。

A,引入资源
把下载的资源——解压——把最外层的文件夹命名为自己喜欢的名字（如UEditor）——整个文件夹copy到 MyTest项目中

B,使用资源
如果此时重新编译生成项目，会报错，【未引用命名空间 Newtonsoft.Json】—— 项目引用 net/bin文件夹下的Newtonsoft.Json.dll即可。

新建一个页面，index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title></title>

<script type="text/javascript">

/这里要为根目录下的路径到引用资源的路径/

window.UEDITOR_HOME_URL = "/ueditor/";

</script>

<script src="jquery-1.8.8.js" type="text/javascript"></script>

<script src="ueditor/ueditor.config.js" type="text/javascript"></script>

<script src="ueditor/ueditor.all.min.js" type="text/javascript"></script>

<script type="text/javascript">

$(function () {

setUeditor();

});

//初始化编辑器

function setUeditor() {

// var ue = UE.getEditor(‘UeditorTest‘); //参数为放置文本编辑器的id属性；

//【也可定制菜单。】

var ue = UE.getEditor(‘UeditorTest‘, {

toolbars: [

[‘fullscreen‘, ‘source‘, ‘undo‘, ‘redo‘, ‘bold‘,‘simpleupload‘,‘insertimage‘]

],

autoHeightEnabled: true,

autoFloatEnabled: true

});

/*

可定制属性如下，

‘anchor‘, //锚点

‘undo‘, //撤销

‘redo‘, //重做

‘bold‘, //加粗

‘indent‘, //首行缩进

‘snapscreen‘, //截图

‘italic‘, //斜体

‘underline‘, //下划线

‘strikethrough‘, //删除线

‘subscript‘, //下标

‘fontborder‘, //字符边框

‘superscript‘, //上标

‘formatmatch‘, //格式刷

‘source‘, //源代码

‘blockquote‘, //引用

‘pasteplain‘, //纯文本粘贴模式

‘selectall‘, //全选

‘print‘, //打印

‘preview‘, //预览

‘horizontal‘, //分隔线

‘removeformat‘, //清除格式

‘time‘, //时间

‘date‘, //日期

‘unlink‘, //取消链接

‘insertrow‘, //前插入行

‘insertcol‘, //前插入列

‘mergeright‘, //右合并单元格

‘mergedown‘, //下合并单元格

‘deleterow‘, //删除行

‘deletecol‘, //删除列

‘splittorows‘, //拆分成行

‘splittocols‘, //拆分成列

‘splittocells‘, //完全拆分单元格

‘deletecaption‘, //删除表格标题

‘inserttitle‘, //插入标题

‘mergecells‘, //合并多个单元格

‘deletetable‘, //删除表格

‘cleardoc‘, //清空文档

‘insertparagraphbeforetable‘, //"表格前插入行"

‘insertcode‘, //代码语言

‘fontfamily‘, //字体

‘fontsize‘, //字号

‘paragraph‘, //段落格式

‘simpleupload‘, //单图上传

‘insertimage‘, //多图上传

‘edittable‘, //表格属性

‘edittd‘, //单元格属性

‘link‘, //超链接

‘emotion‘, //表情

‘spechars‘, //特殊字符

‘searchreplace‘, //查询替换

‘map‘, //Baidu地图

‘gmap‘, //Google地图

‘insertvideo‘, //视频

‘help‘, //帮助

‘justifyleft‘, //居左对齐

‘justifyright‘, //居右对齐

‘justifycenter‘, //居中对齐

‘justifyjustify‘, //两端对齐

‘forecolor‘, //字体颜色

‘backcolor‘, //背景色

‘insertorderedlist‘, //有序列表

‘insertunorderedlist‘, //无序列表

‘fullscreen‘, //全屏

‘directionalityltr‘, //从左向右输入

‘directionalityrtl‘, //从右向左输入

‘rowspacingtop‘, //段前距

‘rowspacingbottom‘, //段后距

‘pagebreak‘, //分页

‘insertframe‘, //插入Iframe

‘imagenone‘, //默认

‘imageleft‘, //左浮动

‘imageright‘, //右浮动

‘attachment‘, //附件

‘imagecenter‘, //居中

‘wordimage‘, //图片转存

‘lineheight‘, //行间距

‘edittip ‘, //编辑提示

‘customstyle‘, //自定义标题

‘autotypeset‘, //自动排版

‘webapp‘, //百度应用

‘touppercase‘, //字母大写

‘tolowercase‘, //字母小写

‘background‘, //背景

‘template‘, //模板

‘scrawl‘, //涂鸦

‘music‘, //音乐

‘inserttable‘, //插入表格

‘drafts‘, // 从草稿箱加载

‘charts‘, // 图表

*/

}//初始化end

function getContent() {

alert(UE.getEditor(‘UeditorTest‘).getContent());

}

</script>

</head>

<body>

<div>

<div style="margin-left: auto; margin-right: auto; width: 700px;">

<input type="button" value="发表" onclick="getContent()" />

</div>

<div id="UeditorTest" style="margin: 0 auto; width: 700px; height: 500px;">

</div>

</div>

</body>

</html>

===后发现，向服务器提交数据的时候，会出现 form含有潜在的危险字符。所以又拆成了 aspx页面，因为这样的页面可以设置

<system.web>

<httpRuntime requestValidationMode="2.0"/>

<compilation debug="true"/>
</system.web>

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index.aspx.cs" Inherits="Mytest.Index"ValidateRequest="false" %>

==又发现如果用ajax提交数据的话，比如 <span> <会解析含有 &特殊符号的数据，ajax对于这样的特殊符号的数据，传递到后台会丢失。解决方法看日志【 ajax 传递带有特殊符号参数的问题】

aspx页面代码

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index.aspx.cs" Inherits="Mytest.Index" ValidateRequest="false" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

<script type="text/javascript">

/这里要为根目录下的路径到引用资源的路径/

window.UEDITOR_HOME_URL = "/ueditor/";

</script>

<script src="jquery-1.8.8.js" type="text/javascript"></script>

<script src="ueditor/ueditor.config.js" type="text/javascript"></script>

<script src="ueditor/ueditor.all.min.js" type="text/javascript"></script>

<script type="text/javascript">

$(function () {

setUeditor();

});

//初始化编辑器

function setUeditor() {

// var ue = UE.getEditor(‘UeditorTest‘); //参数为放置文本编辑器的id属性；

//【也可定制菜单。】

var ue = UE.getEditor(‘UeditorTest‘, {

toolbars: [

[‘fullscreen‘, ‘source‘, ‘undo‘, ‘redo‘, ‘bold‘, ‘simpleupload‘, ‘insertimage‘]

],

autoHeightEnabled: true,

autoFloatEnabled: true

});

/*

可定制属性如下，

‘anchor‘, //锚点

‘undo‘, //撤销

‘redo‘, //重做

‘bold‘, //加粗

‘indent‘, //首行缩进

‘snapscreen‘, //截图

‘italic‘, //斜体

‘underline‘, //下划线

‘strikethrough‘, //删除线

‘subscript‘, //下标

‘fontborder‘, //字符边框

‘superscript‘, //上标

‘formatmatch‘, //格式刷

‘source‘, //源代码

‘blockquote‘, //引用

‘pasteplain‘, //纯文本粘贴模式

‘selectall‘, //全选

‘print‘, //打印

‘preview‘, //预览

‘horizontal‘, //分隔线

‘removeformat‘, //清除格式

‘time‘, //时间

‘date‘, //日期

‘unlink‘, //取消链接

‘insertrow‘, //前插入行

‘insertcol‘, //前插入列

‘mergeright‘, //右合并单元格

‘mergedown‘, //下合并单元格

‘deleterow‘, //删除行

‘deletecol‘, //删除列

‘splittorows‘, //拆分成行

‘splittocols‘, //拆分成列

‘splittocells‘, //完全拆分单元格

‘deletecaption‘, //删除表格标题

‘inserttitle‘, //插入标题

‘mergecells‘, //合并多个单元格

‘deletetable‘, //删除表格

‘cleardoc‘, //清空文档

‘insertparagraphbeforetable‘, //"表格前插入行"

‘insertcode‘, //代码语言

‘fontfamily‘, //字体

‘fontsize‘, //字号

‘paragraph‘, //段落格式

‘simpleupload‘, //单图上传

‘insertimage‘, //多图上传

‘edittable‘, //表格属性

‘edittd‘, //单元格属性

‘link‘, //超链接

‘emotion‘, //表情

‘spechars‘, //特殊字符

‘searchreplace‘, //查询替换

‘map‘, //Baidu地图

‘gmap‘, //Google地图

‘insertvideo‘, //视频

‘help‘, //帮助

‘justifyleft‘, //居左对齐

‘justifyright‘, //居右对齐

‘justifycenter‘, //居中对齐

‘justifyjustify‘, //两端对齐

‘forecolor‘, //字体颜色

‘backcolor‘, //背景色

‘insertorderedlist‘, //有序列表

‘insertunorderedlist‘, //无序列表

‘fullscreen‘, //全屏

‘directionalityltr‘, //从左向右输入

‘directionalityrtl‘, //从右向左输入

‘rowspacingtop‘, //段前距

‘rowspacingbottom‘, //段后距

‘pagebreak‘, //分页

‘insertframe‘, //插入Iframe

‘imagenone‘, //默认

‘imageleft‘, //左浮动

‘imageright‘, //右浮动

‘attachment‘, //附件

‘imagecenter‘, //居中

‘wordimage‘, //图片转存

‘lineheight‘, //行间距

‘edittip ‘, //编辑提示

‘customstyle‘, //自定义标题

‘autotypeset‘, //自动排版

‘webapp‘, //百度应用

‘touppercase‘, //字母大写

‘tolowercase‘, //字母小写

‘background‘, //背景

‘template‘, //模板

‘scrawl‘, //涂鸦

‘music‘, //音乐

‘inserttable‘, //插入表格

‘drafts‘, // 从草稿箱加载

‘charts‘, // 图表

*/

} //初始化end

function getContent() {

// alert(UE.getEditor(‘UeditorTest‘).getContent());

//+ UE.getEditor(‘UeditorTest‘).getContent()

var data = UE.getEditor(‘UeditorTest‘).getContent();

// alert(data);

data = data.replace(/%/g, "%25");

data = data.replace(/\&/g, "%26");

data = data.replace(/\+/g, "%2B");

$.ajax({

url: "/Handler1.ashx",

async: "false",

data: "data=" + data,

type: "post",

success: function (data) {

if (data == "ok") {

window.location.href = "/Default.aspx";

}

});

}

</script>

</head>

<body>

<form id="form1" runat="server">

<div>

<div style="margin-left: auto; margin-right: auto; width: 700px;">

<input type="button" value="发表" onclick="getContent()" />

</div>

<div id="UeditorTest" style="margin: 0 auto; width: 700px; height: 500px;">

</div>

</div>

</form>

</body>

</html>

百度富文本编辑器

标签：toolbar ott location dtd pos val 解压 sea bre

原文地址：http://www.cnblogs.com/artjs/p/6259205.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行

百度富文本编辑器

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title></title>

<script type="text/javascript">

/*这里要为根目录下的路径到引用资源的路径*/

window.UEDITOR_HOME_URL = "/ueditor/";

</script>

<script src="jquery-1.8.8.js" type="text/javascript"></script>

<script src="ueditor/ueditor.config.js" type="text/javascript"></script>

<script src="ueditor/ueditor.all.min.js" type="text/javascript"></script>

<script type="text/javascript">

$(function () {

setUeditor();

});

//初始化编辑器

function setUeditor() {

// var ue = UE.getEditor(‘UeditorTest‘); //参数为 放置文本编辑器的id属性；

//【也可定制菜单。】

var ue = UE.getEditor(‘UeditorTest‘, {

toolbars: [

[‘fullscreen‘, ‘source‘, ‘undo‘, ‘redo‘, ‘bold‘,‘simpleupload‘,‘insertimage‘]

],

autoHeightEnabled: true,

autoFloatEnabled: true

});

/*

可定制属性如下，

‘anchor‘, //锚点

‘undo‘, //撤销

‘redo‘, //重做

‘bold‘, //加粗

‘indent‘, //首行缩进

‘snapscreen‘, //截图

‘italic‘, //斜体

‘underline‘, //下划线

‘strikethrough‘, //删除线

‘subscript‘, //下标

‘fontborder‘, //字符边框

‘superscript‘, //上标

‘formatmatch‘, //格式刷

‘source‘, //源代码

‘blockquote‘, //引用

‘pasteplain‘, //纯文本粘贴模式

‘selectall‘, //全选

‘print‘, //打印

‘preview‘, //预览

‘horizontal‘, //分隔线

‘removeformat‘, //清除格式

‘time‘, //时间

‘date‘, //日期

‘unlink‘, //取消链接

‘insertrow‘, //前插入行

‘insertcol‘, //前插入列

‘mergeright‘, //右合并单元格

‘mergedown‘, //下合并单元格

‘deleterow‘, //删除行

‘deletecol‘, //删除列

‘splittorows‘, //拆分成行

‘splittocols‘, //拆分成列

‘splittocells‘, //完全拆分单元格

‘deletecaption‘, //删除表格标题

‘inserttitle‘, //插入标题

‘mergecells‘, //合并多个单元格

‘deletetable‘, //删除表格

‘cleardoc‘, //清空文档

‘insertparagraphbeforetable‘, //"表格前插入行"

‘insertcode‘, //代码语言

‘fontfamily‘, //字体

‘fontsize‘, //字号

‘paragraph‘, //段落格式

‘simpleupload‘, //单图上传

‘insertimage‘, //多图上传

‘edittable‘, //表格属性

‘edittd‘, //单元格属性

‘link‘, //超链接

‘emotion‘, //表情

‘spechars‘, //特殊字符

/这里要为根目录下的路径到引用资源的路径/

// var ue = UE.getEditor(‘UeditorTest‘); //参数为放置文本编辑器的id属性；