Using CKEditor With XThreads Textarea

[RateU]

This is an experimental only for using an editor for some of XThreads textarea (Multiline Textbox) that have Use MyBB Parser (MyCode) enabled in Display Parsing setting. In this experiment, we will try to use CKEditor (I don't know how to use the default MyBB editor more than once at the same page ).

Put the CKEditor into our MYBB_ROOT/ckeditor/ folder. We don't need to upload all of the files from the package.

At our newthread/template_prefix_newthread/editpost_first/template_prefix_editpost_first or/and forumdisplay_quick_thread/template_prefix_forumdisplay_quick_thread template, where we want to use the editor, put this code before the </head> tags:

Javascript Code

<script type="text/javascript" src="ckeditor/ckeditor_basic.js"></script>

---

Then, the simplest way is (I think), we only need to put this kind of code at the templates above, before the </form> tags:

Javascript Code

<script type="text/javascript"> CKEDITOR.replace('xthreads_key'); </script>

---

Where the key is the XThreads textarea (Multiline Textbox) custom thread field key.

For example, if we have ta1 as the key for the textarea, then we need to put this code:

Javascript Code

<script type="text/javascript"> CKEDITOR.replace('xthreads_ta1'); </script>

---

The editor supports for more than one textareas at the same page.
Example:

Javascript Code

<script type="text/javascript"> CKEDITOR.replace('xthreads_key1'); CKEDITOR.replace('xthreads_key2'); </script>

---

Then, we need to edit the ckeditor/config.js file. The settings depend on our needs. All settings in this file will be act as default settings. So, if we want a different settings for each textarea, probably we don't need to put it here.
Example:

Javascript Code

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35

/* Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved. For licensing, see LICENSE.html or http://ckeditor.com/license */ CKEDITOR.editorConfig = function( config ) { // Define changes to default configuration here. For example: config.disableObjectResizing = true; config.language = 'en'; config.extraPlugins = 'bbcode'; config.removePlugins = 'bidi,button,dialogadvtab,div,filebrowser,flash,format,forms,horizontalrule,iframe,indent,justify,liststyle,pagebreak,showborders,stylescombo,table,tabletools,templates'; config.smiley_path = './images/smilies/'; config.smiley_images = [ 'smile.gif','sad.gif','wink.gif','biggrin.gif','tongue.gif','blush.gif', 'confused.gif','angel.gif','cool.gif' ]; config.smiley_descriptions = [ 'smiley', 'sad', 'wink', 'laugh', 'cheeky', 'blush', 'indecision', 'angel', 'cool' ]; config.toolbar = [ ['Source', '-', 'Save','NewPage','-','Undo','Redo'], ['Find','Replace','-','SelectAll','RemoveFormat'], ['Link', 'Unlink', 'Image'], '/', ['Bold', 'Italic','Underline'], ['NumberedList','BulletedList','-','Blockquote'], ['TextColor', '-', 'Smiley','SpecialChar', '-', 'Maximize'] ]; // config.uiColor = '#AADC6E'; };

---

It will loads the default BBCode editor for our XThreads textarea.

Well, that's our experimental

Screenshot:
New Thread:
   

Preview Post:
   

Post (after the thread posted):
   

Edit Thread:
   

Thread Result:
http://www.14.mynie.co.cc/showthread.php?tid=414
(The text in Tabs 2 and Tabs 3 using XThreads textarea + CKEditor).

Try it:
http://www.14.mynie.co.cc/newthread.php?fid=33
(The CKEditor is in Tabs 2 and Tabs 3).

[ZiNgA BuRgA]

Haven't actually tried this, but thanks for posting RateU - looks awesome!

[RateU]

Thanks, Yumi

[Gypaete]

Thanks, very well RateU!