WordPress自带TinyMCE编辑器相关功能增强
WordPress 默认的那个编辑器叫做TinyMCE。TinyMCE是一个轻量级的基于浏览器的所见即所得编辑器,由JavaScript写成。它对IE6+和Firefox1.5+都有着非常良好的支持。功能方面虽然不能称得上是最强,但绝对能够满足大部分网站的需求,并且功能配置灵活简单。 因为其功能相对简单,所以很多人都想着用给它扩展一下,那就扩展一下吧~
更改编辑器默认视图为HTML/文本
WordPress默认的是,在后台新建文章后,编辑器就自动跳转到“可视化”视图,对于一些经常要插入代码或者WEB设计者们来说,可能更习惯使用HTML视图手动编辑。
设置方法:将以下代码添加到主题的functions.php文件里即可:
add_filter('wp_default_editor', create_function('', 'return "html";')); |
---|
添加编辑器默认内容(编辑器内可见)
新建文章后编辑器里的内容默认是空的,有些朋友做的是WordPress主题站、插件站或单纯的下载站,一些标准的格式化的文章每次都会输入“主题名称”、“主题作者”、“下载地址”等内容,添加默认内容之后,这些重复性的工作以后再也不用了,一切都预定义好了。而且如果发表文章不需要这些预定义的内容,只需要全选-Delete就ok了,并不会很麻烦。
设置方法:在主题functions.php文件添加以下代码即可:
function insertPreContent($content) { if(!is_feed() && !is_home()) { $content.= "这里的预定义内容在编辑器可见"; } return $content; } add_filter ('default_content', 'insertPreContent'); |
---|
添加更多的HTML标签(慎用)
此功能请慎用,因为WordPress自带的TinyMCE编辑器会默认过滤掉不符合XHTML 1.0中的html标签,不排除某些情况下也可能会用到这些标签,所以把方法放出来供大家参考吧。
添加方法:将以下代码粘贴到主题的functions.php文件里即可:
WordPress自带编辑器的强大往往被人忽略,很大程度上就是其隐藏的编辑按钮默认情况下没有被显示出来而已。完整的编辑器其实包含这些功能:
加粗(bold)、斜体(italic)、下划线(underline)、删除线(strikethrough)、左对齐(justifyleft)、居中(justifycenter)、右对齐(justfyright)、两端对齐(justfyfull)、无序列表(bullist)、编号列表(numlist)、减少缩进(outdent)、缩进(indent)、剪切(cut)、复制(copy)、粘贴(paste)、撤销(undo)、重做(redo)、插入超链接(link)、取消超链接(unlink)、插入图片(image)、清除格式(removeformat)、帮助(wp_help)、打开HTML代码编辑器(code)、水平线(hr)、清除冗余代码(cleanup)、格式选择(formmatselect)、字体选择(fontselect)、字号选择(fontsizeselect)、样式选择(styleselect)、上标(sub)、下标(sup)、字体颜色(forecolor)、字体背景色(backcolor)、特殊符号(charmap)、隐藏按钮显示开关(wp_adv)、隐藏按钮区起始部分(wp_adv_start)、隐藏按钮区结束部分(wp_adv_end)、锚文本(anchor)、新建文本(类似于清空文本)(newdocument)、插入more标签(wp_more)、插入分页标签(wp_page)、拼写检查(spellchecker)。
调用代码:
function enable_more_buttons($buttons) { $buttons[] = 'hr'; $buttons[] = 'fontselect'; $buttons[] = 'sup'; $buttons[] = 'del'; $buttons[] = 'fontselect'; $buttons[] = 'cleanup'; $buttons[] = 'styleselect'; // 更多按钮自行添加吧... return $buttons; } add_filter("mce_buttons", "enable_more_buttons"); //默认将新添加的按钮追加在工具栏的第一行 //add_filter("mce_buttons_2", "enable_more_buttons"); //添加到工具栏的第二行 //add_filter("mce_buttons_3", "enable_more_buttons"); //添加到工具栏的第三行 |
---|
让编辑器支持中文拼写检查
WordPress自带TinyMCE编辑器默认对英文拼写进行检查,怎么样才能让其支持中文拼写检查呢?
设置方法:在主题的functions.php文件里添加如下代码即可:
function fb_mce_external_languages($initArray){ $initArray['spellchecker_languages'] = '+Chinese=zh, English=en'; return $initArray; } add_filter('tiny_mce_before_init', 'fb_mce_external_languages'); |
---|
简单添加自定义按钮
如果你使用了WordPress3.3+版本,可以用以下方法快捷方便的在后台HTML编辑器中加入自定义按钮
步骤一:首先创建一个js文件,粘贴如下代码并保存为my_quicktags.js文件:
QTags.addButton( 'hr', 'hr', "n<hr />n", '' ); //快捷输入一个hr横线,点一下即可 QTags.addButton( 'h1', 'h1', "n<h1>", "</h1>n" ); //快捷输入h1标签 //QTags.addButton( 'my_id', 'my button', 'n', 'n' ); //这儿共有四对引号,分别是按钮的ID、显示名、点一下输入内容、再点一下关闭内容(此为空则一次输入全部内容),n表示换行。 |
---|
步骤二:把刚才写好的my_quicktags.js放在主题文件夹,再在主题 functions.php 中加入代码:
add_action('admin_print_scripts', 'my_quicktags'); function my_quicktags() { wp_enqueue_script( 'my_quicktags', get_stylesheet_directory_uri().'/my_quicktags.js', array('quicktags') ); } |
---|
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 花10分钟写一个 Python 脚本,搞定了初中老师一个下午的工作
- 微信小程序导航栏页面滑动切换
- SwiftUI:本地通知
- 领导大怒:建表不加主键的都是耍流氓
- (美团)巧用数组下标,轻轻松松找出所有元素
- Docker容器网络-基础篇
- 【Java面试总结】常用框架之Spring
- 【学以致用】C++操作Redis
- 商业鬼才教你 工厂方法 && 抽象工厂 模式
- redis学习(十四)
- 用动态路由打通各Virtual L2网络 By HKL,
- 《深入RabbitMQ》笔记
- Nginx学习日志(六)Linux下设置开机自启动
- 轻松学会 React 钩子:以 useEffect() 为例
- linux新增用户