Thread Rating:
  • 0 Votes - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
 Using CKEditor With XThreads Textarea
RateU Offline
Administrator
*******
Posts: 2,350
Joined: Mar 2010
Post: #1
Using CKEditor With XThreads Textarea
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 Biggrin).

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 Biggrin

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).


(This post was last modified: 07-16-2011 09:23 AM by RateU.)
07-16-2011 08:53 AM
Find all posts by this user Quote this message in a reply

« Next Oldest | Next Newest »

Messages In This Thread
Using CKEditor With XThreads Textarea - RateU - 07-16-2011 08:53 AM

 Standard Tools
Forum Jump: