One of the more frustrating thing about a web application is that you can never truly duplicate rich text formatting capabilities of a desktop client.  And when you’re web enabling a Lotus Notes application, the difference becomes even more obvious.  Luckily, there are various very light JavaScript text editors, which offer more functionality than the standard out-of-the-box Domino text editor.  One of those editors is a very popular TinyMCE.

TinyMCE is used by many different web content managers, including Django, Drupal, Joomla and this very site — WordPress.  And you can use it inside of your Domino applications.  (I know that some folks been doing this for years, but since I’ve never used a 3-rd party editor in my applications before, so this is new to me.)

The nice thing about TinyMCE is that it is a lightweight WISYWIG editor, which is platform independent.  It is easy to integrate into any application with only few lines of  code.  And it runs under pretty much any browser.

1. So, first of all, go here and download the latest version of TinyMCE.  You can even download various language packs, if you need a different language version of the editor.
2. Extract the downloaded zip file and copy its contents to the html directory of your Domino server.  It might be something like d:\lotus\domino\data\domino\html.  The default directory name will be tinymce.  You can rename it, if you like, just remember what it is as you will need to reference it in the initialization code of your form.
3. Next, build your form.  The easiest way to deploy a TinyMCE editor is to have hook into any text area on your form.  So create at least 1 RichText field.  If you want to control its appearance, you can use the style field on the HTML property tab.
   
4. Now, you’re ready to add TinyMCE to your form.  In the HTML Head section of the form, add this 1 line of code:
   “<script type=\”text/javascript\” src=\”/tinymce/jscripts/tiny_mce/tiny_mce.js\”></script>”
   Make sure that the path to you editor matches your directory structure, in case you renamed it for whatever reason.
5. Add the function to initialize the editor to the JS Header section of the form.  The function below loads the TinyMCE editor with all available options and buttons.  The beauty of this editor is that you can truly control what options and abilities you will give to your users.  Things like a spell checker, for example, are a must.  But you may not want to allow your users to create tables.

tinyMCE.init({

mode : “textareas”,

theme : “advanced”,

plugins : “safari, pagebreak, style, layer, table, save, advhr, advimage, advlink, emotions, iespell, inlinepopups, insertdatetime, preview, media, searchreplace, print, contextmenu, paste, directionality, fullscreen, noneditable, visualchars, nonbreaking, template, wordcount”,

// 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, |, cite, abbr, acronym, del, ins,attribs,|,visualchars,nonbreaking,template,pagebreak”,

theme_advanced_toolbar_location : “top”,

theme_advanced_toolbar_align : “left”,

theme_advanced_statusbar_location : “bottom”,

theme_advanced_resizing : true

// content_css : “styles/editor.css”

})

6. Lastly, include the TinyMCE save function in your Submit code.
   tinyMCE.triggerSave(false, false);
7. You’re pretty much done.

Now, keep in mind, that the text coming out of TinyMCE will be all HTML formatted.  This is not something that will look good opened in the Notes client, so, primarily, this works well for web only applications.  For applications used both in the browser and in the client, you may want to do some MIME to RichText conversion.

emotion_at_tiny_image

Para web developer sekarang, tentu sudah tidak asing lagi sama TinyMce. TinyMce merupakan  salah satu open source WYSISYG (What You See Is What You Get) editor.  Dengan editor ini pada web, pengunjung web bisa mengetik tulisan dan mengeditnya seperti pada Ms. Word. TinyMce diterapkan pada tag textarea (<textarea >) pada HTML. Dengan sedikit konfigurasi khusus dengan settingan web kamu, maka textarea otomatis bisa berubah jadi text editor sederhana.

Yang penulis mau share kali ini yaitu gimana caranya nambah emotion di toolbar TinyMce versi 3.2.1.1 (advance theme). Secara default, di  theme ini cuman ada16 emotion. 

Nah, dengan cara berikut ini, kamu bisa nambah bahkan kasih style emotion kamu sendiri ke dalam TinyMce yang diterapin di web kamu.

1. Masuk ke folder \tiny_mce\plugins\emotions\img. Di sinilah folder gambar disimpan. Paste gambar” yang akan ditambah ke sini. Misal ini gambar yang maw ditambahkan.
   

   example emotion files

    

    

    

    

2. Buka file \tiny_mce\plugins\emotions\langs\en_dlg.js. Tambahkan baris berikut di antara kurung kurawal ‘{}’ : 
   happy:"Happy",
   bearing:"Bearing",
   coldsweats:"Coldsweats",
   confident:"Confident" 

    

3. Lalu buka file \tiny_mce\plugins\emotions\emotions.htm. Di dalam tag table, tambah 1 baris 4 kolom yang akan diisi dengan gambar yang baru. Copy 1 set <tr>(dari <tr> sampe </tr>), lalu paste dan edit sesuai dengan konfigurasi yang sudah kita lakukan di atas :
   <tr>     <td><a href="javascript:EmotionsDialog.insert('bearing.gif','emotions_dlg.bearing');"><img src="img/bearing.gif" width="18" height="18" border="0" alt="{#emotions_dlg.bearing}" title="{#emotions_dlg.bearing}" /></a></td>    

   <td><a href="javascript:EmotionsDialog.insert('coldsweats.gif','emotions_dlg.coldsweats');"><img src="img/coldsweats.gif" width="18" height="18" border="0" alt="{#emotions_dlg.coldsweats}" title="{#emotions_dlg.coldsweats}" /></a></td>

   <td><a href="javascript:EmotionsDialog.insert('confident.gif','emotions_dlg.confident');"><img src="img/confident.gif" width="18" height="18" border="0" alt="{#emotions_dlg.confident}" title="{#emotions_dlg.confident}" /></a></td>

   <td><a href="javascript:EmotionsDialog.insert('happy.gif','emotions_dlg.happy');"><img src="img/happy.gif" width="18" height="18" border="0" alt="{#emotions_dlg.happy}" title="{#emotions_dlg.happy}" /></a></td>

     </tr>

4. Tadaaa…. Emotions pun nambah, jadi seperti ini deh : 
   

   Hasil tambahan emotion

5. Sekarang, kita sudah bisa menyertakan smiley itu di tulisan yang akan diposting :

Gampang kan??? ^^  Selamat mencoba!!

Drupal ver. 5.x

Dopo aver speso diverso tempo a smanettare con IMCE, decido che l’interfaccia non mi piace, ma soprattutto non permette la facile interazione con le immagini. In questo senso molto meglio il modulo Image che permette di creare nodi come immagini, risolvendo l’imbarazzante problema dell’inserimento inline di immagini caricate.
Insieme al modulo Image ho installato il modulo Image assist (5.x-2.0-alpha4) e speso giorni alla ricerca dell’integrazione con FCKEditor (5.x-2.3), sia tramite il modulo wysiwyg API, sia senza. Il problema era l’inserimento inline dell’immagine nell’editor.

L’integrazione tra i due moduli dovrebbe avvenire copiando il file img_assist_fckeditor.js dalla cartella dei plugin di fckeditor alla cartella del modulo img_assist. Purtroppo, anche se posso accedere a img_assist tramite l’editor, non si riesce a inserire l’immagine inline. Succede una cosa strana: viene attivato il pulsante img_assist sulla barra di fckeditor, e disabilitato quello di defualt, sotto il textbox. Invece, disabilitando l’editor rich-text, posso accedere a img_assist tramite il pulsante sotto il textbox, che ricompare per magia, e mi permette di inserire l’immagine attraverso il tag inline. Tornando alla versione rich-text però non vedo l’immagine, che però una volta pubblicata è visibile. Scopro che non è un problema comune e provo diverse soluzioni, smanetto con i formati di input, installo il modulo Inline, dello stesso mantainer di Img_assist, installo la versione 1.x di img_assist, provo a debuggare il codice da me, ma le mie competenze informatiche di php e java sono ancora troppo “misto mare”. L’errore java che mi compare (usando IE) è “Line 84. Char 5. Error: Can’t move focus to the control because it is invisible, not enabled, or of a type that does not accept the focus. Code:0″ , cercare su google non serve molto.

Il problema da risolvere è: come inserire facilmente immagini nel testo? Il modulo inline non è male e assomiglia all’inserimento di wordpress, tuttavia o si caricano le immagini tramite l’upload di drupal (creando il fastidioso effetto attach, che non mi piace), oppure si mischia l’upload di img_assist e inline, ma mi sa troppo di soluzione di ripiego.

Alla fine, bando alle ciance, installo TinyMCE tramite wysiwyg API. Questo permette l’integrazione nativa con img_assist, risolvendomi ogni problema. Tengo installato il modulo inline che potrà tornare comunque utile in futuro. Inoltre grazie all’API ho attualmente installato: TinyMCE, FCKEditor, OpenWYSIWYG, cercando di tenermi aperte diverse possibilità quando capirò le necessità degli utenti.

Prossimo problema: gallerie di immagini (in prova la funzione del modulo Image) e personalizzazione del titolo dei blog (diamine, pare un banale problema mai risolto).

TinyMCE rich-editor have a plugin to provide Ajax-spell-checking functionality. See the link to TinyMCE plugin documentation
So, if you have a PHP and PSPell/ASpell on your server – then you are fine and you can use them, but this post is about the situation then you don’t have them or want to use your own implementation. In that case we can configure “spellcheck” plugin to use our own service.
What we have to do is to create a webservice compatible with the “TinyMCE spellchecker plugin” and configure spellcheck with the URL to that service. Because of browser security reasons this service should be hosted on the same domain as the application which use it (ajax calls can be blocked if requested URL is on another domain then your page). And since we are using java then we can use open-source Jazzy spellchecker library to implement spell-checking functions required by the TinyMCE spellchecker plugin

tinyMCE.init({
	theme : "advanced",
	mode : "textareas",
	plugins : "spellchecker",
	theme_advanced_buttons3_add : "spellchecker",
	spellchecker_languages : "+English=en,Swedish=sv"
        spellchecker_rpc_url    : "/spellchecker/jazzy-spell-check", //spellcheck url
});

In the configuration example above we set the link to our splechecker-service-url with the “spellchecker_rpc_url : “/spellchecker/jazzy-spell-check”;”
“/spellchecker/jazzy-spell-check” will be served by the servlet which use Jazzy project.
TinyMCE spellchecker plugin send JSON request to spellchecker_rpc_url with two possible methods:

1. checkWords – send the array of words as params attribute and expect the JSONArray of misspelled words in the result JSON-response attribute.
2. getSuggestions – send the checked word as the first and only element of params attribute and expects the JSONArray of suggested words the result JSON-response attribute.

So, when user click on “check spellcheck” button, plugin get the list of words and send them as the JSON request, with two parameters “method”=”checkWords” and “params”=”JSONArray(words)”. Servlet return the list of misspelled words in the JSON-response "{'id':null,'result': JSONArray(misspelled-words),'error':null}" , misspelled words are highlighted and once user click on one of them – request to get the list of suggested words is send to the server. “method”=”getSuggestions” and “params”=”JSONArray(checked-word)” . Server return the "{'id':null,'result': JSONArray(word-suggestions),'error':null}" JSON-response and list of suggestions is displayed to the user.

