Zblog php 版TinyMCE 编辑器使用及开发小记

告别ueditor吧,少一点烦恼,多一点乐趣

首先TinyMCE 默认是没有字体大小和样式 选择的,大谋也不推荐在编辑文章的时候对文字进行各种style因为这并不好看,不过你一定要?那你接着往下看

ZB版本的TinyMCE由鸟儿大婶移植,打开这个插件的目录你就会发现里面还做了一个给开发者准备的demo

Zblog php 版TinyMCE 编辑器使用及开发小记 ZBlog 第1张

如上图所示,就是这个了,只要是开发者这个示例真的很容易看懂!

当然别忘记看include.php

首先当然是挂接一下接口

 

 if ($zbp->CheckPlugin('my_tinymce')) {//判断一下是否启用该插件,当然这里需要判断的话“global $zbp;”可少不了
Add_Filter_Plugin('Filter_Plugin_My_Tinymce_Plugin','dm_tools_my_tinymce');
Add_Filter_Plugin('Filter_Plugin_My_Tinymce_Buttons_2','dm_tools_my_tinymce_addbuttons');//这里接口后面的数字代表了插入按钮在第几行
Add_Filter_Plugin('Filter_Plugin_My_Tinymce_JSHolder','dm_tools_my_tinymce_addjs');
Add_Filter_Plugin('Filter_Plugin_My_Tinymce_EditorStyle','dm_tools_my_tinymce_addcss');//这个需要注意的是函数里面直接输出css地址即可...
}

下面看看大谋的其他php代码

function dm_tools_my_tinymce(&$plugins){
global $zbp;
$plugins[]='dm_tools';//这个就是大谋增加的按钮的ID
}
function dm_tools_my_tinymce_addbuttons(&$mce_buttons){
global $zbp;
if ($zbp->CheckRights('root')) {
$mce_buttons[]='dm_tools';//按钮的ID
$mce_buttons[]='fontselect';//自带的字体选择,默认不显示,好吧这个只需要加载出来即可
$mce_buttons[]='fontsizeselect';//自带的字体大小
}
}
function dm_tools_my_tinymce_addjs(){//这个JS后面再讲
global $zbp;
echo '<script src="'.$zbp->host .'zb_users/plugin/dm_tools/plugin/dm_tools.js" type="text/javascript"></script>'."\r\n";
}
function dm_tools_my_tinymce_addcss(&$mce_css){//哈哈,只需要css地址
global $zbp;
$mce_css[] = $zbp->host.'zb_users/plugin/dm_tools/plugin/dm_tools.css';
}

上js,这里大谋给这个编辑器加上了一个多级列表的按钮,吼吼~

(function() {
"use strict";

tinymce.PluginManager.add('dm_tools',function(editor, url) {
editor.addButton('dm_tools', {
text: '小工具',
icon: false,
type: 'listbox',
menu: [{
text: '一些表格',menu: [{
text: 'ZB应用',onclick: function() {
editor.windowManager.open({
title: 'Zblog 应用',body: [{
type: 'textbox',
name: 'appname',
label: '名称',
value: '秀主题ZBP版'
},{
type: 'textbox',
name: 'appprice',
label: '售价',
value: '168'
},{
type: 'textbox',
name: 'author',
label: '作者',
value: '大谋'
},{
type: 'textbox',
name: 'urlpage',
label: '发布连接',
value: 'https://www.imlgm.com/'
},{
type: 'textbox',
name: 'applogo',
label: '图标',
value: 'https://www.imlgm.com/zb_users/theme/xiu_x/screenshot.png'
},{
type: 'textbox',
name: 'appintro',
label: '简述',
value: '博主很懒,没有写简述',
multiline: true,
minWidth: 300,
minHeight: 100
},{
type: 'listbox',
name: 'leibie',
label: '类别',
'values': [{
text: 'Zblog php 主题',
value: 'Zblog php 主题'
},{
text: 'Zblog php 插件',
value: 'Zblog php 插件'
},{
text: 'Zblog php 扩展',
value: 'Zblog php 扩展'
},{
text: 'Zblog asp 主题',
value: 'Zblog asp 主题'
},{
text: 'Zblog asp 插件',
value: 'Zblog asp 插件'
},{
text: 'Zblog asp 扩展',
value: 'Zblog asp 扩展'
}]
}],onsubmit: function(e) {
var appcontent = '<table class="table appinfo">\
<caption>应用信息</caption>\
<tbody>\
<tr>\
<td rowspan="5" class="appinfo_logo"><img src="' + e.data.applogo + '"></td>\
<td class="appinfo_title">应用:</td>\
<td><span>' + e.data.appname + '</span></td>\
<td class="appinfo_title">售价:</td>\
<td>' + e.data.appprice + '</td>\
</tr>\
<tr>\
<td class="appinfo_title">作者:</td>\
<td>' + e.data.author + '</td>\
<td class="appinfo_title">类别:</td>\
<td>' + e.data.leibie + '</td>\
</tr>\
<tr>\
<td class="appinfo_title">发布页</td>\
<td colspan="3"><a href="' + e.data.urlpage + '" target="_blank">' + e.data.urlpage + '</a></td>\
</tr>\
<tr>\
<td class="appinfo_title">应用简介</td>\
<td colspan="3">' + e.data.appintro + '</td>\
</tr>\
</tbody></table>\
';
editor.insertContent(appcontent);
}
});
}
}]
}]
});
});

})();

js各位看官慢慢看,套了2环,看着有点晕的...

上结果

Zblog php 版TinyMCE 编辑器使用及开发小记 ZBlog 第2张

上面是多级按钮,不错吧,多级按钮不占位置

Zblog php 版TinyMCE 编辑器使用及开发小记 ZBlog 第3张

今天先到这里,以后再慢慢研究

未经允许不得转载:大谋菠萝格 » Zblog php 版TinyMCE 编辑器使用及开发小记

打赏 收藏
分享到: +

评论 板凳

换个身份

  • 昵称 (必填)
  • 邮箱 (选填)
  • 网址 (选填)
  1. #1
    nobird
    tinymce没有字体选择功能。。。是因为。。。这个插件可以在编辑器界面引入外部css,主题可以通过这个方法使得tinymce变成真正意义上的所见即所得,也就是说,后台写的时候什么样子。。前台看见的就是什么样子。
    nobird 2016-05-20 21:08:58回复 取消评论