TinyMCE为windowManager添加自定义控件 [英] TinyMCE add custom control for windowManager
问题描述
我的目标是创建一个自定义控件，以在对话框的正文打开宽度editor.windowManager.open中使用.
My goal is to create a custom control to be used in the dialog's body opened width editor.windowManager.open.
我在github上找到了标准控件的源类，但是我找不到通过插件添加新控件的方法.
https://github.com/tinymce/tinymce/tree/master/js/tinymce/classes/ui
I found the standard controls source class on github, but I can't find a way to add a new control through a plugin.
https://github.com/tinymce/tinymce/tree/master/js/tinymce/classes/ui
经过数小时的搜索，我找不到任何文档，教程或stackoverflow响应.然后，我尝试在插件中包含控件声明，但得到一个ReferenceError: define is not defined.
After hours of searching I couldn't find any documentation, tutorial or stackoverflow response. I then tried to include the control declaration in the plugin but I get a ReferenceError: define is not defined.
tinymce.PluginManager.add('my_plugin',function(editor,url){
// My custom control declaration following standard control found in source file
define("tinymce/ui/MyControl", [ "tinymce/ui/Widget" ],
function(Widget) {
"use strict";
return Widget.extend({
/**
* Renders the control as a HTML string.
*/
renderHtml: function() {
return '<div class="my-control">'+ this.state.get('text') +'</div>';
}
});
});
// Toolbar button to open the dialog
editor.addButton('my_plugin',{
title: 'My Plugin button',
text: 'My Plugin button',
onclick: function(){
// Dialog declaration
editor.windowManager.open({
title: 'My dialog',
body: [
{ type: 'textbox', name: 'textbox', label: 'My textbox' },
{ type: 'mycontrol', name: 'mycontrol', label: 'My Control' },
],
onsubmit: function( e ){
editor.insertContent( e.data.textbox );
}
});
},
});
});
// Init tinyMCE
tinymce.init({
selector: '#mytextarea',
plugins: 'my_plugin',
toolbar: 'my_plugin'
});
可以添加自定义控件，如果可以，如何实现?
It is possible to add a custom control, if yes how to achieve it ?
找到两个jsfiddle，第一个使用标准控件，第二个使用
Find two jsfiddle, the first with standard controls and second with my attempt and the error in the browser console
感谢您的帮助
推荐答案
我也已经为此苦苦挣扎了很长时间...
I've been struggling with this a long time too...
用
tinymce.ui.MyControl = tinymce.ui.Widget.extend({...})
我必须将构造函数添加到'tinymce.ui.Factory`:
I had to add the constructor function to 'tinymce.ui.Factory`:
tinymce.ui.Factory.add( 'mycontrol', tinymce.ui.MyControl );
一个工作示例:
// Stolen from tinymce.ui.TextBox:
// https://github.com/tinymce/tinymce/blob/master/src/ui/src/main/js/TextBox.js
tinymce.ui.MyControl = tinymce.ui.Widget.extend({
/**
* Constructs a instance with the specified settings.
*
* @constructor
* @param {Object} settings Name/value object with settings.
* @setting {String} format
*/
init: function(settings) {
var self = this;
self._super(settings);
self.classes.add('mycontrol');
},
/**
* Repaints the control after a layout operation.
*
* @method repaint
*/
repaint: function() {
var self = this, style, rect, borderBox, borderW = 0, borderH = 0, lastRepaintRect;
style = self.getEl().style;
rect = self._layoutRect;
lastRepaintRect = self._lastRepaintRect || {};
// Detect old IE 7+8 add lineHeight to align caret vertically in the middle
var doc = document;
if (!self.settings.multiline && doc.all && (!doc.documentMode || doc.documentMode <= 8)) {
style.lineHeight = (rect.h - borderH) + 'px';
}
borderBox = self.borderBox;
borderW = borderBox.left + borderBox.right + 8;
borderH = borderBox.top + borderBox.bottom + (self.settings.multiline ? 8 : 0);
if (rect.x !== lastRepaintRect.x) {
style.left = rect.x + 'px';
lastRepaintRect.x = rect.x;
}
if (rect.y !== lastRepaintRect.y) {
style.top = rect.y + 'px';
lastRepaintRect.y = rect.y;
}
if (rect.w !== lastRepaintRect.w) {
style.width = (rect.w - borderW) + 'px';
lastRepaintRect.w = rect.w;
}
if (rect.h !== lastRepaintRect.h) {
style.height = (rect.h - borderH) + 'px';
lastRepaintRect.h = rect.h;
}
self._lastRepaintRect = lastRepaintRect;
self.fire('repaint', {}, false);
return self;
},
/**
* Renders the control as a HTML string.
*
* @method renderHtml
* @return {String} HTML representing the control.
*/
renderHtml: function() {
var self = this, id = self._id, settings = self.settings, value = self.encode(self.state.get('value'), false), extraAttrs = '';
if (self.disabled()) {
extraAttrs += ' disabled="disabled"';
}
return '<input type="range" id="' + id + '" class="' + self.classes + '" value="' + value + '" hidefocus="1"' + extraAttrs + ' />';
},
value: function(value) {
if (arguments.length) {
this.state.set('value', value);
return this;
}
// Make sure the real state is in sync
if (this.state.get('rendered')) {
this.state.set('value', this.getEl().value);
}
return this.state.get('value');
},
/**
* Called after the control has been rendered.
*
* @method postRender
*/
postRender: function() {
var self = this;
self._super();
self.$el.on('change', function(e) {
self.state.set('value', e.target.value);
self.fire('change', e);
});
},
bindStates: function() {
var self = this;
self.state.on('change:value', function(e) {
if (self.getEl().value != e.value) {
self.getEl().value = e.value;
}
});
self.state.on('change:disabled', function(e) {
self.getEl().disabled = e.value;
});
return self._super();
},
remove: function() {
this.$el.off();
this._super();
}
});
tinymce.ui.Factory.add( 'mycontrol', tinymce.ui.MyControl );
// `mycontrol` is now available.
我已经相应更新了您的小提琴.
I've updated your Fiddle accordingly.
这篇关于TinyMCE为windowManager添加自定义控件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
