[Tutorial] CKEditor
+7
YoshiGM
tikky
SLGray
Wecoc
TheCrow
skouliki
Daemon
11 posters
Page 1 of 2
Page 1 of 2 • 1, 2
[Tutorial] CKEditor
Destroy SCEditor and Build CKEditor
All you have to do is create a new JavaScript (The placement: All pages).
For more advanced users, I leave the editor configuration guide link: https://docs.ckeditor.com/ckeditor4/latest/api/index.html
If you want to add an extra tab to host images on Servimg, read the following message: https://help.forumotion.com/t155678-tutorial-ckeditor#1071520
Enjoy!
All you have to do is create a new JavaScript (The placement: All pages).
- Code:
/*
* Application: CKEditor
* Date: 30/04/2018
* Version: 1.030042018
* Copyright (c) CKSource and Adapted to forumotion by Daemon <help.forumotion.com>
* This work is free. You can redistribute it and/or modify it
*/
$(function() {
if (!$.sceditor) return;
$.ajax({
type: 'GET',
url: 'https://cdn.ckeditor.com/4.9.2/standard/ckeditor.js',
dataType: 'script',
success: function() {
CKEDITOR.replace('text_editor_textarea');
},
error: function (jqXHR, textStatus, errorThrown) {
if(jqXHR.status == 500) {
console.log('Internal error: ' + jqXHR.responseText);
} else {
console.log('Unexpected error.');
}
}
});
$(function() {
$('#text_editor_textarea').sceditor('instance').destroy();
});
});
For more advanced users, I leave the editor configuration guide link: https://docs.ckeditor.com/ckeditor4/latest/api/index.html
If you want to add an extra tab to host images on Servimg, read the following message: https://help.forumotion.com/t155678-tutorial-ckeditor#1071520
Enjoy!
Last edited by Daemon on May 8th 2018, 4:05 am; edited 6 times in total
Daemon- Forumember
- Posts : 104
Reputation : 91
Language : Português
Re: [Tutorial] CKEditor
i can confirm that works on punbb
the insert image button is way more advanced than here , spelling, dictionary and plenty more this is very good work and we thank you for sharing this with us
the insert image button is way more advanced than here , spelling, dictionary and plenty more this is very good work and we thank you for sharing this with us
Re: [Tutorial] CKEditor
Confirmed for PhpBB3 too. Nice work. Thanks for sharing.
If I may point out some suggestions, I'd suggest on the Insert An Image pop up, when you insert an image, the preview there under the image preview still says the text it was saying before. My suggestion is removing that part. I don't know if there's a lang in there somewhere but if not I'd suggest maybe in the future to add one!
Overall, excellent code. Thank you for sharing.
If I may point out some suggestions, I'd suggest on the Insert An Image pop up, when you insert an image, the preview there under the image preview still says the text it was saying before. My suggestion is removing that part. I don't know if there's a lang in there somewhere but if not I'd suggest maybe in the future to add one!
Overall, excellent code. Thank you for sharing.
Forum of the Forums Forumotion Rules | Tips & Tricks | FAQ | Did you forget your password? |
*** The Support Forum will never ask you for your email or password, so please do not post them anywhere! ***
No support via PM!
Re: [Tutorial] CKEditor
I appreciate your work, pretty neat.
I already saw this a while ago in the portuguese forum: CKEditor como editor do forum
An older version of CKEditor is being used there and the code also changes a little, but I noticed that one works better indeed.
The code provided there uses BBcode as an extra plugin instead of only HTML.
Also, this new version you posted seems to be adding too many line jumps and does not conserve the font size properly in some cases... at least in phpBB3.
Maybe both codes can be mixed to get the best of each one
I already saw this a while ago in the portuguese forum: CKEditor como editor do forum
An older version of CKEditor is being used there and the code also changes a little, but I noticed that one works better indeed.
The code provided there uses BBcode as an extra plugin instead of only HTML.
Also, this new version you posted seems to be adding too many line jumps and does not conserve the font size properly in some cases... at least in phpBB3.
Maybe both codes can be mixed to get the best of each one
Wecoc- Forumember
- Posts : 144
Reputation : 111
Language : Catalan, Spanish, English
Re: [Tutorial] CKEditor
I can confirm it works on ModernBB.
The one thing I do not see in this editor is the host an image button.
The one thing I do not see in this editor is the host an image button.
Lost Founder's Password |Forum's Utilities |Report a Forum |General Rules |FAQ |Tricks & Tips
You need one post to send a PM.
You need one post to send a PM.
When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
Re: [Tutorial] CKEditor
You can change the text as follows:Luffy wrote:Confirmed for PhpBB3 too. Nice work. Thanks for sharing.
If I may point out some suggestions, I'd suggest on the Insert An Image pop up, when you insert an image, the preview there under the image preview still says the text it was saying before. My suggestion is removing that part. I don't know if there's a lang in there somewhere but if not I'd suggest maybe in the future to add one!
Overall, excellent code. Thank you for sharing.
- Code:
CKEDITOR.replace('text_editor_textarea', {
image_previewText : CKEDITOR.tools.repeat('Modified text', 35 ) // Changing image preview text. 35 is the number of times the text will repeat in the preview
});
Last edited by Daemon on April 30th 2018, 6:28 pm; edited 1 time in total
Daemon- Forumember
- Posts : 104
Reputation : 91
Language : Português
Re: [Tutorial] CKEditor
@Daemon, once you add an image to the preview, the text remains in the preview. That's what I'm suggesting to be removed!
Forum of the Forums Forumotion Rules | Tips & Tricks | FAQ | Did you forget your password? |
*** The Support Forum will never ask you for your email or password, so please do not post them anywhere! ***
No support via PM!
Re: [Tutorial] CKEditor
If you refer to the text in the preview of the image, I believe it is there to show how the image will be in relation to the text in the editor.Luffy wrote:@Daemon, once you add an image to the preview, the text remains in the preview. That's what I'm suggesting to be removed!
Daemon- Forumember
- Posts : 104
Reputation : 91
Language : Português
Re: [Tutorial] CKEditor
Oh okay.. Then it's fine!!
Forum of the Forums Forumotion Rules | Tips & Tricks | FAQ | Did you forget your password? |
*** The Support Forum will never ask you for your email or password, so please do not post them anywhere! ***
No support via PM!
Re: [Tutorial] CKEditor
Do you have an English version? It is not in English for me. I mean the text in the image button.
Lost Founder's Password |Forum's Utilities |Report a Forum |General Rules |FAQ |Tricks & Tips
You need one post to send a PM.
You need one post to send a PM.
When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
Re: [Tutorial] CKEditor
SLGray wrote:Do you have an English version? It is not in English for me. I mean the text in the image button.
- Code:
CKEDITOR.replace('text_editor_textarea', {
language: 'en'
});
Daemon- Forumember
- Posts : 104
Reputation : 91
Language : Português
Re: [Tutorial] CKEditor
Thanks. Are you going to add the host an image button?
Lost Founder's Password |Forum's Utilities |Report a Forum |General Rules |FAQ |Tricks & Tips
You need one post to send a PM.
You need one post to send a PM.
When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
Re: [Tutorial] CKEditor
I'll try to do this as soon as i can!SLGray wrote:Thanks. Are you going to add the host an image button?
Daemon- Forumember
- Posts : 104
Reputation : 91
Language : Português
Re: [Tutorial] CKEditor
i get this message for copy/paste buttons all browsers
edit: https://github.com/ckeditor/ckeditor-dev/issues/595
edit: https://github.com/ckeditor/ckeditor-dev/issues/595
Re: [Tutorial] CKEditor
I just tried to add every preset I could like the madman I am. Many of these are not compatible with the forumotion's default behavior (for example the emoticon option) at least the way they work now, but just for testing purposes here they are.
Forget what I said before about those bugs, looks like all was needed to do was changing standard to standard-all in the url you were using.
And there's much more you could do, CKEditor has many options so this can truly be improved... I will keep an eye on this
- Code:
$(function() {
$.ajax({
type: "GET",
url: "http://cdn.ckeditor.com/4.9.2/standard-all/ckeditor.js",
dataType: "script",
success: function() {
CKEDITOR.replace("text_editor_textarea", {
language: "en",
extraPlugins: "bbcode,dialogadvtab,bidi,copyformatting,colorbutton,colordialog,templates,div,find,flash,font,forms,iframe,indentblock,smiley,justify,language,liststyle,newpage,pagebreak,preview,print,save,selectall,showblocks"
});
},
error: function (jqXHR, textStatus, errorThrown) {
if(jqXHR.status == 500) {
console.log("Internal error: " + jqXHR.responseText);
} else {
console.log("Unexpected error.");
}
}
});
$(function() {
$("#text_editor_textarea").sceditor("instance").destroy();
});
});
Forget what I said before about those bugs, looks like all was needed to do was changing standard to standard-all in the url you were using.
And there's much more you could do, CKEditor has many options so this can truly be improved... I will keep an eye on this
Wecoc- Forumember
- Posts : 144
Reputation : 111
Language : Catalan, Spanish, English
Re: [Tutorial] CKEditor
Done:SLGray wrote:Thanks. Are you going to add the host an image button?
- Code:
/*
* Application: CKEditor
* Date: 30/04/2018
* Version: 1.030042018
* Copyright (c) CKSource and Adapted to forumotion by Daemon <help.forumotion.com>
* This work is free. You can redistribute it and/or modify it
*/
$(function() {
$.ajax({
type: 'GET',
url: 'https://cdn.ckeditor.com/4.9.2/standard/ckeditor.js',
dataType: 'script',
success: function() {
CKEDITOR.replace('text_editor_textarea', {
extraPlugins: 'servimg'
});
CKEDITOR.dialog.add('servimg', function(editor) {
return {
title: 'Host an image',
minWidth: 540,
minHeight: 385,
contents: [{
elements: [{
type: 'html',
html: '<p><iframe id="obj_servimg" src="https://' + servimgDomain + "/multiupload.php?&mode=" + (typeof(servImgMode) == "undefined" || servImgMode == "" ? "fae" : servImgMode) + "&account=" + servImgAccount + '&id=' + servImgId + '&f=' + servImgF + '" style="height:385px;width:540px;" border="0"></iframe></p>'
}]
}],
buttons: [CKEDITOR.dialog.okButton]
};
});
CKEDITOR.plugins.add('servimg', {
init: function(editor) {
var command = editor.addCommand('servimg', new CKEDITOR.dialogCommand('servimg'));
editor.ui.addButton('ServImg', {
label: 'Host an image',
command: 'servimg',
toolbar: 'insert,10',
icon: 'https://i62.servimg.com/u/f62/18/12/37/46/image_11.png'
});
CKEDITOR.dialog.add('servimg', 'servimg');
}
});
},
error: function(jqXHR, textStatus, errorThrown) {
if(jqXHR.status == 500) {
console.log('Internal error: ' + jqXHR.responseText);
} else {
console.log('Unexpected error.');
}
}
});
$(function() {
$('#text_editor_textarea').sceditor('instance').destroy();
});
});
function onMessage(e) {
if(e.data.from === 'servimg') CKEDITOR.instances['text_editor_textarea'].insertText(e.data.data + '\n');
}
window.addEventListener('message', onMessage, true);
Last edited by Daemon on May 2nd 2018, 5:24 pm; edited 6 times in total
Daemon- Forumember
- Posts : 104
Reputation : 91
Language : Português
Re: [Tutorial] CKEditor
I read your message again and I believe you want to translate the text into the preview image. If this is the case, please read the post above: https://help.forumotion.com/t155678-tutorial-ckeditor#1071427SLGray wrote:I can confirm it works on ModernBB.
The one thing I do not see in this editor is the host an image button.
https://help.forumotion.com/t155678-tutorial-ckeditor#1071520SLGray wrote:Thanks. Are you going to add the host an image button?
Daemon- Forumember
- Posts : 104
Reputation : 91
Language : Português
Re: [Tutorial] CKEditor
@skouliki
I made an edit in the code for image upload: https://help.forumotion.com/t155678-tutorial-ckeditor#1071520
As for the copy/paste problem I will find a solution!
I made an edit in the code for image upload: https://help.forumotion.com/t155678-tutorial-ckeditor#1071520
As for the copy/paste problem I will find a solution!
Daemon- Forumember
- Posts : 104
Reputation : 91
Language : Português
Re: [Tutorial] CKEditor
Thanks for adding the host an image button.
Lost Founder's Password |Forum's Utilities |Report a Forum |General Rules |FAQ |Tricks & Tips
You need one post to send a PM.
You need one post to send a PM.
When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
Re: [Tutorial] CKEditor
Hello, i've installed it in my Spanish forum and it didn't worked.
I'm still seeing the Sceditor
Why ?
I'm still seeing the Sceditor
Why ?
Re: [Tutorial] CKEditor
Can you activate the code in your forum and send me a print from the browser console so I can check if there is an error?YoshiGM wrote:Hello, i've installed it in my Spanish forum and it didn't worked.
I'm still seeing the Sceditor
Why ?
Daemon- Forumember
- Posts : 104
Reputation : 91
Language : Português
Re: [Tutorial] CKEditor
https://help.forumotion.com/t155678-tutorial-ckeditor#1071499APE wrote:The color picker is also missing on the forum editor
Lost Founder's Password |Forum's Utilities |Report a Forum |General Rules |FAQ |Tricks & Tips
You need one post to send a PM.
You need one post to send a PM.
When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
Re: [Tutorial] CKEditor
Read and change: https://help.forumotion.com/t155678-tutorial-ckeditor#1071520
Daemon- Forumember
- Posts : 104
Reputation : 91
Language : Português
Re: [Tutorial] CKEditor
Thanks yes that ok now
just a general question ..all the java we have like change editor theme or admin presets that works with SCEditor are there a way to work also with CKEditor?
just a general question ..all the java we have like change editor theme or admin presets that works with SCEditor are there a way to work also with CKEditor?
Re: [Tutorial] CKEditor
Daemon wrote:Can you activate the code in your forum and send me a print from the browser console so I can check if there is an error?YoshiGM wrote:Hello, i've installed it in my Spanish forum and it didn't worked.
I'm still seeing the Sceditor
Why ?
Of course, here's the problem:
- Spoiler:
Page 1 of 2 • 1, 2
Similar topics
» [Help] CKeditor wont delete
» [Tutorial] Hovercard
» How can i put a tutorial on here?
» CSS Tutorial for your forums
» How to submit a tutorial
» [Tutorial] Hovercard
» How can i put a tutorial on here?
» CSS Tutorial for your forums
» How to submit a tutorial
Page 1 of 2
Permissions in this forum:
You cannot reply to topics in this forum