Moodle
  1. Moodle
  2. MDL-22848

Vector drawing (svg) plugin for the htmlarea editor

    Details

    • Type: New Feature New Feature
    • 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
    • Rank:
      6087

      Description

      This plugin enable users to draw vector images form within the Moodle
      environment and embed them into the internal HtmlArea editor which is
      part of any Module in the framework. useful for both Teachers and Students.

      The Drawing (svg-edit) component is support only in advanced browsers:

      "SVG-edit is a fast, web-based, Javascript-driven SVG editor that works in any modern browser:

      • Firefox 1.5+
      • Opera 9.50+
      • Safari 4+
      • Chrome 1+
      • IE 6+ (with the Chrome Frame plugin)

      This editor depends on many other open-source projects."

      After the drawing is embedded into the editor and saved, it can be viewed
      on any browser (even on different old versions of IE)
      thanks to the svgweb library.

      "SVG Web is a JavaScript library which provides SVG support on many browsers, including Internet Explorer, Firefox, and Safari. Using the library plus native SVG support you can instantly target ~95% of the existing installed web base."

      Here is a short video clip to see it in action:
      http://www.screentoaster.com/watch/stU0hcQkxIR15ZSVpVXFlcVlZQ

      It was inspired by "GSOC PaintWeb integration with TinyMCE code to Moodle 2.0"
      http://tracker.moodle.org/browse/MDL-20124

      Installation instruction follows in the comments

      Since it is a proof of concept, feedback and advice for better integration with moodle is very welcome

      1. insert_svg.php
        2 kB
        Nadav Kavalerchik
      1. applications-graphics.png
        0.9 kB
      2. svgedit-moodle.png
        79 kB

        Issue Links

          Activity

          Hide
          Nadav Kavalerchik added a comment -
          1. download the svg-edit Editor from: http://code.google.com/p/svg-edit/ "untar" it and placed it as it is under moodle/lib
          2. download the svgweb Library from: http://code.google.com/p/svgweb/ "untar" it and placed it as it is under moodle/lib
          3. open moodle/lib/svg-edit-2.5/svg-editor.js
            and after line 504
            (just after
            var saveHandler = function(window,svg) {
            				show_save_warning = false; 

            )
            add:

                            parent.setSVG(svg);
                            return true;
            
          4. open moodle/lib/svg-edit-2.5/svg-editor.html
            change line 21 from:
            <script type="text/javascript" src="svg-editor.min.js"></script> 
            

            to:

            <script type="text/javascript" src="svg-editor.js"></script> 
            
          5. open moodle/lib/editor/htmlarea/htmlarea.php
            around line 180 add to the toolbar the new symbol/element:
            , "separator", "svgdraw"
            

            just anywhere in the array.

          around line 275 add a new "link" between the button and the function that will be called when you click it

           svgdraw: [ "Draw an image", "applications-graphics.png", false, function(e) {e.execCommand("svgdraw");} ],
          

          ! do not forget to upload a nice/useful image to the moodle/lib/editor/htmlarea/images folder

          around line 2435 add a new case element to connect the "call" to the actual function ( _inserSVG() )

          case "svgdraw": this._insertSVG(); break;
          

          around lines 1780 add a new function:

          // Called when the user clicks the Insert SVG button
          HTMLArea.prototype._insertSVG = function() {
              var sel = this._getSelection();
              var range = this._createRange(sel);
              var editor = this;  // for nested functions
              var prefixwebsvg = '<script data-path="/moodle/lib/svgweb/src/" src="/moodle/lib/svgweb/src/svg.js"></script>';
              this._popupDialog("insert_svg.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 "svgcode"   : newDiv.innerHTML = prefixwebsvg + '<script type="image/svg+xml">' + value + '</script>'; 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);
          };
          

          !!! make sure you are using the correct path inside your server for the prefixwebsvg element.
          ( since it is hard coded according to our server )

          1. open moodle/lib/editor/htmlarea/dialog.js and around line 45 add:
                   case "insert_svg": x = 1024; y = 768; break;
            

          this function calls a php page that pops up the drawing editor.
          you need to download it and save it to : moodle/lib/editor/htmlarea/popups/insert_svg.php
          (it is attached with this issue)

          you'll probably need an icon and a few strings to translate (lang/editor.php) for this plugin to look
          a little better and not in developer mode

          i would love to get feedback on a better integration and just about anything you can think of

          enjoy

          Show
          Nadav Kavalerchik added a comment - download the svg-edit Editor from: http://code.google.com/p/svg-edit/ "untar" it and placed it as it is under moodle/lib download the svgweb Library from: http://code.google.com/p/svgweb/ "untar" it and placed it as it is under moodle/lib open moodle/lib/svg-edit-2.5/svg-editor.js and after line 504 (just after var saveHandler = function(window,svg) { show_save_warning = false ; ) add: parent.setSVG(svg); return true ; open moodle/lib/svg-edit-2.5/svg-editor.html change line 21 from: <script type= "text/javascript" src= "svg-editor.min.js" ></script> to: <script type= "text/javascript" src= "svg-editor.js" ></script> open moodle/lib/editor/htmlarea/htmlarea.php around line 180 add to the toolbar the new symbol/element: , "separator" , "svgdraw" just anywhere in the array. around line 275 add a new "link" between the button and the function that will be called when you click it svgdraw: [ "Draw an image" , "applications-graphics.png" , false , function(e) {e.execCommand( "svgdraw" );} ], ! do not forget to upload a nice/useful image to the moodle/lib/editor/htmlarea/images folder around line 2435 add a new case element to connect the "call" to the actual function ( _inserSVG() ) case "svgdraw" : this ._insertSVG(); break ; around lines 1780 add a new function: // Called when the user clicks the Insert SVG button HTMLArea.prototype._insertSVG = function() { var sel = this ._getSelection(); var range = this ._createRange(sel); var editor = this ; // for nested functions var prefixwebsvg = '<script data-path= "/moodle/lib/svgweb/src/" src= "/moodle/lib/svgweb/src/svg.js" ></script>'; this ._popupDialog( "insert_svg.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 "svgcode" : newDiv.innerHTML = prefixwebsvg + '<script type= "image/svg+xml" >' + value + '</script>'; 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 ); }; !!! make sure you are using the correct path inside your server for the prefixwebsvg element. ( since it is hard coded according to our server ) open moodle/lib/editor/htmlarea/dialog.js and around line 45 add: case "insert_svg" : x = 1024; y = 768; break ; this function calls a php page that pops up the drawing editor. you need to download it and save it to : moodle/lib/editor/htmlarea/popups/insert_svg.php (it is attached with this issue) you'll probably need an icon and a few strings to translate (lang/editor.php) for this plugin to look a little better and not in developer mode i would love to get feedback on a better integration and just about anything you can think of enjoy
          Hide
          Anthony Borrow added a comment -

          I suspect that contrib may be the better place for this since Moodle 2.0 is moving away from htmlarea. Consideration is being given to adding Paintweb to Moodle 2.1 (see MDL-20124) so that may be something else to consider. Let me know if you want to switch this to the contrib side. Peace - Anthony

          Show
          Anthony Borrow added a comment - I suspect that contrib may be the better place for this since Moodle 2.0 is moving away from htmlarea. Consideration is being given to adding Paintweb to Moodle 2.1 (see MDL-20124 ) so that may be something else to consider. Let me know if you want to switch this to the contrib side. Peace - Anthony
          Hide
          Anthony Borrow added a comment -

          These both seem to be adding similar functionality so I am linking them in the tracker. Peace - Anthony

          Show
          Anthony Borrow added a comment - These both seem to be adding similar functionality so I am linking them in the tracker. Peace - Anthony
          Hide
          Nadav Kavalerchik added a comment -

          Please move it into CONTRIB

          Show
          Nadav Kavalerchik added a comment - Please move it into CONTRIB
          Hide
          Nadav Kavalerchik added a comment -

          A better version of this plugin is at
          http://tracker.moodle.org/browse/CONTRIB-2730

          With lots of other useful plugins, too

          Show
          Nadav Kavalerchik added a comment - A better version of this plugin is at http://tracker.moodle.org/browse/CONTRIB-2730 With lots of other useful plugins, too
          Hide
          Dan Marsden added a comment -

          closing this one as won't fix too. - Nadav I never knew you had done so much interesting work on htmlarea!

          Show
          Dan Marsden added a comment - closing this one as won't fix too. - Nadav I never knew you had done so much interesting work on htmlarea!
          Hide
          Nadav Kavalerchik added a comment -

          Thank you for the feedback
          I should have done some PR for this, probably.
          I will do a better one for the new plugins I am converting and creating for TinyMCE in Moodle 2+

          Show
          Nadav Kavalerchik added a comment - Thank you for the feedback I should have done some PR for this, probably. I will do a better one for the new plugins I am converting and creating for TinyMCE in Moodle 2+

            People

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

              Dates

              • Created:
                Updated:
                Resolved: