Recent Topics

1 Aug 24, 2005 17:11    

I managed to integrate tinyMCE WYSIWYG editor easily into B2evolution

Before i spend to much time writing directions for other people i just wanted to get a feel if anybody else would be interested in a guide for this. If i get enough response ill put in the time.

The hack is not perfect (the spellchecker does not work 100%) but everything else is great.

You can check out tinyMCE at
http://tinymce.moxiecode.com/

2 Aug 24, 2005 17:22

I looked at their site. How are you planning to use this? I'm not sure what it's for. Is it a substitute for the backoffice Write toolbar?

4 Aug 24, 2005 20:57

Could you post the code the way it was before and the way it is now, including file name? I tried this a long time ago and got *HORRIBLE* results. If you've got a nice clean method I think I'd like to give it a go.

5 Aug 24, 2005 23:36

first things first you have to download tinyMCE to your computer or server and unzip
http://tinymce.moxiecode.com/download.php
Next you need to FTP or copy the folder tinymce that is extracted to the root directory of your webserver.

Thats all you need to do with tinyMCE no install necessary
a folder structure like this will be on you webserver

/tinymce/
/tinymce/docs/
/tinymce/docs/zh_cn/
/tinymce/examples/
/tinymce/examples/zh_cn/
/tinymce/jscripts/
/tinymce/jscripts/tiny_mce/
/tinymce/jscripts/tiny_mce/langs/
/tinymce/jscripts/tiny_mce/plugins/
/tinymce/jscripts/tiny_mce/plugins/<plugin folders>
/tinymce/jscripts/tiny_mce/themes/
/tinymce/jscripts/tiny_mce/themes/advanced/
/tinymce/jscripts/tiny_mce/themes/default/
/tinymce/jscripts/tiny_mce/themes/simple/

now open up the admin folder of b2evo and open the _edit_form.php file

after line 13 where you see

<script type="text/javascript" language="javascript">


copy in the text

<script language="javascript" type="text/javascript" src="../../../tinymce/jscripts/tiny_mce/tiny_mce_gzip.php"></script>


make note that the path in the code above has to be the real path

nowthis is how i initialize it is right underneath the code above you put. Mind you this initalizes the advanced theme of TinyMCE you can use the normal or basic themes by using the initialization scripts found in the manual llinked below

<script language="javascript" type="text/javascript">
tinyMCE.init({
	mode : "textareas",
	theme : "advanced",
	remove_linebreaks : false,
	relative_urls : false,
	remove_script_host : false,
	auto_cleanup_word : true,
	verify_css_classes : true,
	force_p_newlines : false,
	force_br_newlines : true,
	plugins : "table,save,advhr,advimage,advlink,emotions,iespell,insertdatetime,zoom,searchreplace,print,contextmenu",
	theme_advanced_buttons1_add_before : "save,separator",
	theme_advanced_buttons1_add : "fontsizeselect",
	theme_advanced_buttons2_add : "insertdate,inserttime,zoom,separator,forecolor,backcolor",
	theme_advanced_buttons2_add_before: "search,replace,separator",
	theme_advanced_buttons3_add_before : "tablecontrols,separator",
	theme_advanced_buttons3_add : "emotions,iespell,advhr,separator,print",
	theme_advanced_toolbar_location : "top",
	theme_advanced_toolbar_align : "left",
	theme_advanced_path_location : "bottom",
	plugin_insertdate_dateFormat : "%Y-%m-%d",
	plugin_insertdate_timeFormat : "%H:%M:%S",
	extended_valid_elements : "a[name|href|target|title|onclick],img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name],hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style]",
	external_link_list_url : "example_data/example_link_list.js",
	external_image_list_url : "example_data/example_image_list.js",
	flash_external_list_url : "example_data/example_flash_list.js"
});
</script>

This code will make the main textbox in the posts page now use tinyMCE. you can use different kinds of tinyMCE such as the advanced normal and basic mode. The code above is for the advanced mode.
You can read the really good info about the commands above in the docs folder in the download.

If you have any questions feel free to ask

Also wanted to mention that there was an issue that b2evo loves closing tags that are not closed. This is uncessesary since TinyMCE validates the code for you. you can change this in the conf/_formatting.php file around line 21

also for more example on how to use the code look at the manual online
http://tinymce.moxiecode.com/tinymce/docs/index.html

Thats it

6 Sep 05, 2005 03:22

I had some problem after I implement TinyMCE into my blog, when I click those old button <!M>, it's popup the error message like : Can't move focus to the control because it is invisible, not enabled, or of a type that does not accept the focus.

Can anyone help on this problem

7 Nov 03, 2005 04:57

I need some help with tinymce.

I have read all the instructions and if I put this line above the example

<script language="javascript" type="text/javascript">

Then this dumps the script text on the post screen.

If I put <script language="javascript" type="text/javascript"> under like it seems to suggest on the FAQ then I get a blank page in the post tab.

I have tried endless combinations.

I have the tinymce folder in what I would call the root folder where you can also see the public_html folder.

Any help apreciated, reveal my ignorance.

This is what I currently have in the file that dumps the script on the screen.

<?php
/**
* Displays post editing form
*
* b2evolution - {@link http://b2evolution.net/}
* Released under GNU GPL License - {@link http://b2evolution.net/about/license.html}
* @copyright (c)2003-2004 by Francois PLANQUE - {@link http://fplanque.net/}
*
* @package admin
*/
if( !defined('DB_USER') ) die( 'Please, do not access this page directly.' );
?>
<script language="javascript" type="text/javascript">
<script language="javascript" type="text/javascript" src="/tinymce/jscripts/tiny_mce/tiny_mce_gzip.php"></script>
tinyMCE.init({
mode : "textareas",
theme : "advanced",
remove_linebreaks : false,
relative_urls : false,
remove_script_host : false,
auto_cleanup_word : true,
verify_css_classes : true,
force_p_newlines : false,
force_br_newlines : true,
plugins : "table,save,advhr,advimage,advlink,emotions,iespell,insertdatetime,zoom,searchreplace,print,contextmenu",
theme_advanced_buttons1_add_before : "save,separator",
theme_advanced_buttons1_add : "fontsizeselect",
theme_advanced_buttons2_add : "insertdate,inserttime,zoom,separator,forecolor,backcolor",
theme_advanced_buttons2_add_before: "search,replace,separator",
theme_advanced_buttons3_add_before : "tablecontrols,separator",
theme_advanced_buttons3_add : "emotions,iespell,advhr,separator,print",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_path_location : "bottom",
plugin_insertdate_dateFormat : "%Y-%m-%d",
plugin_insertdate_timeFormat : "%H:%M:%S",
extended_valid_elements : "a[name|href|target|title|onclick],img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name],hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style]",
external_link_list_url : "example_data/example_link_list.js",
external_image_list_url : "example_data/example_image_list.js",
flash_external_list_url : "example_data/example_flash_list.js"
});
</script>

Thanks

8 Nov 03, 2005 15:17

agent86 wrote:

<script language="javascript" type="text/javascript"> Your problem is here you need to move this line down to where you see the red text below
<script language="javascript" type="text/javascript" src="/tinymce/jscripts/tiny_mce/tiny_mce_gzip.php"></script>
MOVE THE ABOVE LINE HERE
tinyMCE.init({
mode : "textareas",
theme : "advanced",
remove_linebreaks : false,
relative_urls : false,
remove_script_host : false,
auto_cleanup_word : true,
verify_css_classes : true,
force_p_newlines : false,
force_br_newlines : true,
plugins : "table,save,advhr,advimage,advlink,emotions,iespell,insertdatetime,zoom,searchreplace,print,contextmenu",
theme_advanced_buttons1_add_before : "save,separator",
theme_advanced_buttons1_add : "fontsizeselect",
theme_advanced_buttons2_add : "insertdate,inserttime,zoom,separator,forecolor,backcolor",
theme_advanced_buttons2_add_before: "search,replace,separator",
theme_advanced_buttons3_add_before : "tablecontrols,separator",
theme_advanced_buttons3_add : "emotions,iespell,advhr,separator,print",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_path_location : "bottom",
plugin_insertdate_dateFormat : "%Y-%m-%d",
plugin_insertdate_timeFormat : "%H:%M:%S",
extended_valid_elements : "a[name|href|target|title|onclick],img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name],hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style]",
external_link_list_url : "example_data/example_link_list.js",
external_image_list_url : "example_data/example_image_list.js",
flash_external_list_url : "example_data/example_flash_list.js"
});
</script>

