轻量级web富文本框——wangEditor使用手册(3)——如何自定义配置菜单

1. 引言

上一节《轻量级web富文本框——wangEditor使用手册(2)——扩展一个“缩进”功能》最后提到,新建的菜单不能只是默认放在菜单的后面,应该可以自定义的放在当前菜单栏中的任何位置。这一节就讲述wangEditor目前支持的几种自定义配置菜单的使用。

下载地址:https://github.com/wangfupeng1988/wangEditor

demo演示:http://www.cnblogs.com/wangfupeng1988/p/4185508.html

交流QQ群:164999061

wangEditor支持的菜单配置有以下几种形式,下面挨个解说

  1. 强制自定义;
  2. 自定义隐藏某些菜单;
  3. 在已知菜单前面插入若干个菜单;
  4. 在已知菜单后面追加若干个菜单;

2. 强制自定义 & 自定义隐藏

这两种情况在第一节《轻量级web富文本框——wangEditor使用手册(1)——基本应用》中的【4. 自定义菜单配置】已经详细描述过,忘记的朋友可以再去查看。

这两种情况之所以放在第一节说,是因为他们都是最基本的应用。即,如果不需要自定义插入菜单,只对当前默认的菜单进行操作的话,这两种就够了。

3. 在已知菜单前面插入若干个菜单

3.1 引用上一节的代码

首先,我们需要引用上一节的代码(代码过多,只截取javascript部分的),在此不多说。没看过上一节的朋友,可以先去看看。

这样直接运行,得到的结果大家已经知道了——两个新添加的按钮都默认追加到了菜单栏的最后。

但是我们现在想要把这两个按钮放在某个按钮之前,例如放在“左对齐”按钮之前,应该怎么办呢?

3.2 找到“左对齐”按钮的id

我们在看《轻量级web富文本框——wangEditor使用手册(1)——基本应用:【4. 自定义菜单配置】》时候,已经知道了当前wangEditor默认的所有菜单的id,这里再截图看一遍:

这里我们我们知道了,“左对齐”按钮的id是“justifyLeft”(从id的名字和运行后菜单栏的排列就能看出来)

3.3 在“左对齐”按钮之前插入(情况1)

直接上代码:

如上所示,要想把新建的两个按钮——“indent”、“outdent”、外加一个“|”,插入到“justifyLeft”之前——很简单,代码写出来都不用加注释。运行的效果也截图出来了。

3.4 在“左对齐”按钮之前插入(情况2)

以上是将多个按钮作为数组一步插入搞定的情况,有些情况是每次只插入一个按钮,用不着数组——咱们可以用字符串!

如上图。我只将“indent”按钮插入到“justifyLeft”按钮之前,“outdent”按钮没做处理。这样的话,“indent”按钮就会乖乖的插入到“justifyLeft”之前,而“outdent”却还很本分的追加到自定义菜单后面。还是很听话的。还有:

如上图,分别将两个按钮插入到两个不同的按钮前面,也是可以的。

3.5 总结

以上两种情况主要是想表达,“在已知按钮前面插入若干个按钮”这个功能比较灵活。既可以插入单个menuId,又可以插入多个(数组形式)。而且,一次性可以处理多个插入。

4. 在已知菜单后面追加若干个菜单

“后面追加菜单”和“前面插入菜单”,其实是一个道理的,实现过程也是相同的。只不过处理命令由“insertBefore”改为了“after”。下面是两个主要应用的截图:

5. 总结

本文用简单的一段文字,介绍了如何在使用wangEditor时自定义菜单配置,一共有四种情况:

  1. 强制自定义;
  2. 自定义隐藏某些菜单;
  3. 在已知菜单前面插入若干个菜单;
  4. 在已知菜单后面追加若干个菜单;

通过这四种情况,应该能满足大部分人对于菜单配置的需求。如果有其他好的想法,尽管可以通过QQ群给我反馈。

本文使用的代码可以从下载内容的【demo_menuConfig.html中查看】

接下来,我将演示一个稍微复杂一些的按钮(插入代码)如何配置。

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

下载地址:https://github.com/wangfupeng1988/wangEditor

demo演示地址:http://www.cnblogs.com/wangfupeng1988/p/4185508.html

交流QQ群:164999061

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

欢迎关注我的微博

也欢迎关注我的教程:

从设计到模式深入理解javascript原型和闭包系列》《微软petshop4.0源码解读视频》《json2.js源码解读视频

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

时间: 2024-10-22 07:22:13

轻量级web富文本框——wangEditor使用手册(3)——如何自定义配置菜单的相关文章

轻量级web富文本框——wangEditor使用手册(4)——配置下拉菜单

1. 引言 上一节(第三节)<轻量级web富文本框——wangEditor使用手册(3)——如何自定义配置菜单>描述了如何自定义配置一个新加入的菜单.在第二节中我们演示了如何添加一个简单的菜单,这一节我们要加入一个稍微复杂一点的菜单——下拉菜单类型——增加一个“设置标题”下拉按钮 下载地址:https://github.com/wangfupeng1988/wangEditor demo演示:http://www.cnblogs.com/wangfupeng1988/p/4185508.htm

轻量级web富文本框——wangEditor使用手册(6)——配置“上传图片”功能

1. 引言 上一节讲解了在wangEditor中"插入代码"的功能,用到了弹出框.这一节的"上传图片"也得用弹出框.弹出框菜单如何配置,在上一节已经讲过,此处将不再重复描述,只讲上传图片的重点内容. 其实,真正的上传图片的功能,不是我自己做的,而是借用了一个很强大的上传插件--uploadify--好多朋友应该知道这个东西.那么我们就来看看,如何把uploadify这个强大的工具,整合到wangEditor中来. 下载地址:https://github.com/wa

轻量级web富文本框——wangEditor使用手册(5)——配置“插入代码”功能

1. 引言 如果一直在看这一系列文章的朋友,应该知道wangEditor的菜单分为三种类型:基本.下拉菜单.弹出框:上一节我们通过一个"设置标题"的例子讲解了wangEditor如何配置一个下拉菜单按钮,这一节我们用一个非常炫酷的功能--插入代码--看看弹出框类型的菜单如何配置. Are you ready? 下载地址:https://github.com/wangfupeng1988/wangEditor demo演示 & 全部配置说明:http://www.cnblogs.

轻量级web富文本框——wangEditor使用手册(2)——扩展一个“缩进”功能

1. 引言 上一节<轻量级web富文本框——wangEditor使用手册(1)——基本应用>中我们讲解了如何应用wangEditor创建最基本的富文本编辑器,本节继续讲如何扩展一个简单的按钮.本节是继续上一节的内容来的,所使用的代码也是接着上一节的来的,错过的朋友请先看上一节,再看本节. 下载地址:https://github.com/wangfupeng1988/wangEditor demo演示:http://www.cnblogs.com/wangfupeng1988/p/4185508

轻量级web富文本框——wangEditor使用手册(1)——基本应用

1. 介绍&下载 wangEditor是用javascript编写的轻量级web富文本编辑器,依赖于jQuery和fontAwesome字体库,支持所有浏览器.使用wangEditor可以轻松创建web富文本框,并可以自定义扩展菜单功能.wangEditor所有源码都已经在github上开源下载. 下载地址:https://github.com/wangfupeng1988/wangEditor 交流QQ群:164999061 2. 生成富文本框 2.1 下载 从https://github.c

轻量级web富文本框——wangEditor——demo演示

wangEditor——轻量级web富文本编辑器——简单易用可扩展,支持所有PC浏览器.代码目前全部在github上开源. 下载地址:https://github.com/wangfupeng1988/wangEditor  (页面中有基本的使用说明) 交流QQ群:164999061 wangEditor demo 欢迎使用wangEditor,当前版本为v1.1.0 请输入内容... 查看html 查看text 隐藏 说明: 点击[查看html]按钮,可查看你编辑的内容的html代码: 点击[

wangEditor——轻量级web富文本框

1. 介绍 wangEditor--轻量级web富文本编辑器,js+css 不足20kb.简单.易用.可扩展,支持所有PC浏览器(包括IE6). 目前所有代码都在github上开源,下载地址:https://github.com/wangfupeng1988/wangEditor 2. demo demo演示地址:http://www.cnblogs.com/wangfupeng1988/p/4198428.html#demo 3. 文档 3.1 基本应用(demo演示) 3.2 扩展一个"缩进

基于bootstrap的富文本框——wangEditor【欢迎加入开发】

先来一张效果图: 01. 引言 老早就开始研究富文本框的东西,在写完<深入理解javascript原型与闭包>之后,就想着要去做一个富文本框的插件的例子. 现在网络上开源的富文本框插件非常多,一搜索一大堆,但是基于bootstrap的还不多,现在只有一个“bootstrap-wysiwyg”,老外写的,没有一个汉字,大家可以fork一下源码看看,写的非常简洁,压缩之后不到10KB,非常厉害!我也还没来得及研究,一定要看一下. 02. wangEditor 老外的东西,满地英文,给程序猿用着还可

基于bootstrap的富文本框——wangEditor【欢迎增加开发】

先来一张效果图: 01. 引言 老早就開始研究富文本框的东西,在写完<深入理解javascript原型与闭包>之后,就想着要去做一个富文本框的插件的样例. 如今网络上开源的富文本框插件许多,一搜索一大堆,可是基于bootstrap的还不多.如今仅仅有一个"bootstrap-wysiwyg".老外写的,没有一个汉字.大家能够fork一下源代码看看,写的很简洁.压缩之后不到10KB.很厉害!我也还没来得及研究,一定要看一下. 02. wangEditor 老外的东西,满地英文