Update: You can see the backend java source code at the jspellchecker sourceforge project. SVN is accessible via “svn co https://jspellchecker.svn.sourceforge.net/svnroot/jspellchecker jspellchecker” or you can browse source-code . Please take a notice that source-code doesn’t include dictionaries. The dictionaries are located in the /WEB-INF/dictionary/${lang}-${country-code}.
Special thanks to the Rich Irwin who initially provide me the code.
The quality of spell-checking with jazzy depends on the quality of your dictionary. I think it possible to get thelist of words from Mozilla Dictionaries by saving XPI and opening it as ZIP file, saving dictionary file and remove “/xyz” from the end of the words, but please check the licensing notice before. You can also extract dictionaries form aspell (have no details how to do it)

یکی از تصمیمات مهمی که هر توسعه دهنده وب هنگام ایجاد یک وب سایت خواهد گرفت، همانا انتخاب یک ویرایشگر متن مناسب است. بسیاری از سیستم های مدیریت محتوای تحت وب، برای تولید محتوای متنی، ویرایشگرهایی با امکانات قالب بندی متون غنی (Rich Text) به کاربرانشان ارائه می دهند. نمونه های این ویرایشگرها را در هنگام نوشتن مطلب جدید در وبلاگ هایتان دیده اید. به طور مثال وردپرس، برای ایجاد مطلب یا صفحه، یک ویرایشگر با امکانات قالب بندی متن، درج تصویر و لینک در متن به شما می دهد.

توسعه دهندگان وب برای دادن این امکانات ویرایشی به کاربران خود دو راه در پیش رو دارند، خودشان یک ویرایشگر بسازند یا از ویرایشگرهای موجود استفاده کنند. یک توسعه دهنده باهوش حتماً راه دوم را انتخاب خواهد کرد زیرا ویرایشگرهای زیادی روی وب وجود دارند که چند سال روی آن ها وقت گذاشته شده، عیب یابی شده اند و به صورت استاندارد درآمده اند و بسیاری از آن ها نیز به صورت اوپن سورس و رایگان در اختیار ما قرار دارند. در این مطلب به معرفی چند ویرایشگر مناسب برای توسعه دهندگان وب خواهم پرداخت.

TinyMCE

ویرایشگر اوپن سورس و قدرتمندی است که در تمامی مرورگرهای استاندارد فایرفاکس، اپرا، اینترنت اکسپلورر، سافاری و کروم به خوبی کار می کند. TinyMCE به راحتی و با نوشتن دو سه خط کد در صفحه مورد نظر شما جای می گیرد و به کاربران شما اجازه استفاده از یک ویرایشگر غنی و قدرتمند را می دهد. از مزایای این ویرایشگر می توان به سرعت لود مناسب، سازگاری با AJAX، قابلیت چند زبانگی و رایگان بودن اشاره کرد. TinyMCE دارای اجتماع کاربری، راهنما و مستندات بسیار خوبی است. بسیاری از سیستم های مدیریت محتوا مثل ورپرس از این ویرایشگر قدرتمند استفاده می کنند.

FCKeditor

ویرایشگریست که سعی می کند بیشتر امکانات ویرایشگرهای تحت دسکتاپ مانند MS Word را در وب پیاده سازی کند. سبک است و برای استفاده از آن احتیاجی به نصب در کامپیوتر کلاینت ندارد. این ها جملاتی است که در وب سایت رسمی FCKeditor در وصف آن نوشته شده اند. این ویرایشگر قدرتمند با تمامی مرورگرهای استاندارد سازگار است و با بیشنر زبان های برنامه نویسی تحت وب مجتمع می شود. امکانات مناسب برای قالب بندی متن، پشتیبانی از CSS، آپلود تصاویر، مرور فایل های روی سرور، ایجاد جدول، درج فرم فیلد، منوی راست کلیک (Context Menu) اختصاصی، پوسته اختصاصی، تشخیص خودکار مرورگر کاربر و خروجی HTML مطلوب از قابلیت های این ویرایشگر هستند.

Yahoo! UI Editor

یاهو یکی از پیشرو ترین شرکت های وب در زمینه تولید ابزارهای مربوط به توسعه دهندگان وب است. کنترل Rich Text Editor یاهو یکی از بهترین و قدرتمند ترین راه حل ها در این زمینه است. از امکانات این ویرایشگر میتوان به مجوز اوپن سورس، قابلیت های خوب قالب بندی متون، پشتیبانی از مرورگرهای مختلف، تنظیمات قابل انعطاف، پشتیبانی از قابلیت کشیدن و رها کردن و روش شیء گرا در برنامه نویسی آن اشاره کرد. این کنترل جزئی از پروژه کتابخانه YUI شرکت یاهو! است.

FreeRichTextEditor

یک ویرایشگر قدرتمند و مبتنی بر جاوا اسکریپت که با اضافه کردن فقط سه خط کد به صفحات خودتان می توانید به کاربران خودتان لذت استفاده از یک ویرایشگر زیبا و قوی را بدهید. ظاهر این ویرایشگر شبیه به MS Word ساخته شده که کاربران با آن احساس نا آشنایی نکنند. تقریباً تمام امکاناتی که از یک ویرایشگر تحت وب انتظار دارید، FreeRichTextEditor دارای آن می باشد.

NiceEdit

یک ویرایشگر بسیار سبک، کم حجم و با نصب آسان است که روی تمام مرورگرها و سیستم عامل های موجود به خوبی کار می کند. هر چند مانند TinyMCE و FCKeditor قوی نیست و امکانات کمتری دارد اما برای کسانی که یک ویرایشگر ساده و بدون دردسر نیاز دارند بسیار مناسب است. این ویرایشگر سبک فقط 35کیلوبایت حجم دارد و فقط از دو فایل (js و icon) تشکیل شده است. این را با تعداد فایل های دیگر ویرایشگر ها مقایسه کنید. پشتیبانی از متد HTTP Post و AJAX برای ذخیره متن خروجی، کم حجم بودن، اسفاده آسان هم برای برنامه نویسان و هم برای کاربران نهایی، تنظیمات قابل انعطاف و پشتیبانی از تمامی مرورگرهای استاندارد از مزایای استفاده از NiceEdit هستند.

FreeTextBox

پر استفاده ترین ویرایشگر متن در دنیای ASP.NET است. بسیاری از وب سایت های مبتنی بر تکنولوژی ASP.NET از FreeTextBox به عنوان ویرایشگر HTML استفاده می کنند. کاملاً با IE و فایرفاکس سازگار است و امکانات خوبی به کاربر نهایی جهت قالب بندی متن می دهد. نسخه های اخیر این ویرایشگر روی پلت فرم مونو هم اجرا می شود.

RTE ASP.NET Control

اگر شما هم مثل من یک برنامه نویس ASP.NET هستید، حتماً با User Controlها آشنایی دارید. هدف این پروژه در کدپلکس جمع آوری تمامی امکانات یک ویرایشگر متن غنی در یک کنترل ASP.NET است. فایل dll این ویرایشگر را به شاخه bin پروژه خود اضافه کنید و به راحتی در هر صفحه ای که خواستید از آن استفاده کنید. متاسفانه کیفیت خروجی این کنترل هنوز به سطح مطلوبی نرسیده و به جز IE و فایرفاکس، از مرورگر دیگری پشتیبانی نمی کند.

Silverlight RichTextEditor

همانطور که از عنوان این ویرایشگر پیداست، یک ویرایشگر غنی برای سیلورلایت است. اوپن سورس است و با سیلورلایت نسخه 2 سازگاری دارد. متاسفانه در حال حاضر توسعه این پروژه تا اطلاع بعدی متوقف شده است.

farasun.wordpress.com

مشترک فید فراسان شوید! نمی دانید فید چیست!؟

مطالب مرتبط :

• 20+ افزونه فایرفاکس برای توسعه دهندگان و طراحان وب
• چطور یک برنامه نویس وب شویم!؟
• وب سرویس به زبان ساده

