如何在.Net版本UEditor中添加一个普通按钮

第一步:找到ueditor.config.js文件中的toolbars数组,增加一个“hougelou”字符串,然后找到labelMap数组,对应着添加一个labelMap,用于鼠标移上按钮时的提示。

代码如下:

//工具栏上的所有的功能按钮和下拉框,可以在new编辑器的实例时选择自己需要的从新定义
        , toolbars:[
            ['fullscreen', 'source', '|', 'undo', 'redo', '|',
                'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'hougelou', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|',
                'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',
                'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|',
                'directionalityltr', 'directionalityrtl', 'indent', '|',
                'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'touppercase', 'tolowercase', '|',
                'link', 'unlink', 'anchor', '|', 'imagenone', 'imageleft', 'imageright', 'imagecenter', '|',
                'insertimage', 'emotion', 'scrawl', 'insertvideo', 'music', 'attachment', 'map', 'gmap', 'insertframe','insertcode', 'webapp', 'pagebreak', 'template', 'background', '|',
                'horizontal', 'date', 'time', 'spechars', 'snapscreen', 'wordimage', '|',
                'inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', 'mergecells', 'mergeright', 'mergedown', 'splittocells', 'splittorows', 'splittocols', '|',
                'print', 'preview', 'searchreplace', 'help']
        ]
        //当鼠标放在工具栏上时显示的tooltip提示,留空支持自动多语言配置,否则以配置值为准
        ,labelMap:{
        'hougelou': 'hello,后阁楼'
        }

第二步:找到你所引用的ueditor.all.js文件中的btnCmds数组,在其中同样增加一个“hougelou”字符串。

第三步:清空缓存刷新下页面吧!工具栏的对应位置是否出现了一个自己定义的按钮呢?如下图所示:

由于此时未设置对应按钮的图片样式,所以会显示默认的“B”字符。要想让其显示成自己需要的图标样式,接着按照下面的步骤动手吧。

第四步:找到themes/default/css/ueditor.css文件,增加一条样式定义:

代码如下:

.edui-for-hougelou .edui-icon {
    background-position: -700px -40px;
}

此处的样式定义了showmsg图标在UEditor默认的精灵Icon图片(themes/default/images/icons.png)中的位置偏移。如需更改成另外图标,只需添加图标到该图片文件中,然后设置偏移值即可。

第五步:到此为止,在UI层面已经完成了一个工具栏图标的显示和各种状态变化的逻辑,但是我们发现点击按钮之后毫无反应。那是必然的,我们还必须为该按钮绑定属于它自己的事件处理方法。

实质上,此时一个默认的事件处理方法已经被UEditor绑定到按钮上了,只不过由于我们还没有定义该方法的具体内容,所以点击之后无任何变化。

下面我们就来定义该方法的具体内容:

在初始化编辑器的时候,加上自己的事件处理(插入一张图片),如下代码:

代码如下:

