Making a textarea, TinyMCE

Permalink 2 users found helpful
I have a number of textarea's that I would like to convert to WYSIWYG editors.

Can anyone tell me how to do this the C5 way?

and anything I may need to strip when saving back to the db?, I have taken a quick look in the content block but I think thats far too much for what I need.

I would just like to call a basic editor for each textarea on the page?

Tags:

tinymce, standard widgets, widgets
TheRealSean
View Replies: View Best Answer
12345j replied on at Permalink Reply
12345j
you mean like this 
<?php
    $a = new Area('Main');
    $a->display($c);
?>
?
TheRealSean replied on at Permalink Reply
TheRealSean
No sorry I should clarify,

I have a Textare from the form helper, 

$form->textarea();
<textarea class='tinymce'>$text</textarea>

But instead of just a plain text area I would like to add the ability to add basic WYSIWYG
TheRealSean replied on at Permalink Reply
TheRealSean
Has anyone used there own TinyMCE editor over the Content window?

Can anyone tell me if I can use the default, C5 TinyMCE.js or has this been stripped down to the essentials?
TheRealSean replied on at Permalink Best Answer Reply
TheRealSean
I have managed to get TinyMCE into my site not to sure if this is the best way to do it?, and I assume this could be moved to the auto.js file of a block? As this version is only a simple version using only the base path as a customised value.

I have a page which is loaded via ajax, its a tab in the edit/add Dialog of the block.

I placed this in the top of the php page that is being called in. (In edit mode tinymce.js is already loaded so no need to load a new version.)

<!-- Load TinyMCE -->
<script language="javascript">
tinyMCE.init({
   mode : "textareas",
   width: "100%", 
   height: "100px",    
   inlinepopups_skin : "concreteMCE",
   theme_concrete_buttons2_add : "spellchecker",
   relative_urls : false,
   document_base_url: '<?php echo BASE_URL . DIR_REL?>/',
   convert_urls: false,
   plugins: "paste,inlinepopups,spellchecker,safari",
   theme : "advanced",
   theme_advanced_toolbar_location  : "top",
   editor_selector : "ccm-advanced-editor",
Viewing 15 lines of 26 lines. View entire code block.



For the textarea I added the a class to allow TinyMCE to do its magic and actually replace the textarea with the WSYSIWYG editor. I add the extra class instead of using the existing class as I already have a textarea on the page and only want to replace this version.
<?php  echo $form->textarea("textareaID", $details, array('class'=>"ccm-advanced-editor")); ?>


When echoing out do not use the htmlspecialchars, as this will display your inserted tags <p>Around your content</p>

[edit]
If anyone knows of a better way or can improve this please let me know, I dont like to mark my own answer as the best, when I don't know if it is actually the best way to do it?? But in this instance it works so until a better solution appears :) Ill mark this as the best
fastcrash replied on at Permalink Reply
fastcrash
hi seanom, thats cool, so helpull thanks.
althought you answer your own question.
if i am not wrong, when you add textarea in attribut, you can choose the type editor you want, from simple to custom.

btw, i have seen that code when i added teaxtarea, but i dont know where to find the file? the minimal editor width is 580px, but mypage only 500px, thats why i cannot change the width minimal.

where should i can change the width tiny mce?
i just want to hardcore it.

thanks.
TheRealSean replied on at Permalink Reply 1 Attachment
TheRealSean
Hi Fastcrash,

I did attempt to look at the ability to have tinyMCE attributes when adding it via the back end but could not find much information on it. In the end a custom implementation worked better as I could cut out everything I did not need.

As for the width Problem you have

The TinyMCE is loaded from the content block,

root_you_site/concrete/blocks/content/editor_config.php

There is a few lines at the top that set that minimum, you could change the $textEditorWidth to be 500, allthough this may cause problems with the layout.

I would suggest if you are going to edit this to use the custom version. SO you can remove all unnecessary buttons.
There is a thread below with some nice custom options, but you may need to trim some to these down too?
http://www.concrete5.org/index.php?cID=16217...

<?php 
$textEditorWidth=intval(Config::get('CONTENTS_TXT_EDITOR_WIDTH'));
$textEditorHeight=intval(Config::get('CONTENTS_TXT_EDITOR_HEIGHT'));
if($textEditorWidth<580)   $textEditorWidth=580;
//else $textEditorWidth=  $textEditorWidth;
if($textEditorHeight<100)  $textEditorHeight=380;
else $textEditorHeight= $textEditorHeight-70;
?>

My code above gives me a box at around 150px wide, I have it 100%, so that I can add and remove buttons without needing to adjust this(I also display it within a table cell so it does not display as full page width. img attached)

Hope some of it helps

Sean
fastcrash replied on at Permalink Reply
fastcrash
thanks sean, it's a big help.
i search one night to find that javascript width setting, i thought it's under '/js/tiny_mce', but i wrong. :(
Shame me, don't think it before it's under '/concrete/block/content/editor_config.php'

i experience with ckeditor but never use tinymce.

thanks!
TheRealSean replied on at Permalink Reply
TheRealSean
I have also been made aware of a thread which explains a simple method for adding TinyMCE to your block

http://www.concrete5.org/community/forums/customizing_c5/standard-c...