Forums

Enable tinyMCE in a textarea

Permalink
I'm building my own block and I'm having trouble to setup tinyMCE in it.
What should I do? I want one like the "content" block. I took a look at the code but I'm not being able to put it in the textarea from my block.
Thanks in advance,

Lucas Lobosque.
 
smallgoodthing replied on at Permalink Reply
Yo. I'm not sure this is the best way to do this, but to answer your question here's my solution:


1. Forget everything you know about Concrete5's implementation of tinyMCE Rich Text Editor, and go to tinyMCE's "Try it" website (http://tinymce.moxiecode.com/tryit/full.php).

2. There, click "View Source" and copy the code.

3. Add the code either as a block on the front-end or to a script in yoursite.com/single_pages/yourpage.php (you should find this file at concrete/single_pages/..., then just copy yourpage.php to yoursite.com/single_pages/...).

4. If at this point it's still not working, modify to your liking the following code and then add it between <div> tags in the body of yourpage.php:

<div>
<script type="text/javascript" src="/js/tinymce/jscripts/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
tinyMCE.init({
        // General options
        mode : "textareas",
        theme : "advanced",
        plugins : "spellchecker,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",
        // Theme options
        theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect",
        theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
        theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
        theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,spellchecker,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,blockquote,pagebreak,|,insertfile,insertimage",
        theme_advanced_toolbar_location : "top",
        theme_advanced_toolbar_align : "left",
Viewing 15 lines of 42 lines. View entire code block.


[code][/code]
jordanlev replied on at Permalink Reply
jordanlev
Hi. TinyMCE is a beast -- definitely not easy to work with. I think your best bet would be to copy the built-in "content" block and modify it from there (so instead of building your block and then adding a TinyMCE editor, you should start with a copy of the Content block and add in your custom functionality).

You could also download the free "Content Around Image" block from the marketplace, which integrates a TinyMCE editor.

Note that both of those blocks have a lot of code which deals with filtering the saved html (so that things like links to other site pages are given the proper URL).

I'm thinking about building a block that utilizes the TinyMCE editor myself, but it's definitely going to be a challenge -- please post back here with any insights you gain in the process!

-Jordan
jordanlev replied on at Permalink Reply
jordanlev
In response to smallgoodthing, I would say that using the TinyMCE editor on its own might be easier to develop with, but you're going to lose a very important feature which is the ability to integrate the C5 site map and file manager (those "Insert Page Link", "Insert File", etc. links at the top of the editor).
This might be good enough if you're just building this block for yourself or a client, but it's not going to work well if you plan on putting this up on the marketplace.