I’ve never been a big fan of CMS’s.  I’ve always preferred to write my own barstardised code.   When it’s only me editing the content that is just fine, I have a lot more control that way.  I am competent (thats competent not good) at HTML, PHP, SQL and even a smidgin of CSS.  However when you need to put together a fresh new website in a matter of hours that even the new admin assistant hired last week can competently edit then the right CMS can be invaluable.

This is the situation I find myself in this week, having spent 3 or 4 months actively putting of any web development and finally admitting that Fronter’s (our Virtual Learning Environment) built-in CMS is basically pants.   Our web host is our LEA who do not provide SQL support.  The lack of SQL being the reason for experimenting with Fronter’s CMS in the first place.

Well the search was on for a suitable “flat-file CMS” and I’m happy to report that Pluck (http://www.pluck-cms.org/?file=kop1.php) has stepped upto the plate and hit the ball out the park.

The worst I can say about Pluck is that I’ve had to edit the TinyMCE config file to stop it validating the HTML code and thus stripping out my needed iFrame tags.  I am also in need of a File Manager so the admin staff can quickly upload a PDF to the website and link it on a given page.    TinyMCE is a third party plugin that Pluck (and most CMS’s) uses to provide a WYSIWYG web page editor.  If you can use a word processor you can update content on this site – excellent!

…ist die bezeichnung “TinyMCE” für diesen in javascript gehäckten WYSIWYG-editor, der gar nicht “tiny” ist, sondern mit 500 kilobytes javascript in knapp 350 verschiedenen dateien daher kommt. Darunter ächzt jeder ältere rechner. Auch wördpress benutzt den im bäckend zum verfassen eines blogeintrages — aber damit kann man noch leben, weil man das eben nicht alle paar sekunden tut. Aber was reitet eigentlich so einen depperten forenbetreiber, der sich dieses aufgeblähte monstrum in sein forum holt, damit die nutzer damit ihre beiträge verfassen, und der — als ob das nicht reichte — dieses monstrum unter jede diskussjon drunterklatscht und damit die benutzung seines forums etwa so interessant wie die beobachtung von zähflüssig durchs geäst hangelnden faultieren macht. Hat so ein forumbetreiber etwa keine probleme mit seinem websörver und dem träffik, den so etwas verursacht? Oder hasst er einfach nur seine forennutzer?

Einmal ganz davon abgesehen, dass ganz viele nutzer dieses forums den komfort vor allem dazu nutzen, jede noch so sinnentleerte textauszeichnung in ihre beiträge reinzuklickern, so dass das tolle desein des forums so richtig in die absurdität gezogen wird, weil der eigentlich inhalt aussieht, als säßen da drei dutzend affen an einer setzmaschine.

Mich hat er jedenfalls vertrieben. Nach weniger als zwei minuten. Die temen, die eigentlich ein forum beleben sollen, treten hinter derartigen zumutungen so zurück, dass man keine lust darauf hat.

I had a problem where I had multiple textboxes on a page but only certain ones needed to be tinyMCE WYSIWYGs. I also needed it to work with Ajax and allow for multiple submissions. Here are the gotchas for making it work (I was using Ruby on Rails).

1) Make sure your init mode is set to ‘none’: I also made a mistake of initializing tinyMCE multiple times, once in each partial.

tinyMCE.init({
	mode : "none",
	theme : "advanced",
    inline_styles : "true",
	plugins : "",

2) Add control for each interested textarea: something like…

<%= javascript_tag("tinyMCE.execCommand(
          'mceAddControl', true, 'my_textarea_id');") %>

3) TriggerSave before; Clean Up Afterwards

<% remote_form_for :my_object, :url=>my_url,
        :before=>"tinyMCE.triggerSave(true, true);",
        :update=>{:success=>'succes_id', :failure=>'failure_id'},
        :success=>"tinyMCE.execCommand('mceRemoveControl', false, 'my_textarea_id');" do &#124;f&#124; %>

