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

      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

        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: