Uploaded image for project: 'Moodle'
  1. Moodle
  2. MDL-20363

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

    Details

    • Type: Improvement
    • Status: Closed
    • Priority: 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

      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)

        Gliffy Diagrams

          Attachments

            Activity

            Hide
            nadavkav 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
            nadavkav 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
            nadavkav Nadav Kavalerchik added a comment -

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

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

            Show
            nadavkav Nadav Kavalerchik added a comment - oups, forgot the toolbar's icon. here it is... place it inside "lib/editor/htmlarea/images"
            Hide
            nadavkav 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
            nadavkav 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
            mikidream 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
            mikidream 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
            aborrow 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
            aborrow 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
            nadavkav 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
            nadavkav 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
            danmarsden 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
            danmarsden 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
            nadavkav 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
            nadavkav 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: