Making a textarea, TinyMCE
Permalink 3 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?
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?
you mean like this ?
No sorry I should clarify,
I have a Textare from the form helper,
But instead of just a plain text area I would like to add the ability to add basic WYSIWYG
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
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?
Can anyone tell me if I can use the default, C5 TinyMCE.js or has this been stripped down to the essentials?
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.)
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.
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
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.
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
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.
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.
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...
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
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
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!
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!
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...
http://www.concrete5.org/community/forums/customizing_c5/standard-c...
http://c5blog.jordanlev.com/blog/2012/04/new-in-concrete-5-dot-5-2-multiple-rich-text-editors-on-the-same-edit-page/
The guy who wrote the instruction there is a genius, especially with c5. If the insight in the post won't help you polish off the job, implementing TinyMCE, you might take a look around here for the guru.
The guy who wrote the instruction there is a genius, especially with c5. If the insight in the post won't help you polish off the job, implementing TinyMCE, you might take a look around here for the guru.
Thanks for the link :)
The Guru you refer to can indeed be found here
http://www.concrete5.org/profile/-/view/9756/...
This thread is a little out of date now, for blocks that need to include tinyMCE(In fact for most blocks) I now use Jordan's "Designer Content" it makes block creation a breeze.
You can find the block on the market place
http://www.concrete5.org/marketplace/addons/designer-content...
The Guru you refer to can indeed be found here
http://www.concrete5.org/profile/-/view/9756/...
This thread is a little out of date now, for blocks that need to include tinyMCE(In fact for most blocks) I now use Jordan's "Designer Content" it makes block creation a breeze.
You can find the block on the market place
http://www.concrete5.org/marketplace/addons/designer-content...
