Insert Embed Code plugin for TinyMCE

This plugin adds an additional button to your TinyMCE editor.  Yes.....I know that all you have to do is click the 'HTML'  button, paste the code, and insert the embed code that way. This button is all about making the editor easier for your members to understand.  The button graphic is a widely used symbol in video players that must be clicked to obtain the embed code, so your users will more easily associate this button with embedding videos.

Clicking on the button will show a popup where the user pastes the embed code

None of the underlying text or html code is shown to the user.  The embed code will be place into the document at the current cursor position.

Installation

Unzip the attached file, and upload the 'embed' folder and all its contents to yoursite.com/plugins/tiny_mce/plugins/

In /templates/base/scripts/BxBaseConfig.php

Find:

function InitTiny() {
// Notice: The simple theme does not use all options some of them are limited to the advanced theme
tinyMCE.init({
convert_urls : false,
mode : "specific_textareas",
theme : "advanced",

editor_selector : /(' . $sSelectors . ')/,

plugins : "table,save,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,media,searchreplace,directionality,fullscreen",

theme_advanced_buttons1_add : "fontselect,fontsizeselect",
theme_advanced_buttons2_add_before: "cut,copy,paste,pastetext,pasteword,image,separator,search,replace,separator",
theme_advanced_buttons2_add : "separator,insertdate,inserttime,separator,forecolor,backcolor",
theme_advanced_buttons3_add : "emotions",

Add the text in red:

function InitTiny() {
// Notice: The simple theme does not use all options some of them are limited to the advanced theme
tinyMCE.init({
convert_urls : false,
mode : "specific_textareas",
theme : "advanced",

editor_selector : /(' . $sSelectors . ')/,

plugins : "embed,table,save,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,media,searchreplace,directionality,fullscreen",

theme_advanced_buttons1_add : "fontselect,fontsizeselect",
theme_advanced_buttons2_add_before: "cut,copy,paste,pastetext,pasteword,image,separator,search,replace,separator",
theme_advanced_buttons2_add : "separator,insertdate,inserttime,separator,forecolor,backcolor",
theme_advanced_buttons3_add : "emotions,embed",

Done

You should post this in the Market for "Free"

Because the Tips and Tricks forum definitely isn't the right place for something like this.

What tips and tricks forum?    I ain't never heard of such a thang!

I'd pay more attention but it's just getting too darned expensive!

thank you for sharing

you have taken a specialization option TinyMCE

can you tell me - how you change the model - it is nicer your TinyMCE

http://www.cirkuit.net/projects/tinymce/cirkuitSkin/cirkuit-tinymce-skin-0.4.zip

Unzip, and copy 'cirkuit' directory and all its contents to: /plugins/tiny_mce/themes/advanced/skins/

See attached BxBaseConfig.php file and note all occurrences of     skin : "cirkuit",

Make the changes to BxBaseConfig.php to call the new skin

perfect thank you

You know if it is possible to change TinyMCE on the Forum

• tinymce v3.3.9.2
• cirkuit skin
• embed plugin

There seems to be problem with BxBaseConfig.php. No TinyMCE tools displayed just plain text with <p> </p>. Backup overwrote, then I looked at yours to mimic. Instead, I put skin : "cirkuit", right under in every themes : "advanced", Notised some | are deleted... help and all separator are gone as well. Clean cache. Help is still there, wtf!?! And some of them are still "spaced". Here's the attachment...

Have a look at the two js files.  I believe these are the ones I had to edit to get rid of the | characters and the 'spacer' items.  Also, in the attached js files, I changed the regular 'code' plugin to the 'advcode' plugin (also attached)  The advcode plugin adds line numbers and syntax highlighting.

Go to /modules/boonex/forum/layout/base_en/xsl/canvas_init.xsl, you can make the change there. You will also need to do it in /modules/boonex/forum/layout/base/xsl/canvas_init.xsl

tinyMCE.init({
document_base_url : "<xsl:value-of select="/root/url_dolphin" />",
entity_encoding : "raw",
mode : "exact",
elements : "tinyEditor",
theme : "advanced",
gecko_spellcheck : true,
content_css : "<xsl:value-of select="/root/urls/css" />blank.css",

remove_linebreaks : true,

setupcontent_callback : "orcaSetupContent",

plugins : "embed,table,advimage,advlink,emotions,iespell,insertdatetime,preview,zoom,searchreplace,xhtmlxtras,media,imagemanager",
theme_advanced_buttons1_add : "fontsizeselect,separator,forecolor,backcolor",
theme_advanced_buttons2_add : "separator,insertdate,inserttime,preview,zoom",
theme_advanced_buttons2_add_before: "cut,copy,paste,separator,search,replace,separator",
theme_advanced_buttons3_add_before : "tablecontrols,separator",
theme_advanced_buttons3_add : "emotions,iespell,flash,separator,print,embed",

PS: CAUTION... Do not copy my code! Make the changes manually. I have an additional mod (imagemanager) on this page.

Clear your cache, clear your browser cache and it should appear. Also, this won't work unless you follow HL's instructions above and install the file he has provided.

@SkyForum thank you

Thanks, for my users easier. :)

Not much in those js, but I have found the solution for the spacers... it's in the ui.css.

Icon for SpellChecker is still blank. 

And.... I can't, for the life of me, to figure out how to remove that bloody Help button (blue round with question mark between Clean up messy code and HTML). There is no point in displaying "About" and Plugins".

Like I said... have a look at those js files in the plugins/tiny_mce/themes/advanced directory.  The answer  lies within.

Don't thank me. HL is the one that got me headed down the right path.... I just passed it on.

editor_template_src.js

line 43 (line removed)

help :  ['help_desc', 'mceHelp'],

line 74   (help removed)

theme_advanced_buttons2 : "bullets,numbest,outdent,indent,undo,redo,link,unlink,anchor,image,cleanup,help,code",

line 1114  (lines removed)

_mceHelp : function() {

var ed = this.editor;

ed.windowManager.open({

url : this.url + '/about.htm',

width : 480,

height : 380,

inline : true

}, {

theme_url : this.url

});

},

editor_template.js   (below are what I removed)

help:["help_desc","mceHelp"],

help,

_mceHelp:function(){var i=this.editor;i.windowManager.open({url:this.url+"/about.htm",width:480,height:380,inline:true},{theme_url:this.url})},

Still there. Even pop-up.

Geeze dude... just remove 'help' . etc from the list of buttons....  (editor_template.js is a little tricky since it's compressed).  With no button to click on, no one can get at anything, so no need to delete anything else.

P.S. Don't forget to clear the cache_public directory.

It's not my fault... *pointing finger at cache_public*! 

For some reason I thought DAP (Dolphin Admin Panel) All under Clear Cache: would take care of that and I guess I was wrong.

Working perfect now. Thank you for pointing that out.

this is great thank you! similar functionality should be added to dolphin 8

Great info, simple, and saved mulah! best of both worlds

 Thanks for shared.

Thanks SkyForum

Hi all,

I can insert embed but when I save or click on the "Edit HTML Source" icon on the editor then don't see embed code

Help me, please

Thanks,

Post the embed code you are using here.

My code: at the file: templates/base/scripts/BxBaseConfig.php

function InitTiny() {
        // Notice: The simple theme does not use all options some of them are limited to the advanced theme
        tinyMCE.init({
            convert_urls : false,
            mode : "specific_textareas",
            theme : "advanced",

            editor_selector : /(' . $sSelectors . ')/,

            plugins : "embed,table,save,advhr,imagemanager,imgmanager,advlink,emotions,iespell,insertdatetime,preview,media,searchreplace,directionality,fullscreen",

            theme_advanced_buttons1_add : "fontselect,fontsizeselect",
            theme_advanced_buttons2_add_before: "cut,copy,paste,pastetext,pasteword,phpimage,separator,search,replace,separator",
            theme_advanced_buttons2_add : "separator,insertdate,inserttime,separator,forecolor,backcolor",
            theme_advanced_buttons3_add : "emotions,embed,insertimage",
            theme_advanced_toolbar_location : "top",
            theme_advanced_toolbar_align : "left",
            theme_advanced_statusbar_location : "bottom",

            plugi2n_insertdate_dateFormat : "%Y-%m-%d",
            plugi2n_insertdate_timeFormat : "%H:%M:%S",           
            theme_advanced_resizing : false,
            theme_advanced_resize_horizontal : false,

            entity_encoding : "raw",

            paste_use_dialog : false,
            paste_auto_cleanup_on_paste : true,
            paste_convert_headers_to_strong : false,
            paste_strip_class_attributes : "all",
            paste_remove_spans : false,
            paste_remove_styles : false
        });
    }

I ask you to post the embed code, and you give me your BxBaseConfig file instead?  I give up on this one.

Hi, I'm sorry

the embed code i'm using:

<iframe width="560" height="315" src="http://www.youtube.com/embed/Kmcb_bAyxas" frameborder="0" allowfullscreen></iframe>

Thanks

 RE:

 You can not use iframe embed code in Dolphin 7.0.9 unless you make some modifications.  I have a post in the tips forum that tells you how to do this.