MyBB Community Forums

Full Version: Rin Editor 1.2.4 (Powerd by CKEditor)
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
I found a bug that with the widthxheight in the img tag, that the image aspect ratio is wrong when using the global.php max width/height tag.

#posts_container img {
  max-width: 640px;
  max-height: 640px;
}

And images too large for the postbox get malformed aspect with them having the right height but only width is then adjusted which is a rin bug overall.
As I have some super wide images triple monitor screenshots and would like to just use the global css code above and nor tins image size tags.

What's the best way to fix this and remove the widthxheight tags?
most other forum software do not use this tag and as such we don't want it either and want it resized by our own code.

My test thread

Update: I did some reading and I should be able to disallow content by editing the config.js file as Rin is using CKEditor 4.7.
But cannot seem to get it to work using this code.

Official CKEditor docs
config.disallowedContent = 'img{width,height}';

Beautified Rin Editor config.js
/*
 Copyright (c) 2003-2015, CKSource - Frederico Knabben. All rights reserved.
 For licensing, see LICENSE.md or http://ckeditor.com/license
*/
CKEDITOR.editorConfig = function(a) {
    (CKEDITOR.env.mobile || CKEDITOR.env.iOS) && parseInt(rinmobsms) && (rinstartupmode = "source");
    a.toolbarGroups = [{
        name: "basicstyles"
    }, {
        name: "align"
    }, {
        name: "styles"
    }, {
        name: "colors",
        groups: ["colors", "cleanup"]
    }, {
        name: "insert"
    }, {
        name: "list"
    }, {
        name: "blocks",
        groups: ["blocks", "clipboard"]
    }, {
        name: "extra",
        groups: ["extra", "extradesc"]
    }, {
        name: "undo"
    }, {
        name: "document",
        groups: ["tools", "mode"]
    }];
    a.language = rinlanguage;
    a.removePlugins = rinautosave;
    a.removeButtons = "Cut,Copy,Paste,Anchor,BGColor,indent," +
        rinrmvbut + "";
    a.removeDialogTabs = "link:advanced";
    a.height = rinheight;
    a.fontSize_sizes = "xx-small;x-small;small;medium;large;x-large;xx-large";
    a.smiley_images = dropdownsmiliesurl.concat(dropdownsmiliesurlmore);
    a.smiley_descriptions = dropdownsmiliesname.concat(dropdownsmiliesnamemore);
    a.smiley_name = dropdownsmiliesdes.concat(dropdownsmiliesdesmore);
    a.smiley_path = smileydirectory;
    a.smiley_sc = rinsmileysc;
    a.autosave_saveDetectionSelectors = 'input[name*\x3d"submit"],input[name*\x3d"savedraft"],input[id*\x3d"quick_reply_submit"],input[name*\x3d"previewpost"]';
    a.autosave_message = rinautosavemsg;
    a.startupMode = rinstartupmode;
    a.imgurClientId = rinimgur;
    a.disableNativeSpellChecker = !1;
    a.skin = rinskin;
	
};

You can semi fix it by editing the config.js and adding this to the bottom of the file.

This code doesn't auto insert the values into the width and height area and leaves them blank.
a.image_prefillDimensions = false;

My full config.js file in the rin editor is below.
Just replace your file with this one.
As for removing the width and height properties in the image box I am still figuring that out.
If you can figure that next part out let us know,

/*
 Copyright (c) 2003-2015, CKSource - Frederico Knabben. All rights reserved.
 For licensing, see LICENSE.md or http://ckeditor.com/license
*/
CKEDITOR.editorConfig = function(a) {
    (CKEDITOR.env.mobile || CKEDITOR.env.iOS) && parseInt(rinmobsms) && (rinstartupmode = "source");
    a.toolbarGroups = [{
        name: "basicstyles"
    }, {
        name: "align"
    }, {
        name: "styles"
    }, {
        name: "colors",
        groups: ["colors", "cleanup"]
    }, {
        name: "insert"
    }, {
        name: "list"
    }, {
        name: "blocks",
        groups: ["blocks", "clipboard"]
    }, {
        name: "extra",
        groups: ["extra", "extradesc"]
    }, {
        name: "undo"
    }, {
        name: "document",
        groups: ["tools", "mode"]
    }];
    a.language = rinlanguage;
    a.removePlugins = rinautosave;
    a.removeButtons = "Cut,Copy,Paste,Anchor,BGColor,indent," +
        rinrmvbut + "";
    a.removeDialogTabs = "link:advanced";
    a.height = rinheight;
    a.fontSize_sizes = "xx-small;x-small;small;medium;large;x-large;xx-large";
    a.smiley_images = dropdownsmiliesurl.concat(dropdownsmiliesurlmore);
    a.smiley_descriptions = dropdownsmiliesname.concat(dropdownsmiliesnamemore);
    a.smiley_name = dropdownsmiliesdes.concat(dropdownsmiliesdesmore);
    a.smiley_path = smileydirectory;
    a.smiley_sc = rinsmileysc;
    a.autosave_saveDetectionSelectors = 'input[name*\x3d"submit"],input[name*\x3d"savedraft"],input[id*\x3d"quick_reply_submit"],input[name*\x3d"previewpost"]';
    a.autosave_message = rinautosavemsg;
    a.startupMode = rinstartupmode;
    a.imgurClientId = rinimgur;
    a.disableNativeSpellChecker = !1;
    a.skin = rinskin;
    a.image_prefillDimensions = false;
};
I made a few more changes to my copy which enhances Rin for mybb.
I managed to resize images to not be stupidly large in the editor window by editing Rins editor.css file with a max height and width tag.
I also used css to hide the width and height controls in the image controls.
If anyone is interested let me know.

People can make accounts on my site if they want to test on another site without modifying their own code.
Please share your code here
(2018-06-30, 05:37 AM)Eldenroot Wrote: [ -> ]Please share your code here

Ok I will so this post may be a bit big.
I hope these changes can be implemented into a future version of Rin as I made these based on my own and seeing how mybb works backend.

Firstly I used beautifiers which neaten the code from the truncated versions so this won't make much difference until you do that.
I'll repost the code above with the rest here in full.

The files are in /*ForumPath*/jscripts/rin/editor

Config.JS
To stop auto width x height this code is used.
I added it on line 50.

a.image_prefillDimensions = false;

Full File
/*
 Copyright (c) 2003-2015, CKSource - Frederico Knabben. All rights reserved.
 For licensing, see LICENSE.md or http://ckeditor.com/license
*/
CKEDITOR.editorConfig = function(a) {
    (CKEDITOR.env.mobile || CKEDITOR.env.iOS) && parseInt(rinmobsms) && (rinstartupmode = "source");
    a.toolbarGroups = [{
        name: "basicstyles"
    }, {
        name: "align"
    }, {
        name: "styles"
    }, {
        name: "colors",
        groups: ["colors", "cleanup"]
    }, {
        name: "insert"
    }, {
        name: "list"
    }, {
        name: "blocks",
        groups: ["blocks", "clipboard"]
    }, {
        name: "extra",
        groups: ["extra", "extradesc"]
    }, {
        name: "undo"
    }, {
        name: "document",
        groups: ["tools", "mode"]
    }];
    a.language = rinlanguage;
    a.removePlugins = rinautosave;
    a.removeButtons = "Cut,Copy,Paste,Anchor,BGColor,indent," +
        rinrmvbut + "";
    a.removeDialogTabs = "link:advanced";
    a.height = rinheight;
    a.fontSize_sizes = "xx-small;x-small;small;medium;large;x-large;xx-large";
    a.smiley_images = dropdownsmiliesurl.concat(dropdownsmiliesurlmore);
    a.smiley_descriptions = dropdownsmiliesname.concat(dropdownsmiliesnamemore);
    a.smiley_name = dropdownsmiliesdes.concat(dropdownsmiliesdesmore);
    a.smiley_path = smileydirectory;
    a.smiley_sc = rinsmileysc;
    a.autosave_saveDetectionSelectors = 'input[name*\x3d"submit"],input[name*\x3d"savedraft"],input[id*\x3d"quick_reply_submit"],input[name*\x3d"previewpost"]';
    a.autosave_message = rinautosavemsg;
    a.startupMode = rinstartupmode;
    a.imgurClientId = rinimgur;
    a.disableNativeSpellChecker = !1;
    a.skin = rinskin;
    a.image_prefillDimensions = false;
};

CSS Code
I am looking more into this so scratch this section
I have a feeling the element numbers change based on user.

To hide width x height property.

To hide / remove the options from the imagebox
Add this css code anywhere.

The ??? is because I'm still trying to figure this out as the numbers seem to keep changing around on me.
#cke_???_uiElement {
	display: none;
}

Contents.CSS
Code to resize images in the editor wysiwyg area box.

After .cke_editable add this at line 27
You can only do it in this css as it invoked via a iframe.

Replace the 320 to whatever feels right for you.
To me that seems the best width and height.

.cke_editable img {
  max-width: 320px;
  max-height: 320px;
}

The full contents.css becomes this after.
/*
Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.md or http://ckeditor.com/license
*/

body
{
	/* Font */
	font-family: Tahoma, Verdana, Arial, Sans-Serif;
	font-size: 14px;

	/* Text color */
	color: #000;

	/* Remove the background color to make it transparent */
	background-color: #fff;

	margin: 10px;
}

.cke_editable
{
	font-size: 14px;
	line-height: 1.4;
}

.cke_editable img {
  max-width: 320px;
  max-height: 320px;
}

p {
	margin: 0px;
}

blockquote {
	background: white;
	margin: .25em .05em 0 0;
	border: 1px solid #ccc;
	padding: 10px;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	border-radius: 6px;
}

blockquote:before {
	font-weight: bold;
	font-style: normal;
	content: attr(data-cite);
	display: block;
	font-size: 1em;
	border-bottom: 1px solid #ccc;
	margin-bottom: 10px;
	padding-bottom: 3px;
}

blockquote:before:-moz-only-whitespace {
	display: none;
}

blockquote[data-cite='codeblock']:before, blockquote[data-cite='phpcodeblock']:before {
	font-weight: bold;
	content: 'Code:';
	display: block;
	border-bottom: 1px solid #ccc;
	padding: 4px 0 3px 0;
	margin-bottom: 10px;
}

blockquote[data-cite='phpcodeblock']:before {
	content: 'PHP Code:' !important;
	color: #333 !important;
}

blockquote[data-cite='codeblock'], blockquote[data-cite='phpcodeblock'] {
	font-family: Monaco, Consolas, Courier, monospace;
	font-size: 13px !important;
	padding: 10px;
	position: relative;
	background: white;
	margin: .25em .05em 0 0;
	border: 1px solid #ccc;
	display: block;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	border-radius: 6px;
}

blockquote[data-cite='phpcodeblock'] {
	color: #0000BB;
}

a
{
	color: #0782C1;
}

ol,ul,dl
{
	/* IE7: reset rtl list margin. (#7334) */
	*margin-right: 0px;
	/* preserved spaces for list items with text direction other than the list. (#6249,#8049)*/
	padding: 0 40px;
}

h1,h2,h3,h4,h5,h6
{
	font-weight: normal;
	line-height: 1.2;
}

hr
{
	border: 0px;
	border-top: 1px solid #ccc;
}

img.right
{
	border: 1px solid #ccc;
	float: right;
	margin-left: 15px;
	padding: 5px;
}

img.left
{
	border: 1px solid #ccc;
	float: left;
	margin-right: 15px;
	padding: 5px;
}

pre
{
	white-space: pre-wrap; /* CSS 2.1 */
	word-wrap: break-word; /* IE7 */
	-moz-tab-size: 4;
	tab-size: 4;
}

.marker
{
	background-color: Yellow;
}

span[lang]
{
	font-style: italic;
}

figure
{
	text-align: center;
	border: solid 1px #ccc;
	border-radius: 2px;
	background: rgba(0,0,0,0.05);
	padding: 10px;
	margin: 10px 20px;
	display: inline-block;
}

figure > figcaption
{
	text-align: center;
	display: block; /* For IE8 */
}

a > img {
	padding: 1px;
	margin: 1px;
	border: none;
	outline: 1px solid #0782C1;
}


You can always re truncate the files as trauncating is done to marginally increase speeds.
If you want to have a max width height preview in the actual post that is using much the same code which I originally found on here and fancybox can also be installed. these are extra non related stuff to the Rin editor.

The codes above should get you a post and editor box where size really doesn't matter, images, gifs etc that.

The code above Element 67 was also the URL box so changed it to element 118 which seems to be better.
I don't suppose anyone has looked into adding tables to the editor  Confused
The code above for disabling the image width x height ignore that the sizing code is fine.

I am trying to work ont he image wixth x height still.

In the config you should be able to add as per the ACF documentation:

config.disallowedContent = 'img{width,height}';

I grabbed the official CKEditor 4.7.0 the same used in rin and that code is working in the config there but not in Rin when changing to the 'config' to 'a' tag.
Weather I am missing something or the function has been removed as the rin version is 4.7.0 DEV opposed to the official 4.7.0 release which has some extra changes in it.

Though the disallow content filter has been in since 4.4 so it should be working so I don't know why it isn't.

The code seems to be in the Rin editors ckeditor.js file for this function.
Any advice?
I've been using this editor for the past couple of months - and I'm really liking it! I much prefer it over the default SCEditor - so, great job Big Grin .

However, since upgrading to MyBB 1.8.18 a couple of days ago, we've been experiencing an annoying issue. When a user quotes a post, only the quote goes through: the rest of the reply is lost Sad .

After doing a bit of testing, I found that this only happens when the RIN Editor is loaded in source mode (either on mobiles, or when the user has "Load editor in source mode by default" ticked un their User CP). If I don't load the editor in source mode, everything works fine.

For now, I've configured RIN Editor not to load in source mode on mobiles, and told members that they shouldn't be loading the editor in source mode. However, it appears that the upgrade to 1.8.18 has broken some aspect of this editor Sad . Is there any chance of this being fixed at some point?
Sorry to double-post, but I have discovered some more issues:
  • If the user chooses to load the editor in Source Mode, then this can cause the "This Message is Missing" error introduced in MyBB 1.8.18;
  • If the user copies and pastes in emoticons, this will also lead to the "This Message is Missing" error. This happens even if the editor is NOT loaded in source mode (if it is, then the emoticons' alternate text is pasted in instead). Also, this issue only seems to affect the Quick Reply; it seems to be fine in Full Reply mode.

I really hope these issues are going to be fixed, because they've been rather annoying over the past couple of weeks. I'd hate to have to go back to the default SCEditor (especially since this has annoying unresolved issue of its own Sad )
Kyng; I had issues after updating - make sure you make the following edits in your newreply, newthread, and editpost templates -

if you have the following code

<script type="text/javascript" src="{$mybb->asset_url}/jscripts/post.js?ver=1800"></script>

then replace it with the following


{$post_javascript}

Should fix most issues - there are still some annoying issues in Rin, but I don't think it is being updated anymore Sad
Thanks, but I had already made those template changes on the day that 1.8.18 was released, and it didn't fix the issues I listed. Only disabling RIN Editor seems to fix these problems Sad .