正文

百度富文本编辑器

author  author  2022-08-20  172

关键词：

【下载所需资源】---------------------------------------
百度搜索—— 百度富文本编辑器——进入首页（百度编辑器-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>

百度富文本编辑器的使用(代码片段)

百度富文本编辑器的使用(2016年版本)对于大文章的网上编辑，你的输入编辑框肯定不够用，现在看看功能强大的富文本编辑框吧1.ueditor官方地址：http://ueditor.baidu.com/website/index.html 开发文档地址： http://ueditor.b... 查看详情

百度富文本编辑器通过表单提交数据！php中获取不到富文本编辑器中的内容！有没有啥好的培训机构

百度富文本编辑器通过表单提交数据！php中获取不到富文本编辑器中的内容！有没有什么好的培训机构百度富文本编辑器通过表单提交数据！php中获取不到富文本编辑器中的内容！求大神指教！参考技术A来后盾网吧，后盾网那... 查看详情

百度富文本ueditor编辑器的使用(代码片段)

...其是在网站开发后台管理系统的时候经常会使用到富文本编辑器，这里我们来使用百度提供的富文本编辑器UEditor，以提高我们的开发效率UEditor官网下载地址：https://ueditor.baidu.com/website/download.html 这里我下载的是jsp版本中的UT... 查看详情

百度富文本赋值

$(function(){　　varcontent=$(‘#daily_content‘).val();　　//判断ueditor编辑器是否创建成功　　ue.addListener("ready",function(){　　　　//editor准备好之后才可以使用　　　　ue.setContent(content);　　});}); 查看详情

使用百度富文本编辑器

插件下载地址：http://ueditor.baidu.com/website/download.html具体引用：把下载的文件完全的额引入到你的项目中，然后编辑页面内容：<scriptid="container"style="height:700px"type="text/plain"> &nbs 查看详情

百度富文本编辑器ueditor自定义上传图片接口

如下图：然后修改ueditor.all.js 查看详情

百度富文本编辑器支持从word复制粘贴保留格式和图片的插件

...息时，希望能很快的将word里面的内容直接粘贴到富文本编辑器里面，然后发布出来。减少排版复杂的工作量。下面是借用百度doc来快速实现这个word粘贴到富文本编辑器里面方法一：工具/原料百度doc任意富文本编辑器，以UEDdito... 查看详情

vue集成百度富文本编辑器

<template><div><textareastyle="display:none"id="editor_content"name="contentHtml"></textarea><scriptid="editor"type="text/plain"></script></div></template& 查看详情

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

ueditor配置文件ueditor.config.js修改参数serverUrl：（改为要调用的controller）后台添加该路由指定的controllerpackagecom.sandu.mega.admin.ueditor;importcom.jfinal.aop.Clear;importcom.jfinal.core.Controller;importcom.jfinal.kit.Ret 查看详情

关于百度富文本编辑器uedit的初始化内容失败问题

百度富文本编辑器毫无疑问是强大的，但也会出问题。这个问题是在脚本中普遍存在的，由异步性导致的加载顺序问题。我们使用varue=UE.getEditor(‘editor‘,{});创建实例。并使用ue.setContent("HellloWorld!");初始化内容。但是有时候初始... 查看详情

使用百度umeditor富文本编辑器，修改自定义图片上传，修改源码

富文本编辑器，不多说了，这个大家应该都用到过，至于用到的什么版本，那就分很多种CKEditor：很早以前叫FCK，那个时候也用过，现在改名了，比较流行的一个插件，国外很多公司在用UEDITOR：百度开发的插件，lite版是UMEasyUI编... 查看详情

tp5-百度富文本编辑器

....config.js　　　　ueditor.all.min.js　　　　lang/zh-cn/zh-cn.js4、编辑器显示处加 id="content"3、底部　　<scripttype="text/javascript 查看详情

百度富文本编辑器ueditor

前言　　配置.netmvc4项目使用ueditor编辑器，在配置过程中遇见了好几个问题，以此来记录解决办法。编辑器可以到http://ueditor.baidu.com/website/download.html#ueditor处下载.net的开发包，如下图，我下载的是1.2.6.1net版本的开发包。配置：1... 查看详情

umeditor百度富文本编辑器的使用

批量上传的图片在线管理没法查看图片是因为jar包本身的Bug,这里暂时做了个替换展示。就是找到Img.js 然后搜索img.set替换下就好了 &nbs 查看详情

springboot整合百度ueditor富文本

...供的demo和js导入项目中　2.编写html 这步创建好了编辑器然后我们会发现图片不能上传出现这个问题之后我们去config.j 查看详情

百度富文本编辑器ueditor添加到pom(代码片段)

.../lib/ueditor-1.1.2.jar</systemPath></dependency>由于富文本编辑器的地址相对性，我们发布项目的时候不能将ueditor的jar包放在私服中，会提示找不到该路径。所以，将该jar包放在项目中。查看详情

哪个富文本编辑器好一些

　　可以试试这个wangEditor-轻量级web富文本编辑器　　生成表格还是会有一些样式，不过比百度的要少一些。　　以下是官方介绍：　　与国产编辑器百度ueditor和kindeditor相比，它轻量、易用、UI设计精致漂亮。　　与国外编辑器... 查看详情

原关于百度富文本编辑器的使用心得

...的数据库中添加新字段，修改后台代码用创建更多ueditor编辑器的新实例（一个字段对应一个实例）。编辑时从数据库中取出数据到ueditor编辑器中这里要说的就是我在从数据库中取出内容到编辑器中踩过的坑 1.实例名.getContent... 查看详情

正文

百度富文本编辑器

<!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‘, //表情

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

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