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

      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

        Gliffy Diagrams

        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: