百度富文本编辑器

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了百度富文本编辑器相关的知识，希望对你有一定的参考价值。

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

 

   <!--【config必须放在all的前面，否则无效】 -->

    <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;">

   <!-- 【点击发表，可用getContent方法获取内容，之后传递到后台，存到数据库。具体常用方法，下载的domo的index.html有例子，也可以看百度编辑器首页文档】-->

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

    </div>

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

    </div>

 

       <!-- 【如果这样，上传功能就有了。之后可以去  net文件夹下面的  config.json配置，上传文件存放的位置。此json文件有详细备注说明，一试便会】-->

</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>

 

   <!--【config必须放在all的前面，否则无效】 -->

    <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;">

   <!-- 【点击发表，可用getContent方法获取内容，之后传递到后台，存到数据库。具体常用方法，下载的domo的index.html有例子，也可以看百度编辑器首页文档】-->

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

    </div>

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

    </div>

 

       <!-- 【如果这样，上传功能就有了。之后可以去  net文件夹下面的  config.json配置，上传文件存放的位置。此json文件有详细备注说明，一试便会】-->

</div>

    </form>

</body>

</html>

 

 

以上是关于百度富文本编辑器的主要内容，如果未能解决你的问题，请参考以下文章

百度富文本编辑器

哪个富文本编辑器好一些

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

django之百度Ueditor富文本编辑器后台集成

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

百度UMeditor富文本编辑器java使用