Resources

http://stackoverflow.com/questions/699615/cant-post-twice-from-the-same-ajax-tinymce-textarea
http://www.elevatedrails.com/articles/2007/08/08/using-rails-tinymce-and-ajax/
http://hamisageek.blogspot.com/2007/11/multiple-tinymce-3-instances-on-one.html

Update: Following on from Dirk and Ismail’s comments, I found out that this YouTube plug-in does not work with TinyMCE v3 (which is the default richtext editor in Umbraco v4). This guide is written to works  for Umbraco v3 only, (using TinyMCE v2).

If you are looking for similar functionality in Umbraco v4, (TinyMCE v3), then all you need to do is enable the ‘Flash/media’ button in your Richtext editor data-type and embed the YouTube video like any other Flash movie (swf) – more details in my comment below.

/End of update.

This approached worked fine, but we ran into problems trying to edit the YouTube video URL, along with that, my client had an additional step of selecting a macro, then entering the YouTube URL.

After a little researching, I eventually found a native YouTube plug-in for TinyMCE, (direct link to ZIP download).

Here is how I integrated in Umbraco:

1. Extract the contents of the youtube.zip archive to your /umbraco_client/tinymce/plugins/youtube/
2. In your /config/ folder, open the tinyMceConfig.config file.
3. Insert the following lines:
   After the last <command /> entry, add…

   <command>
   	<umbracoAlias>mceYoutube</umbracoAlias>
   	<icon>../umbraco_client/tinymce/plugins/youtube/images/youtube.gif</icon>
   	<tinyMceCommand value="" userInterface="true" frontendCommand="youtube">youtube</tinyMceCommand>
   <priority>75</priority>
   </command>

   Then after the last <plugin /> entry, add…

   <plugin loadOnFrontend="false">youtube</plugin>

4. Once the XML config entries are in place, you will need to restart the  Umbraco application – the quickest way of doing this is by modifying your Web.config, (literally open it, add a space, remove it, hit save).
5. The YouTube button is now available in Umbraco. However, it’s not quite ready yet, there is still one more step!
6. In your Umbraco back-end, go to the “Developer” section, expand the “DataTypes” folder and then select “Richtext editor”. In the “Buttons” section you should see a YouTube icon. Check the box next to the icon, and you’re done! If you don’t see the YouTube icon, then check that the did the config steps above, and/or check that the read permissions are set correctly on your /umbraco_client/ folder, (re-apply them if needs be).

tinybrowser is great plugins for tinymce and we can easily upload images/files and file browser.  It’s work with tinyMCE v3.2. I’ve describe the detail configuration here.

• Download tinymce and extract.
• Download tinybrowser, its distributed under the GNU General Public License.
• Extract and copy to \tiny_mce\plugins\
• Open config_tinybrowser.php file and set the upload directory

$tinybrowser['path']['image'] = ‘/upload/images/’; // Image files location – also creates a ‘_thumbs’ subdirectory within this path to hold the image thumbnails
$tinybrowser['path']['media'] = ‘/upload/images/‘; // Media files location
$tinybrowser['path']['file']  = ‘/upload/images/‘; // Other files location
You can change the upload path dynamically, we’ll discuss it end of this session.

• Ensure that the upload directories are writable (0777 permission)
• You have to call “tb_tinymce.js.php” before calling “tiny_mce.js”
  

<script language=”javascript” type=”text/javascript” src=”<?php echo url::js_dir()?>tiny_mce/plugins/tinybrowser/tb_tinymce.js.php>”></script>
<script type=”text/javascript” src=”<?php echo url::js_dir()?>tiny_mce/tiny_mce.js”></script>

• In you initialization of tiny_mce you have to add file_browser_callback : “tinyBrowser”,
• The following is the full code, the bold is for tinybrowser plugins
  

/*

<script language=”javascript” type=”text/javascript” src=”js/tiny_mce/plugins/tinybrowser/tb_tinymce.js.php>”></script>
<script type=”text/javascript” src=”js/tiny_mce/tiny_mce.js”></script>

<textarea id=”adesc” name=”adesc”></textarea>

<script>
tinyMCE.init({
// General options
mode : “textareas”,
mode : “exact”,
elements : “adesc”,
theme : “advanced”,
plugins : “safari,pagebreak,style,layer,table,advhr,advimage,advlink”,
file_browser_callback : “tinyBrowser”,

theme_advanced_buttons1 : “forecolor,backcolor,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect”,
theme_advanced_buttons2 : “pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview”,
theme_advanced_buttons3 : “”,

theme_advanced_toolbar_location : “top”,
theme_advanced_toolbar_align : “left”,
theme_advanced_statusbar_location : “bottom”,
theme_advanced_resizing : false,
convert_urls : false,
// Example content CSS (should be your site CSS)
content_css : “css/content.css”,

// Drop lists for link/image/media/template dialogs
template_external_list_url : “lists/template_list.js”,
external_link_list_url : “lists/link_list.js”,
external_image_list_url : “lists/image_list.js”,
media_external_list_url : “lists/media_list.js”,

// Replace values for the template plugin
template_replace_values : {
username : “Some User”,
staffid : “991234″
}
});
</script>

*/

• Click on the image button, a popup window open and you can see an icon appear beside image url click on and a another new window open which is our image browser, we can browse images and upload image from there.
• Now If you run it can work

Path Change While Add imge to editor:
When we upload an image and put it to editor its path has been changed. If we save the output to database, and we need to show in different location then we have faced some problem, Just add convert_urls : false  to tinyMCE.init(). So the path will not be changed.

Session Control:
We can use session in tinybrowser. See …/tiny_mce/plugins/tinybrowser/config_tinybrowser.php

//session_start();
//$tinybrowser['sessioncheck'] = ‘authenticated_user’; //name of session variable to check

Just comment out the above line and the additional line.

$_SESSION[$tinybrowser['sessioncheck']] = “YES”;

New you can uses session here.

Dynamic Upload Directroy:
We may need dynamic upload directory, like each user has their own upload folder. It can possible by using session variable.

Step 1:
Just add a get parametter while we diclearning the tb_tinymce.js.php the say in php, $upload_path = “/user1/dir/upload/”
<script language=”javascript” type=”text/javascript” src=”js/tiny_mce/plugins/tinybrowser/tb_tinymce.js.php?upload_path=<?=urlencode($upload_path);?>”></scrip>

Step: 2
Open file “/js/tiny_mce/plugins/tinybrowser/tb_tinymce.js.php” and add the following two line at the top to page.
session_start();
$_SESSION['upath'] = $_GET['upload_path'];

Step: 3
Open “js/tiny_mce/plugins/tinybrowser/config_tinybrowser.php” and change the assignment op upload directory like the following [Note you must comment out the session strat on this page as i've describe it above]
$tinybrowser['path']['image'] = $_SESSION['upath'].’images/’; // Image files location – also creates a ‘_thumbs’ subdirectory within this path to hold the image thumbnails
$tinybrowser['path']['media'] = $_SESSION['upath'].’media/’; // Media files location
$tinybrowser['path']['file']  =$_SESSION['upath'].’files/’; // Other files location

I’ve successfully run it and use for different directory for different modules. Just assign value to $upload_path, it depend on you how you change the path but make sure all upload directory always writable (permission 0777)

You have your website and need to allow access to files on the server simply and easily. What are your options?

Here are some options available to you if you are running Ajax, PHP or JavaScript. Some provide account capabilities, multiple levels of access, while others do not. Some integrate nicely with TinyMCE or FCKeditor. Others allow MP3s to be played directly from the source, or images to be viewed.

So, what are your needs? Then check out this article of free file managers that best fulfill them, and don’t forget the comments for other options.