So I have it working.
After going through all the sceditor JS files .... I realized that I only needed to change the BBcode_sceditor script!
So I put back all the 1.8.37 files and then changed that one file from line 594 through 690 (but I only actually removed some few parts .... which makes me concerned about doing the same to the actual forum).
I find no errors but have I created security holes?
The parts removed I shall make Red in the code block .... OK can't do that so will need to post the whole code and make
the removed parts RED!
~~~~~~~
// Update image command to support MyBB syntax
$.sceditor.formats.bbcode.set('img', {
format: function (element, content) {
if ($(element).data('sceditor-emoticon'))
return content;
var url = $(element).attr('src'),
width = $(element).attr('width'),
height = $(element).attr('height'),
align = $(element).data('scealign');
var attrs = width !== undefined
&& height !== undefined && width > 0
&& height > 0
? '=' + width
+ 'x' + height
: ''
;
if (align === 'left' || align === 'right')
attrs += ' align='+align
return '[img' + attrs + ']' + url + '[/img]';
},
html: function (token, attrs, content) {
var width, height, match,
align = attrs.align,
attribs = '';
if (attrs.defaultattr) {
match = attrs.defaultattr.split(/x/i);
width = match[0];
height = (match.length === 2 ? match[1] : match[0]);
if (width !== undefined
&& height !== undefined && width > 0
&& height > 0) {
attribs +=
' width="' + $.sceditor.escapeEntities(width, true) + '"'
+
' height="' + $.sceditor.escapeEntities(height, true) + '"';
}
}
if (align === 'left' || align === 'right')
attribs += ' style="float: ' + align + '" data-scealign="' + align + '"';
return '<img' + attribs +
' src="' + $.sceditor.escapeUriScheme(content) + '" />';
}
})
$.sceditor.command.set('image', {
_dropDown: function (editor, caller) {
var $content;
$content = $(
'<div>' +
'<div>' +
'<label for="image">' + editor._('URL') + ':</label> ' +
'<input type="text" id="image" placeholder="https://" />' +
'</div>' +
'<div>' +
'<label for="width">' + editor._('Width (optional)') + ':</label> ' +
'<input type="text" id="width" size="2" />' +
'</div>' +
'<div>' +
'<label for="height">' + editor._('Height (optional)') + ':</label> ' +
'<input type="text" id="height" size="2" />' +
'</div>' +
'<div>' +
'<input type="button" class="button" value="' + editor._('Insert') + '" />' +
'</div>' +
'</div>'
);
$content.find('.button').on('click', function (e) {
var url = $content.find('#image').val(),
width = $content.find('#width').val(),
height = $content.find('#height').val()
;
var attrs = width !== undefined &&
height !== undefined && width > 0
&& height > 0
? '=' + width
+ 'x' + height
: ''
;
if (url)
editor.insert('[img' + attrs + ']' + url + '[/img]');
editor.closeDropDown(true);
e.preventDefault();
});
editor.createDropDown(caller, 'insertimage', $content.get(0));
},
exec: function (caller) {
$.sceditor.command.get('image')._dropDown(this, caller);
},
txtExec: function (caller) {
$.sceditor.command.get('image')._dropDown(this, caller);
},
});
~~~~~~~
So that works and that part of the code becomes:
// Update image command to support MyBB syntax
$.sceditor.formats.bbcode.set('img', {
format: function (element, content) {
if ($(element).data('sceditor-emoticon'))
return content;
var url = $(element).attr('src'),
width = $(element).attr('width'),
height = $(element).attr('height'),
align = $(element).data('scealign');
var attrs = width !== undefined && width > 0
? '=' + width
: ''
;
if (align === 'left' || align === 'right')
attrs += ' align='+align
return '[img' + attrs + ']' + url + '[/img]';
},
html: function (token, attrs, content) {
var width, height, match,
align = attrs.align,
attribs = '';
// handle [img=340x240]url[/img]
if (attrs.defaultattr) {
match = attrs.defaultattr.split(/x/i);
width = match[0];
height = (match.length === 2 ? match[1] : match[0]);
if (width !== undefined && width > 0) {
attribs +=
' width="' + $.sceditor.escapeEntities(width, true) + '"';
}
}
if (align === 'left' || align === 'right')
attribs += ' style="float: ' + align + '" data-scealign="' + align + '"';
return '<img' + attribs +
' src="' + $.sceditor.escapeUriScheme(content) + '" />';
}
})
$.sceditor.command.set('image', {
_dropDown: function (editor, caller) {
var $content;
$content = $(
'<div>' +
'<div>' +
'<label for="image">' + editor._('URL') + ':</label> ' +
'<input type="text" id="image" placeholder="https://" />' +
'</div>' +
'<div>' +
'<label for="width">' + editor._('Width (optional)') + ':</label> ' +
'<input type="text" id="width" size="2" />' +
'</div>' +
'<div>' +
'<label for="height">' + editor._('Height (optional)') + ':</label> ' +
'<input type="text" id="height" size="2" />' +
'</div>' +
'<div>' +
'<input type="button" class="button" value="' + editor._('Insert') + '" />' +
'</div>' +
'</div>'
);
$content.find('.button').on('click', function (e) {
var url = $content.find('#image').val(),
width = $content.find('#width').val(),
;
var attrs = width !== undefined && width > 0
? '=' + width
: ''
;
if (url)
editor.insert('[img' + attrs + ']' + url + '[/img]');
editor.closeDropDown(true);
e.preventDefault();
});
editor.createDropDown(caller, 'insertimage', $content.get(0));
},
exec: function (caller) {
$.sceditor.command.get('image')._dropDown(this, caller);
},
txtExec: function (caller) {
$.sceditor.command.get('image')._dropDown(this, caller);
},
});
Have I broke anything else do you think or made it insecure?
So I did want to remove the ability to input a height .... and I did (the idea was to remove any way to use the input area for 'bad' input) .... but it suddenly flipped back and I couldn't remove it again??
I changed this part of the code:
'<label for="height">' + editor._('Height (optional)') + ':</label> ' +
'<input type="text" id="height" size="2" />' +
to:
'<label for="height">' + editor._('Height (optional)') + ':</label> ' +
'<input type="hidden" value="" id="height" size="2" />' +
I know that within the sceditor files it is mentioned 3 times .... and I wonder it altering those would remove the "height" dropdown???
Go it to do what I needed .... I put all files back as per 1.8.37 and the changes are ....
In "bbcodes-sceditor.js" .... from line 594 to line 690 the code was changed to this:
// Update image command to support MyBB syntax
$.sceditor.formats.bbcode.set('img', {
format: function (element, content) {
if ($(element).data('sceditor-emoticon'))
return content;
var url = $(element).attr('src'),
width = $(element).attr('width'),
height = $(element).attr('height'),
align = $(element).data('scealign');
var attrs = width !== undefined && width > 0
? '=' + width
: ''
;
if (align === 'left' || align === 'right')
attrs += ' align='+align
return '[img' + attrs + ']' + url + '[/img]';
},
html: function (token, attrs, content) {
var width, height, match,
align = attrs.align,
attribs = '';
// handle [img=340x240]url[/img]
if (attrs.defaultattr) {
match = attrs.defaultattr.split(/x/i);
width = match[0];
height = (match.length === 2 ? match[1] : match[0]);
if (width !== undefined && width > 0) {
attribs +=
' width="' + $.sceditor.escapeEntities(width, true) + '"';
}
}
if (align === 'left' || align === 'right')
attribs += ' style="float: ' + align + '" data-scealign="' + align + '"';
return '<img' + attribs +
' src="' + $.sceditor.escapeUriScheme(content) + '" />';
}
})
$.sceditor.command.set('image', {
_dropDown: function (editor, caller) {
var $content;
$content = $(
'<div>' +
'<div>' +
'<label for="image">' + editor._('URL') + ':</label> ' +
'<input type="text" id="image" placeholder="https://" />' +
'</div>' +
'<div>' +
'<label for="width">' + editor._('Width (optional)') + ':</label> ' +
'<input type="text" id="width" size="2" />' +
'</div>' +
'<div>' +
'<label for="height">' + editor._('') + '</label> ' +
'<input type="hidden" value="" id="height" size="2" />' +
'</div>' +
'<div>' +
'<input type="button" class="button" value="' + editor._('Insert') + '" />' +
'</div>' +
'</div>'
);
$content.find('.button').on('click', function (e) {
var url = $content.find('#image').val(),
width = $content.find('#width').val(),
;
var attrs = width !== undefined && width > 0
? '=' + width
: ''
;
if (url)
editor.insert('[img' + attrs + ']' + url + '[/img]');
editor.closeDropDown(true);
e.preventDefault();
});
editor.createDropDown(caller, 'insertimage', $content.get(0));
},
exec: function (caller) {
$.sceditor.command.get('image')._dropDown(this, caller);
},
txtExec: function (caller) {
$.sceditor.command.get('image')._dropDown(this, caller);
},
});
And in "jquery.sceditor.bbcode.min.js" .... very small changes.
Find this line (the file is minimized so you can either copy it >> format it >> find the line >> min it >> re-upload .... or just find and change it):
<div><label for="height">{height}</label> <input type="text" id="height" size="2" dir="ltr" /></div>
It is in this part:
image: '<div><label for="image">{url}</label> <input type="text" id="image" dir="ltr" placeholder="https://" /></div><div><label for="width">{width}</label> <input type="text" id="width" size="2" dir="ltr" /></div><div><label for="height">{height}</label> <input type="text" id="height" size="2" dir="ltr" /></div><div><input type="button" class="button" value="{insert}" /></div>',
And change the single line to:
<div><label for="height"></label> <input type="hidden" id="height" size="2" dir="ltr" /></div>
Then if I have it all correct (which it works with no errors .... that I have found) there will be only the option of changing the image width and it will auto the height!
[
attachment=46767]
