v1.0
只读模式 group, 分享 评论更多问题 博客标签总是存在一个
This commit is contained in:
202
public/tinymce/themes/modern/theme.js
Normal file → Executable file
202
public/tinymce/themes/modern/theme.js
Normal file → Executable file
@@ -9,6 +9,7 @@
|
||||
*/
|
||||
|
||||
/*global tinymce:true */
|
||||
|
||||
tinymce.ThemeManager.add('modern', function(editor) {
|
||||
var self = this, settings = editor.settings, Factory = tinymce.ui.Factory, each = tinymce.each, DOM = tinymce.DOM;
|
||||
|
||||
@@ -41,11 +42,9 @@ tinymce.ThemeManager.add('modern', function(editor) {
|
||||
return;
|
||||
}
|
||||
|
||||
var i = 0;
|
||||
var maxWidth = $("#mceToolbar").width()-40;
|
||||
var split = false;
|
||||
each(items.split(/[ ,]/), function(item) {
|
||||
var itemName;
|
||||
|
||||
function bindSelectorChanged() {
|
||||
var selection = editor.selection;
|
||||
|
||||
@@ -79,31 +78,22 @@ tinymce.ThemeManager.add('modern', function(editor) {
|
||||
});
|
||||
}
|
||||
|
||||
// log(itemName)
|
||||
// log(item);
|
||||
if (item.settings.stateSelector) {
|
||||
selection.selectorChanged(item.settings.stateSelector, function(state) {
|
||||
item.active(state);
|
||||
}, true);
|
||||
}
|
||||
|
||||
// life 4/25
|
||||
// 在pre时都disabled
|
||||
if(itemName != "leanote_code") {// } && itemName != "formatselect") {
|
||||
item.settings.disabledStateSelector = "pre";
|
||||
|
||||
if (item.settings.disabledStateSelector) {
|
||||
selection.selectorChanged(item.settings.disabledStateSelector, function(state) {
|
||||
// log(itemName + " " + state);
|
||||
item.disabled(state);
|
||||
});
|
||||
// log(itemName);
|
||||
}
|
||||
}
|
||||
|
||||
if (item == "|") {
|
||||
buttonGroup = null;
|
||||
split = true;
|
||||
} else {
|
||||
// Factory.has()只有plugins里才有, 这Factory类就是对plugin的实例化
|
||||
if (Factory.has(item)) {
|
||||
item = {type: item};
|
||||
|
||||
@@ -114,25 +104,17 @@ tinymce.ThemeManager.add('modern', function(editor) {
|
||||
toolbarItems.push(item);
|
||||
buttonGroup = null;
|
||||
} else {
|
||||
// log(editor.buttons);
|
||||
/*
|
||||
aligncenter: Object
|
||||
alignjustify: Object
|
||||
alignleft: Object
|
||||
cmd: "JustifyLeft"
|
||||
icon: "alignleft"
|
||||
onPostRender: function () {
|
||||
onclick: function () {
|
||||
size: "small"
|
||||
tooltip: "Align left"
|
||||
type: "button"
|
||||
*/
|
||||
if (!buttonGroup) {
|
||||
buttonGroup = {type: 'buttongroup', items: []};
|
||||
toolbarItems.push(buttonGroup);
|
||||
}
|
||||
|
||||
if (editor.buttons[item]) {
|
||||
// TODO: Move control creation to some UI class
|
||||
itemName = item;
|
||||
item = editor.buttons[itemName];
|
||||
|
||||
if (typeof(item) == "function") {
|
||||
if (typeof item == "function") {
|
||||
item = item();
|
||||
}
|
||||
|
||||
@@ -143,20 +125,7 @@ tinymce.ThemeManager.add('modern', function(editor) {
|
||||
}
|
||||
|
||||
item = Factory.create(item);
|
||||
i++;
|
||||
var w = $("#popularToolbar").width();
|
||||
var html = item.renderHtml();
|
||||
// life
|
||||
// $(item.renderHtml()).insertBefore("#moreBtn"); // ("#mceToolbarMore");
|
||||
if(split) {
|
||||
$("#popularToolbar").append('<span class="tool-split">|</span>');
|
||||
split = false;
|
||||
}
|
||||
$("#popularToolbar").append(html); // ("#mceToolbarMore");
|
||||
|
||||
item.postRender();
|
||||
|
||||
// buttonGroup.items.push(item);
|
||||
buttonGroup.items.push(item);
|
||||
|
||||
if (editor.initialized) {
|
||||
bindSelectorChanged();
|
||||
@@ -173,6 +142,20 @@ tinymce.ThemeManager.add('modern', function(editor) {
|
||||
return true;
|
||||
}
|
||||
|
||||
// Convert toolbar array to multiple options
|
||||
if (tinymce.isArray(settings.toolbar)) {
|
||||
// Empty toolbar array is the same as a disabled toolbar
|
||||
if (settings.toolbar.length === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
tinymce.each(settings.toolbar, function(toolbar, i) {
|
||||
settings["toolbar" + (i + 1)] = toolbar;
|
||||
});
|
||||
|
||||
delete settings.toolbar;
|
||||
}
|
||||
|
||||
// Generate toolbar<n>
|
||||
for (var i = 1; i < 10; i++) {
|
||||
if (!addToolbar(settings["toolbar" + i])) {
|
||||
@@ -180,15 +163,21 @@ tinymce.ThemeManager.add('modern', function(editor) {
|
||||
}
|
||||
}
|
||||
|
||||
// Generate toolbar or default toolbar
|
||||
if (!toolbars.length) {
|
||||
// Generate toolbar or default toolbar unless it's disabled
|
||||
if (!toolbars.length && settings.toolbar !== false) {
|
||||
addToolbar(settings.toolbar || defaultToolbar);
|
||||
}
|
||||
|
||||
// 这里面就含有了事件, 牛X
|
||||
// log(toolbars);
|
||||
|
||||
return toolbars;
|
||||
if (toolbars.length) {
|
||||
return {
|
||||
type: 'panel',
|
||||
layout: 'stack',
|
||||
classes: "toolbar-grp",
|
||||
ariaRoot: true,
|
||||
ariaRemember: true,
|
||||
items: toolbars
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -287,7 +276,7 @@ tinymce.ThemeManager.add('modern', function(editor) {
|
||||
}
|
||||
}
|
||||
|
||||
var enabledMenuNames = typeof(settings.menubar) == "string" ? settings.menubar.split(/[ ,]/) : defaultMenuBar;
|
||||
var enabledMenuNames = typeof settings.menubar == "string" ? settings.menubar.split(/[ ,]/) : defaultMenuBar;
|
||||
for (var i = 0; i < enabledMenuNames.length; i++) {
|
||||
var menu = enabledMenuNames[i];
|
||||
menu = createMenu(menu);
|
||||
@@ -310,7 +299,7 @@ tinymce.ThemeManager.add('modern', function(editor) {
|
||||
var item = panel.find(type)[0];
|
||||
|
||||
if (item) {
|
||||
item.focus();
|
||||
item.focus(true);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -353,13 +342,13 @@ tinymce.ThemeManager.add('modern', function(editor) {
|
||||
width = Math.max(settings.min_width || 100, width);
|
||||
width = Math.min(settings.max_width || 0xFFFF, width);
|
||||
|
||||
DOM.css(containerElm, 'width', width + (containerSize.width - iframeSize.width));
|
||||
DOM.css(iframeElm, 'width', width);
|
||||
DOM.setStyle(containerElm, 'width', width + (containerSize.width - iframeSize.width));
|
||||
DOM.setStyle(iframeElm, 'width', width);
|
||||
}
|
||||
|
||||
height = Math.max(settings.min_height || 100, height);
|
||||
height = Math.min(settings.max_height || 0xFFFF, height);
|
||||
DOM.css(iframeElm, 'height', height);
|
||||
DOM.setStyle(iframeElm, 'height', height);
|
||||
|
||||
editor.fire('ResizeEditor');
|
||||
}
|
||||
@@ -374,7 +363,7 @@ tinymce.ThemeManager.add('modern', function(editor) {
|
||||
*
|
||||
* @return {Object} Name/value object with theme data.
|
||||
*/
|
||||
function renderInlineUI() {
|
||||
function renderInlineUI(args) {
|
||||
var panel, inlineToolbarContainer;
|
||||
|
||||
if (settings.fixed_toolbar_container) {
|
||||
@@ -394,7 +383,7 @@ tinymce.ThemeManager.add('modern', function(editor) {
|
||||
deltaY = Math.max(0, scrollContainerPos.y - bodyPos.y);
|
||||
}
|
||||
|
||||
panel.fixed(false).moveRel(body, editor.rtl ? ['tr-br', 'br-tr'] : ['tl-bl', 'bl-tl']).moveBy(deltaX, deltaY);
|
||||
panel.fixed(false).moveRel(body, editor.rtl ? ['tr-br', 'br-tr'] : ['tl-bl', 'bl-tl', 'tr-br']).moveBy(deltaX, deltaY);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -425,6 +414,7 @@ tinymce.ThemeManager.add('modern', function(editor) {
|
||||
// Render a plain panel inside the inlineToolbarContainer if it's defined
|
||||
panel = self.panel = Factory.create({
|
||||
type: inlineToolbarContainer ? 'panel' : 'floatpanel',
|
||||
role: 'application',
|
||||
classes: 'tinymce tinymce-inline',
|
||||
layout: 'flex',
|
||||
direction: 'column',
|
||||
@@ -435,7 +425,7 @@ tinymce.ThemeManager.add('modern', function(editor) {
|
||||
border: 1,
|
||||
items: [
|
||||
settings.menubar === false ? null : {type: 'menubar', border: '0 0 1 0', items: createMenuButtons()},
|
||||
settings.toolbar === false ? null : {type: 'panel', name: 'toolbar', layout: 'stack', items: createToolbars()}
|
||||
createToolbars()
|
||||
]
|
||||
});
|
||||
|
||||
@@ -446,6 +436,7 @@ tinymce.ThemeManager.add('modern', function(editor) {
|
||||
]});
|
||||
}*/
|
||||
|
||||
editor.fire('BeforeRenderUI');
|
||||
panel.renderTo(inlineToolbarContainer || document.body).reflow();
|
||||
|
||||
addAccessibilityKeys(panel);
|
||||
@@ -454,17 +445,22 @@ tinymce.ThemeManager.add('modern', function(editor) {
|
||||
editor.on('nodeChange', reposition);
|
||||
editor.on('activate', show);
|
||||
editor.on('deactivate', hide);
|
||||
|
||||
editor.nodeChanged();
|
||||
}
|
||||
|
||||
settings.content_editable = true;
|
||||
|
||||
// life 一直显示
|
||||
// render();
|
||||
setTimeout(function() {
|
||||
render();
|
||||
editor.on('focus', function() {
|
||||
// Render only when the CSS file has been loaded
|
||||
if (args.skinUiCss) {
|
||||
tinymce.DOM.styleSheetLoader.load(args.skinUiCss, render, render);
|
||||
} else {
|
||||
render();
|
||||
}
|
||||
});
|
||||
editor.on('focus', render);
|
||||
// editor.on('blur', hide);
|
||||
|
||||
editor.on('blur hide', hide);
|
||||
|
||||
// Remove the panel when the editor is removed
|
||||
editor.on('remove', function() {
|
||||
@@ -474,6 +470,11 @@ tinymce.ThemeManager.add('modern', function(editor) {
|
||||
}
|
||||
});
|
||||
|
||||
// Preload skin css
|
||||
if (args.skinUiCss) {
|
||||
tinymce.DOM.styleSheetLoader.load(args.skinUiCss);
|
||||
}
|
||||
|
||||
return {};
|
||||
}
|
||||
|
||||
@@ -486,39 +487,24 @@ tinymce.ThemeManager.add('modern', function(editor) {
|
||||
function renderIframeUI(args) {
|
||||
var panel, resizeHandleCtrl, startSize;
|
||||
|
||||
if (args.skinUiCss) {
|
||||
tinymce.DOM.loadCSS(args.skinUiCss);
|
||||
}
|
||||
|
||||
// Basic UI layout
|
||||
// iframe的父
|
||||
// life
|
||||
// <div><iframe /></div>
|
||||
var iframeBeforeHtml = '<div id="noteTitleDiv">' +
|
||||
'<input name="noteTitle" id="noteTitle" placeholder="Title" ></div>';
|
||||
iframeBeforeHtml = "";
|
||||
|
||||
// 菜单, 这里没有
|
||||
// createMenuButtons();
|
||||
|
||||
// toolbar [0, 1]
|
||||
|
||||
createToolbars();
|
||||
|
||||
var items = [
|
||||
settings.menubar === false ? null : {type: 'menubar', border: '0 0 1 0', items: createMenuButtons()},
|
||||
// settings.toolbar === false ? null : {type: 'panel', layout: 'stack', items: createToolbars()},
|
||||
null,
|
||||
{type: 'panel', name: 'iframe', layout: 'stack', classes: 'edit-area ifr', html: iframeBeforeHtml, border: '1 0 0 0'}
|
||||
];
|
||||
|
||||
// 建panel, 还没用到, 只是建
|
||||
// 要修改这里!!
|
||||
panel = self.panel = Factory.create({
|
||||
type: 'panel',
|
||||
role: 'application',
|
||||
classes: 'tinymce',
|
||||
style: 'visibility: hidden',
|
||||
layout: 'stack',
|
||||
border: 1,
|
||||
items: items
|
||||
});
|
||||
|
||||
items: [
|
||||
settings.menubar === false ? null : {type: 'menubar', border: '0 0 1 0', items: createMenuButtons()},
|
||||
createToolbars(),
|
||||
{type: 'panel', name: 'iframe', layout: 'stack', classes: 'edit-area', html: '', border: '1 0 0 0'}
|
||||
]
|
||||
});
|
||||
|
||||
if (settings.resize !== false) {
|
||||
resizeHandleCtrl = {
|
||||
@@ -546,7 +532,7 @@ tinymce.ThemeManager.add('modern', function(editor) {
|
||||
|
||||
// Add statusbar if needed
|
||||
if (settings.statusbar !== false) {
|
||||
panel.add({type: 'panel', name: 'statusbar', classes: 'statusbar', layout: 'flow', border: '1 0 0 0', items: [
|
||||
panel.add({type: 'panel', name: 'statusbar', classes: 'statusbar', layout: 'flow', border: '1 0 0 0', ariaRoot: true, items: [
|
||||
{type: 'elementpath'},
|
||||
resizeHandleCtrl
|
||||
]});
|
||||
@@ -556,28 +542,8 @@ tinymce.ThemeManager.add('modern', function(editor) {
|
||||
panel.find('*').disabled(true);
|
||||
}
|
||||
|
||||
// Render before the target textarea/div
|
||||
// 把textarea隐藏起来?
|
||||
// 这里还把toolbar显示出来!!!!
|
||||
// 到target显示出来
|
||||
// .reflow()可以不要
|
||||
/*
|
||||
ui/Control.js
|
||||
// 先调用自己的renderHTML()
|
||||
renderBefore: function(elm) {
|
||||
var self = this;
|
||||
|
||||
elm.parentNode.insertBefore(DomUtils.createFragment(self.renderHtml()), elm);
|
||||
self.postRender();
|
||||
|
||||
return self;
|
||||
},
|
||||
*/
|
||||
// log("<renderBefore");
|
||||
editor.fire('BeforeRenderUI');
|
||||
panel.renderBefore(args.targetNode).reflow();
|
||||
// args.targetNode.parentNode.insertBefore(panel.renderHtml(), args.targetNode);
|
||||
// log(panel);
|
||||
// log("renderBefore>");
|
||||
|
||||
if (settings.width) {
|
||||
tinymce.DOM.setStyle(panel.getEl(), 'width', settings.width);
|
||||
@@ -592,13 +558,9 @@ tinymce.ThemeManager.add('modern', function(editor) {
|
||||
// Add accesibility shortkuts
|
||||
addAccessibilityKeys(panel);
|
||||
|
||||
// 这里
|
||||
// log("panel.getEl()")
|
||||
// log(panel.getEl());
|
||||
// return {}
|
||||
return {
|
||||
iframeContainer: panel.find('#iframe')[0].getEl(),
|
||||
editorContainer: panel.getEl() // 这里不加也可以显示, 那么, 显示不是这里控制
|
||||
editorContainer: panel.getEl()
|
||||
};
|
||||
}
|
||||
|
||||
@@ -611,10 +573,7 @@ tinymce.ThemeManager.add('modern', function(editor) {
|
||||
self.renderUI = function(args) {
|
||||
var skin = settings.skin !== false ? settings.skin || 'lightgray' : false;
|
||||
|
||||
/*
|
||||
自己加载, 不要这样加载
|
||||
if (skin) {
|
||||
|
||||
var skinUrl = settings.skin_url;
|
||||
|
||||
if (skinUrl) {
|
||||
@@ -626,15 +585,14 @@ tinymce.ThemeManager.add('modern', function(editor) {
|
||||
// Load special skin for IE7
|
||||
// TODO: Remove this when we drop IE7 support
|
||||
if (tinymce.Env.documentMode <= 7) {
|
||||
tinymce.DOM.loadCSS(skinUrl + '/skin.ie7.min.css');
|
||||
args.skinUiCss = skinUrl + '/skin.ie7.min.css';
|
||||
} else {
|
||||
tinymce.DOM.loadCSS(skinUrl + '/skin.min.css');
|
||||
args.skinUiCss = skinUrl + '/skin.min.css';
|
||||
}
|
||||
|
||||
// Load content.min.css or content.inline.min.css
|
||||
editor.contentCSS.push(skinUrl + '/content' + (editor.inline ? '.inline' : '') + '.min.css');
|
||||
}
|
||||
*/
|
||||
|
||||
// Handle editor setProgressState change
|
||||
editor.on('ProgressState', function(e) {
|
||||
@@ -647,12 +605,10 @@ tinymce.ThemeManager.add('modern', function(editor) {
|
||||
}
|
||||
});
|
||||
|
||||
// Render inline UI
|
||||
if (settings.inline) {
|
||||
return renderInlineUI(args);
|
||||
}
|
||||
|
||||
// Render iframe UI
|
||||
return renderIframeUI(args);
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user