JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//tinymce.cachefly.net/4.1/tinymce.min.js"></script>
<script type="text/javascript">/*
/*
* version 1.1 2015-01-31
* Requires jQuery v1.4.2 or later
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
* Authors: Damon Jung
*/
; (function ($) {
$.fn.resizingCell = function (options) {
return this.each(function () {
var settings = $.extend({
selector: options.selector ? options.selector : "td",
thick: options.thick ? options.thick : 9,
color: options.color ? options.color : "transparent",
borderStyle: options.borderStyle ? options.borderStyle : "solid",
borderColor: options.borderColor ? options.borderColor : "black"
}, options);
// DJ
// false = resizing is off.
// true = resizing is on.
var resizingStatus = false;
// DJ : Object model for Javascript, jQuery object and iframe object, and tinymce instance.
var parentElement = {
JavaScript : this,
Jquery : $(this),
Contents : $(this).contents().find("body"),
Editor : $(tinymce.activeEditor.editorContainer)
};
// DJ : Resizing hanlder model.
var attachedHandler = {
eHandler : {
selector : undefined,
id : undefined
},
nHandler : {
selector : undefined,
id : undefined
}
};
// DJ : Selected element, X, Y coordinates, and leverage.
var selectedElement,
originalX,
originalY,
leverage = settings.thick / 2;
// DJ : Function group
var methods = {
//...
CSS
p {
font-size:10pt;
}
#testTable {
height:500px;
width:500px;
}
#testTable td {
border:1px solid black;
}
JavaScript
/*
* version 1.1 2015-01-31
* Requires jQuery v1.4.2 or later
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
* Authors: Damon Jung
*/
; (function ($) {
$.fn.resizingCell = function (options) {
return this.each(function () {
var settings = $.extend({
selector: options.selector ? options.selector : "td",
thick: options.thick ? options.thick : 9,
color: options.color ? options.color : "transparent",
borderStyle: options.borderStyle ? options.borderStyle : "solid",
borderColor: options.borderColor ? options.borderColor : "black"
}, options);
// DJ
// false = resizing is off.
// true = resizing is on.
var resizingStatus = false;
// DJ : Object model for Javascript, jQuery object and iframe object, and tinymce instance.
var parentElement = {
JavaScript : this,
Jquery : $(this),
Contents : $(this).contents().find("body"),
Editor : $(tinymce.activeEditor.editorContainer)
};
// DJ : Resizing hanlder model.
var attachedHandler = {
eHandler : {
selector : undefined,
id : undefined
},
nHandler : {
selector : undefined,
id : undefined
}
};
// DJ : Selected element, X, Y coordinates, and leverage.
var selectedElement,
originalX,
originalY,
leverage = settings.thick / 2;
// DJ : Function group
var methods = {
// Updating changed value on target elements.
fixedValue: function(selectedElement,...