Thanks

Hope that helps

9 Nov 04, 2005 03:45

Ok I did the above change and I get the standard write page in b2.

I then noticed a file name in the path tiny_mce_gzip.php was missing. I then downloaded that and put that in the correct folder. Still the same.

Any other clues?

10 Nov 04, 2005 15:07

agent86 wrote:

Ok I did the above change and I get the standard write page in b2.

I then noticed a file name in the path tiny_mce_gzip.php was missing. I then downloaded that and put that in the correct folder. Still the same.

Any other clues?

Hey there,
Youll notice in my example i used a relative link note all the "../" which move you back from the B2evo admin folder back to the root. I dont remember why i needed them but it did not work if i use a defined link like you did in your code. You might want to try that.

11 Nov 05, 2005 03:44

Tried that before and now again and still no luck. It seems as though the script is being totaly ignored or if I change the position of <script language="javascript" type="text/javascript"> then I just get the script dumped to the window. I just don't know enough about js to know what I should see.

I started with a fresh _edit_form.php

I deleted tinymce and downloaded the latest version off the site and uploaded it just incase there was some corruption or I missed something but still no go.

Any more ideas?

12 Nov 05, 2005 17:11

Under my experience TinyMCE is not the best WYSIWYG editor, as it does have some issues being inside tables in IE 6, and it needs to load 400 files each time it apears.

I've used it many times for a few CMSs ive done for clients.

13 Nov 05, 2005 22:49

Thanks balupton but you don't mention what is better?

14 Nov 07, 2005 12:47

Ok found the fault.

The original instructions were correct but what I posted I and others missed.

<script language="javascript" type="text/javascript" src="/tinymce/jscripts/tiny_mce/tiny_mce_gzip.php"></script>

at the end there is a extra "

I found it by looking in my server logs.

Also I had to put the file into my html directory and not root directory.

Result that worked is.

<script language="javascript" type="text/javascript" src=http://www.iansbrainstorm.com/tinymce/jscripts/tiny_mce/tiny_mce.js></script>

Thanks for all the effort put in though as I would never have gotten this far without the assistance received.

15 Nov 07, 2005 13:20

Spoke too soon. This now breaks the spell check and preview. You can click on the buttons but they don't work :(

16 Nov 07, 2005 13:33

yer, i havent found anything better (well free anyway)

About whats wrong with your code, in the 2nd bit change:
src=http://www.iansbrainstorm.com/tinymce/jscripts/tiny_mce/tiny_mce.js
to
src="http://www.iansbrainstorm.com/tinymce/jscripts/tiny_mce/tiny_mce.js"

And usually with TinyMCE you need to include alot of variables...

17 Nov 07, 2005 14:22

Ok that worked but still no spell checker. I think I will just use blogjet or simular. The only thing missing in clients is they seem to put links in rather than add them to the link to url field. I guess that is too specific for a general purpose client.

18 Jan 28, 2006 17:55

Hi

I have successfully integrated tinyMCE (thanks for the tutz) and have make some changes...

Now, all work (preview...) except the button "load image".

How i can say to b2upload.php that the button "add code to ..." have to add code in the tinyMCE form ?

Thanks and sorry for my bad english :)

19 Jan 28, 2006 19:39

there should be a javascript function that is included in tinymce config file or whatever that handles the image stuff.

20 Jan 28, 2006 22:55

ok work fine now .... thanks! :)

21 Feb 11, 2006 11:54

Does anyone has tested it under Phoenix 1.6 Alpha?
Before I risk to f*ck myself (and the website), I'd like to know if the switch is possible.

Thank you people (if it works, it would be a GREAT hint... In my opinion, the thing b2evo most misses is a wysiwyg editor).

Francesco

UPDATE: Ok, it works. Instead of modifying _edit_form.php, you must edit _item_form.php.
I inserted these lines at line number 174:

<script language="javascript" type="text/javascript" src="../tinymce/jscripts/tiny_mce/tiny_mce.js"></script>
<script language="javascript" type="text/javascript">
tinyMCE.init({
mode : "textareas",
theme : "advanced",
remove_linebreaks : false,
relative_urls : false,
remove_script_host : false,
auto_cleanup_word : true,
verify_css_classes : true,
force_p_newlines : false,
force_br_newlines : true,
plugins : "table,save,advhr,advimage,advlink,emotions,iespell,insertdatetime,zoom,searchreplace,print,contextmenu",
theme_advanced_buttons1_add_before : "save,separator",
theme_advanced_buttons1_add : "fontsizeselect",
theme_advanced_buttons2_add : "insertdate,inserttime,zoom,separator,forecolor,backcolor",
theme_advanced_buttons2_add_before: "search,replace,separator",
theme_advanced_buttons3_add_before : "tablecontrols,separator",
theme_advanced_buttons3_add : "emotions,iespell,advhr,separator,print",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_path_location : "bottom",
plugin_insertdate_dateFormat : "%Y-%m-%d",
plugin_insertdate_timeFormat : "%H:%M:%S",
extended_valid_elements : "a[name|href|target|title|onclick],img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name],hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style]",
external_link_list_url : "example_data/example_link_list.js",
external_image_list_url : "example_data/example_image_list.js",
flash_external_list_url : "example_data/example_flash_list.js"
});
</script> 
</script>


The only thing b2evo misses now it misses no more :D

22 Mar 02, 2006 20:10

I can't get Upload file/image button to work. When I click on the button, nothing pops up. Any ideas? I am using b2evo 0.9.1. Thanks.

23 Mar 06, 2006 05:52

Did u follow this hack to integrate tinymce?

24 Mar 08, 2006 00:06

I got the upload form to pop up but it doesn't add the code to the text box after uploading :(.. any ideas?

25 Jun 08, 2006 03:07

plopzz wrote:

Hi

I have successfully integrated tinyMCE (thanks for the tutz) and have make some changes...

Now, all work (preview...) except the button "load image".

How i can say to b2upload.php that the button "add code to ..." have to add code in the tinyMCE form ?

Thanks and sorry for my bad english :)

Plopzz found a solution for this problem but he didn't say what it was. I can't make it work. I can't find any option in TinyMCE that make it accept the button "load image". Does anyone have a solution?

I have another problem: TinyMCE is a really heavy editor. Does somebody know another editor that is using fewer files (I want to use it for a multiblog and I don't want TinyMCE to make the server to bug ;)

Thanks for your answer,

Korbn

26 Aug 03, 2006 06:05

Just a side note, I've found FCKEditor to be WAYYYY better than TinyMce and its free (including a filemanager and uploader)

http://www.fckeditor.net/

I used TinyMce and a buch of clients had a lot of problems (specially in IE) and then upgraded all of my clients to FCKedtior no problems whatsoever as of today.

Shanti

28 Aug 05, 2006 13:36

The problem with TinyMCE is that it loads about a hundred files, which never cache, and this can be a real problem for some users. TinyFCK doesn't help this. And their is already a file manager in b2evolution.

There is a TinyMCE plugin in the works, you can get it from the evoplugins svn system.


Form is loading...