ueditor = UE.getEditor('txtContent', {
            "initialFrameHeight": "200",
            toolbars: [['fullscreen', 'source', 'hougelou', 'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|', 'rowspacingtop', 'rowspacingbottom', 'lineheight', '|', 'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|', 'indent', '|', 'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'touppercase', 'tolowercase', '|', 'link', 'unlink', 'anchor', '|', 'imagenone', 'imageleft', 'imageright', 'imagecenter', '|', 'insertimage', 'emotion', 'insertvideo', 'music', 'insertcode', 'background', '|', 'horizontal', 'date', 'time', 'spechars', '|', 'inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', 'mergecells', 'mergeright', 'mergedown', 'splittocells', 'splittorows', 'splittocols', '|', 'preview', 'searchreplace', 'help']],
            enterTag: " "
        }); //回车的时候用换行不用段落标签
        //实现插件的功能代码
        baidu.editor.commands['hougelou'] = { execCommand: function() { this.execCommand('insertHtml', "<img src='http://www.xxx.com/images/logo.png' />"); return true; }, queryCommandState: function() { } };

End

-------------------------------------------------------------------------------

在images.ashx里发现百度编辑器返回图片路径是用分隔符“ue_separate_ue”连起来的。

(0)

相关推荐

  • ASP.NET中集成百度编辑器UEditor

    0.ueditor简介 UEditor是由百度WEB前端研发部开发的所见即所得的开源富文本编辑器,具有轻量.可定制.用户体验优秀等特点.开源基于BSD协议,所有源代码在协议允许范围内可自由修改和使用. UEditor官网:http://ueditor.baidu.com/website/index.html UEditor官方文档地址: http://fex.baidu.com/ueditor/ 1.将ueditor包导入项目 将从官网上下载的开发包解压后包含到项目中 (注:最新的代码需要时基于

  • ueditor编辑器不能上传图片问题的解决方法

    ueditor是百度编辑器,在本地的iis环境是可以上传图片了,但放在服务器的iis环境无法上传图片了,经过搜索发现是iis设置问题,引起这个问题的主要原因是,大多数虚拟主机不会给IIS匿名账号访问磁盘上的非用户目录,连读取的权限都没有,既然我们不能解决iis问题只有从代码设置了,具体如下. 在上传不了图片时,可以用浏览器的自带的调试工具查看报错,你可以看一个"拒绝访问或文件已存在"的错误.仔细调试分析,终于找到问题所在. 在它的upload.class.asp中,有如下一个函数: P

  • ASP.NET百度Ueditor编辑器实现上传图片添加水印效果

    前言 最近工作中遇到一个需求,是要实现asp.net百度ueditor图片上传添加水印的功能,通过查找相关的资料终于实现了,下面来给大家分享下实现的效果,文末给出了实例代码,大家可以参考学习,下面来一起学习学习吧. 效果图 首先来看下我们想要的功能界面,如果发觉这种效果不是你想要的,后面的内容就不用看了. 准备  从官网下载的Ueditor压缩包,我下载的是ueditor1_4_3-utf8-net 这个版本,下面的介绍是对这个版本而言的. 修改界面 先找到我们要添加"加水印[checkbox]

  • .NET下为百度文本编辑器UEditor增加图片删除功能示例

    百度的这个编辑器,的确挺好,但也有些,让人不如意的,如每次更新,本来有功能给搞没了,旧版本的代码又不能直接拿过来组合用,对用户来很是不爽.今天下载了目前最新版1.2.5为版本看更新记录,主要是对表格做个修改,我下载用上,我靠,上传图片的删除功能给取消了.把旧版本的删除代码拿过来,不好使,还得我慢慢研究,闹心啊,闹心,折磨我半天. 1.首先修改服务器端ueditor\net下的文件imageManager.ashx,增加图片删除的处理.如下代码的Add部分所示: 复制代码 代码如下: <%@ We

  • 关于UEditor编辑器远程图片上传失败的解决办法

    远程图片上传是个很有意思的东西,比如你从别的网站复制一段文件,如果文字中带有图片,编辑器会自动将图片提取出来,进行上传,从而不用担心远程图片失效后,自己本地也无法浏览. 通过检查,发现远程图片上传的操作页面是:getRemoteImage.php .打开后我们先配置 savePath ,因为不同用户使用,需要存放到不同的目录,以免混乱,也方便管理 修改后代码: 复制代码 代码如下: //远程抓取图片配置 if(isset($_SESSION['admin'])){ $myPath = 'http

  • 利用ASP.NET MVC+Bootstrap搭建个人博客之修复UEditor编辑时Bug(四)

    我的个人博客站在使用百度富文本编辑器UEditor修改文章时,遇到了一些问题,(不知是bug,还是我没有配置好).但总算找到了解决方法,在此记录下来. 小站首页文章列表显示为(显示去除HTML标签后的前600个字符): 具体在www.zynblog.com 遇到的问题: 正常来讲,进入文章修改页,只需将UEditor对应的textarea的value设置为文章Content就行了: $('#editor').val('@Html.Raw(this.Model.Contents)'); 最开始我就

  • 一步步教你在Asp.net Mvc中使用UEditor编辑器

    最近在配置.net mvc4项目使用ueditor编辑器,在配置过程中遇见了好几个问题,以此来记录解决办法. 首先去这里下载 然后重名一下下载的文件夹为ueditor(想自己起名字也可以,不过配置文件就要改成一样的了,这里为了避免麻烦,就跟配置文件里的名字保持一致了) 然后根据自己需要放到项目中,我是这么放的 上面建的文件夹也是跟配置文件保持一致,并不是非要照着这么做,这里只是跟配置文件保持一致,可以根据自己需要修改配置文件,自己想怎么建都行,看看配置文件就明白了 config.json /*

  • .NET UEditor使用方法说明

    在页面引用 复制代码 代码如下: <script src="Ueditor/editor_all.js" type="text/javascript"></script><script src="Ueditor/editor_config.js" type="text/javascript"></script><link href="Ueditor/themes/

  • UEditor编辑器自定义上传图片或文件路径的修改方法

    使用ueditor编辑器,附件默认在ueditor/php/upload/,  我的附件地址是网站根目录下/data/upload/ ,需要修改ueditor如下: 第一步:打开php/config.php修改图片目录 复制代码 代码如下: return array( //图片目录    'imageSavePath' => array (        '../../../../data/upload'    ) ); 第二步:图片上传后去掉相对路径php/imageUp.php 复制代码 代

  • 如何在.Net版本UEditor中添加一个普通按钮

    第一步:找到ueditor.config.js文件中的toolbars数组,增加一个"hougelou"字符串,然后找到labelMap数组,对应着添加一个labelMap,用于鼠标移上按钮时的提示. 复制代码 代码如下: //工具栏上的所有的功能按钮和下拉框,可以在new编辑器的实例时选择自己需要的从新定义         , toolbars:[             ['fullscreen', 'source', '|', 'undo', 'redo', '|',      

  • pycharm实现在子类中添加一个父类没有的属性

    我就废话不多说了,还是直接看代码吧! class Car(): """一次模拟汽车的简单尝试""" def __init__(self, make, model, year): """初始化描述汽车的属性""" self.make = make self.model = model self.year = year self.odometer_reading = 0 def get_de

  • 微信小程序中添加客服按钮contact-button功能

    小程序的客服系统,是微信做的非常成功的一个功能,开发者可以很方便的通过一行代码,就可实现客服功能. 1. 普通客服按钮添加 <button open-type='contact' session-from=''>客服-联系我们</button> 2. 悬浮客服按钮添加,图片自定义 大家看地图的有个客服图片图片资源.大家去iconfont 网站去找一个就可以了 index.wxml <button class="kf_button" open-type=&q

  • 浅谈如何在ASP.NET Core中实现一个基础的身份认证

    ASP.NET终于可以跨平台了,但是不是我们常用的ASP.NET, 而是叫一个ASP.NET Core的新平台,他可以跨Windows, Linux, OS X等平台来部署你的web应用程序,你可以理解为,这个框架就是ASP.NET的下一个版本,相对于传统ASP.NET程序,它还是有一些不同的地方的,比如很多类库在这两个平台之间是不通用的. 今天首先我们在ASP.NET Core中来实现一个基础的身份认证,既登陆功能. 前期准备: 1.推荐使用 VS 2015 Update3 作为你的IDE,下

  • Mysql如何在select查询时追加(添加)一个字段并指定值

    目录 在select查询时追加(添加)一个字段并指定值 使用select查询时,在查询结果中增加一个字段并指定固定值 在select查询时追加(添加)一个字段并指定值 在特定时候,在 mysql 的查询结果中我们需要追加一个字段来实现某些特定的功能,这时我们可以用到以下语法来实现 值 as 字段 比如我们需要给这个查询结果追加一个 xx 字段并赋值为 null ,可以这样实现 select *, null as xx from topic; 使用select查询时,在查询结果中增加一个字段并指定

  • centos 7中添加一个新用户并授权的步骤详解

    前言 最近在笔记本装了一个centos,想要让别人也可以登录访问,用自己的账号确实不太好,于是准备新建一个用户给他.发现网站这方便的资料比较少,所以将自己实现的步骤总结分享出来,话不多说了,来一起看看详细的介绍: 创建新用户 创建一个用户名为:zhangbiao [root@localhost ~]# adduser zhangbiao 为这个用户初始化密码,linux会判断密码复杂度,不过可以强行忽略: [root@localhost ~]# passwd zhangbiao 更改用户 zha

  • 如何在Vue项目中添加接口监听遮罩

    一.业务背景 使用遮罩层来屏蔽用户的非正常操作,是前端经常使用的方式.但是在一些项目中,并没有对遮罩层进行统一管理,这就会造成如下的问题: (1)所有的业务组件都要引入遮罩层组件,也就是每个.vue业务组件,都在template中引入了Mask组件.组件在项目的各个角落都存在,不利于管理,代码极度冗余. (2)Mask组件都分散到业务的各个角落,所以控制是否显示遮罩层的变量也散在业务组件中.比如使用maskShow来控制是否展示遮罩层时,一个较为复杂的项目中会产生200+的maskShow变量.

  • 谈谈如何在ASP.NET Core中实现CORS跨域

    CORS(Cross-origin resource sharing)是一个W3C标准,翻译过来就是 "跨域资源共享",它主要是解决Ajax跨域限制的问题. CORS需要浏览器和服务器支持,现在所有现代浏览器都支持这一特性.注:IE10及以上 只要浏览器支持,其实CORS所有的配置都是在服务端进行的,而前端的操作浏览器会自动完成. 在本例中,将演示如何再ASP.NET Core中实现CORS跨域. 前期准备 你需要windows系统. 你需要安装IIS. 推荐使用VS2015 Upda

  • Swift在控件中添加点击手势的方法

    今天有同行问我,如何在tableview的headerview中添加点击方法,今天就来简简单单说明一下,在swift中添加点击手势的方法是: 复制代码 代码如下: imagepath.addGestureRecognizer(UITapGestureRecognizer(target: self, action: "imagePathClick:")) 怎么样,看上去是不是比oc简单多了呢,简单解释一下,imagePath是我定义的一个UIImageView,可能有人添加了这个手势之后

  • 详解如何在ASP.NET Core中应用Entity Framework

    首先为大家提醒一点,.NET Core和经典.NET Framework的Library是不通用的,包括Entity Framework! 哪怎么办? 别急,微软为.NET Core发布了.NET Core版本的Entity Framework,具体配置方法与经典.NET Framework版本的稍有区别,下面的内容就为带领大家在ASP.NET Core中应用Entity Framework DB first. 注:目前部分工具处于Preview版本,正式版本可能会稍有区别. 前期准备: 1.推

随机推荐