Moodle
  1. Moodle
  2. MDL-20363

insert a new embed code at cursor position (htmlarea editor)

    Details

    • Type: Improvement Improvement
    • Status: Closed
    • Priority: Minor Minor
    • Resolution: Won't Fix
    • Affects Version/s: 1.9
    • Fix Version/s: None
    • Component/s: HTML Editor (TinyMCE)
    • Labels:
      None
    • Difficulty:
      Moderate
    • Affected Branches:
      MOODLE_19_STABLE
    • Rank:
      5555

      Description

      a new toolbar icon (function) to insert an EMBED code from the web into
      the current position of the cursor inside the htmlarea editor.

      solves difficulties for non html users that wish to embed code inside
      complex htmlarea text. and not just added it at the end of the code.
      ( a little bit more user friendly for novice web user)

      i have patched the lib/editor/htmlarea/htmlarea.php file and lib/editor/htmlarea/dialog.js
      and made two new ones : lib/editor/htmlarea/popups/insert_embed.php and lib/editor/htmlarea/popups/choose-a-video.php
      and added some strings to editor.php file for the selected local language you use on your site.

      all files are attached to this issue.

      details follow in the comments area (it is more visually clear to have them there)

      1. choose-a-video.php.tar.gz
        1.0 kB
        Nadav Kavalerchik
      2. htmlarea_insert_embed.tar.gz
        28 kB
        Nadav Kavalerchik
      1. ed-multimedia.gif
        1.0 kB

        Activity

        Hide
        Nadav Kavalerchik added a comment -

        add the following code to the htmlarea.php file

        around line 172 add :

        "insertembed",
        

        around line 263 add:

          insertembed: [ "Insert embed", "ed-multimedia.gif", false, function(e) {e.execCommand("insertembed");} ],
        

        around line 2126 add:

                case "insertembed": this._insertEmbed(); break;
        

        add a new funtion (around line 1732) :

        // Called when the user clicks the Insert Embed button
        HTMLArea.prototype._insertEmbed = function() {
            var sel = this._getSelection();
            var range = this._createRange(sel);
            var editor = this;  // for nested functions
            this._popupDialog("insert_embed.php?id=<?php echo $id; ?>", function(param) {
                if (!param) {   // user must have pressed Cancel
                    return false;
                }
                var doc = editor._doc;
                // create the DIV element  to hold the OBJECT embed inside of it
                newDiv = doc.createElement("div");
        
                // assign the given arguments
                for (var field in param) {
                    var value = param[field];
                    if (!value) {
                        continue;
                    }
                    switch (field) {
                        case "embedcode"   : newDiv.innerHTML = value; break;
                    }
                }
        
                // add the newly created element and it's content into the DOM
                //my_div = document.getElementById("org_div1");
                //document.body.insertBefore(newDiv, my_div);
        
                if (HTMLArea.is_ie) {
                    range.pasteHTML(newDiv.outerHTML);
                } else {
                    // insert the table
                    editor.insertNodeAtSelection(newDiv);
                }
                return true;
            }, null);
        };
        

        open the file dialog.js and around line 39 add:

                case "insert_embed": x = 550; y = 350; break;
        

        that is all the patching.
        now, put "insert_embed.php" and "choose-a-video.php" into: "lib/editor/htmlarea/popups/"
        and editor.php inside your local lang folder.

        Show
        Nadav Kavalerchik added a comment - add the following code to the htmlarea.php file around line 172 add : "insertembed" , around line 263 add: insertembed: [ "Insert embed" , "ed-multimedia.gif" , false , function(e) {e.execCommand( "insertembed" );} ], around line 2126 add: case "insertembed" : this ._insertEmbed(); break ; add a new funtion (around line 1732) : // Called when the user clicks the Insert Embed button HTMLArea.prototype._insertEmbed = function() { var sel = this ._getSelection(); var range = this ._createRange(sel); var editor = this ; // for nested functions this ._popupDialog( "insert_embed.php?id=<?php echo $id; ?>" , function(param) { if (!param) { // user must have pressed Cancel return false ; } var doc = editor._doc; // create the DIV element to hold the OBJECT embed inside of it newDiv = doc.createElement( "div" ); // assign the given arguments for ( var field in param) { var value = param[field]; if (!value) { continue ; } switch (field) { case "embedcode" : newDiv.innerHTML = value; break ; } } // add the newly created element and it's content into the DOM //my_div = document.getElementById( "org_div1" ); //document.body.insertBefore(newDiv, my_div); if (HTMLArea.is_ie) { range.pasteHTML(newDiv.outerHTML); } else { // insert the table editor.insertNodeAtSelection(newDiv); } return true ; }, null ); }; open the file dialog.js and around line 39 add: case "insert_embed" : x = 550; y = 350; break ; that is all the patching. now, put "insert_embed.php" and "choose-a-video.php" into: "lib/editor/htmlarea/popups/" and editor.php inside your local lang folder.
        Hide
        Nadav Kavalerchik added a comment -

        oups, forgot the toolbar's icon.
        here it is...

        place it inside "lib/editor/htmlarea/images"

        Show
        Nadav Kavalerchik added a comment - oups, forgot the toolbar's icon. here it is... place it inside "lib/editor/htmlarea/images"
        Hide
        Nadav Kavalerchik added a comment -

        if you open up this dialog window...
        you can choose from several (useful) web services
        that let you embed code directly by drag and droping
        the code from the right side frame (where the web service is displayed)
        to the left side - the embed code empty box.

        enjoy

        Show
        Nadav Kavalerchik added a comment - if you open up this dialog window... you can choose from several (useful) web services that let you embed code directly by drag and droping the code from the right side frame (where the web service is displayed) to the left side - the embed code empty box. enjoy
        Hide
        miki Alliel added a comment -

        Great patch Nadav.
        Works grerat on FF browser, but on IE8 the popup page can't be resize and this makes the choice of the websites and embed code very difficult..
        I'm working on a solution, if someone has one please let us know
        Thanks

        Show
        miki Alliel added a comment - Great patch Nadav. Works grerat on FF browser, but on IE8 the popup page can't be resize and this makes the choice of the websites and embed code very difficult.. I'm working on a solution, if someone has one please let us know Thanks
        Hide
        Anthony Borrow added a comment -

        Nadav - I always get a little nervous allow folks to embed stuff especially code for security reasons. Peace - Anthony

        Show
        Anthony Borrow added a comment - Nadav - I always get a little nervous allow folks to embed stuff especially code for security reasons. Peace - Anthony
        Hide
        Nadav Kavalerchik added a comment -

        I try to satisfy the Teachers as much as i can ( and make backups all the time)
        they demand it, strongly. regardless the consequences.

        You should see other "plugins" i am not "brave" enough to upload to the contrib...

        Show
        Nadav Kavalerchik added a comment - I try to satisfy the Teachers as much as i can ( and make backups all the time) they demand it, strongly. regardless the consequences. You should see other "plugins" i am not "brave" enough to upload to the contrib...
        Hide
        Dan Marsden added a comment -

        htmlarea has been replaced with tinymce so this doesn't apply anymore - if you want to do something similar in Moodle 2 please create a new bug with patch/details - thanks!

        Show
        Dan Marsden added a comment - htmlarea has been replaced with tinymce so this doesn't apply anymore - if you want to do something similar in Moodle 2 please create a new bug with patch/details - thanks!
        Hide
        Nadav Kavalerchik added a comment -

        I am converting this one into a TinyMCE plugin together with all the HTMLAREA custom plugins in :CONTRIB-2730

        Show
        Nadav Kavalerchik added a comment - I am converting this one into a TinyMCE plugin together with all the HTMLAREA custom plugins in : CONTRIB-2730

          People

          • Votes:
            2 Vote for this issue
            Watchers:
            2 Start watching this issue

            Dates

            • Created:
              Updated:
              Resolved: