插入图片功能

.jshintrc

@@ -7,6 +7,7 @@
     "trailing" : true,
     "white": false,
     "quotmark": false,
+    "browser": true,
     "predef" : [
         "module",
         "require",

dialogs/image/image.js

+( function ( utils ) {
+    var content = '<div class="image-content" style="padding:20px;width:360px;">';
+    content += '<style>';
+    content += '.kmui-dialog-<%= container %> input{';
+    content += 'width: 75%;';
+    content += 'padding: 6px 12px;';
+    content += 'font-size: 14px;';
+    content += 'line-height: 1.42857143;';
+    content += 'color: #555;';
+    content += 'background-color: #fff;';
+    content += 'background-image: none;';
+    content += 'border: 1px solid #ccc;';
+    content += 'border-radius: 4px; -webkit-box-shadow: inset 0 1px 1px rgba( 0, 0, 0, .075 );'
+    content += 'box-shadow: inset 0 1px 1px rgba( 0, 0, 0, .075 ); -webkit-transition: border-color ease-in-out .15s,';
+    content += 'box-shadow ease-in-out .15s;';
+    content += 'transition: border-color ease-in-out .15s,';
+    content += 'box-shadow ease-in-out .15s;';
+    content += '}';
+    content += '.kmui-dialog-<%= container %> input:focus{';
+    content += 'border-color: #66afe9;';
+    content += 'outline: 0;';
+    content += '-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);';
+    content += 'box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);';
+    content += '}';
+    content += '.kmui-dialog-<%= container %> button{';
+    content += 'height:34px;';
+    content += 'line-height:34px;';
+    content += 'vertical-align:1px';
+    content += '}';
+    content += '</style>';
+    content += '<input id="image_href"/>';
+    content += '<button id="image_insert">插入</button>';
+    content += '<hr style="height: 0; border: none; border-top: 1px solid #ccc;">';
+    content += '<img id="image_preview" style="max-width: 360px;"/>';
+    content += '</div>';
+
+
+
+    KM.registerWidget( 'image', {
+        tpl: content,
+        initContent: function ( km ) {
+            var lang = km.getLang( 'dialogs.image' ),
+                html;
+            if ( lang ) {
+                html = $.parseTmpl( this.tpl, utils.extend( {
+                    'container': 'image'
+                }, lang ) );
+            }
+            this.root().html( html );
+        },
+        initEvent: function ( km, $w ) {
+            $w.find( '#image_insert' ).on( 'click', function () {
+                km.execCommand( 'image', $w.find( '#image_href' ).val() );
+                $w.kmui().hide();
+            } );
+            $w.find( '#image_href' ).on( 'keydown', function ( e ) {
+                if ( e.keyCode === 13 ) {
+                    km.execCommand( 'image', $w.find( '#image_href' ).val() );
+                    $w.kmui().hide();
+                }
+            } ).on('input', function() {
+                $w.find('#image_preview').attr('src', $w.find( '#image_href' ).val());
+            });
+            var url = km.queryCommandValue( 'image' );
+            var $input = $w.find( '#image_href' );
+            $input.val( url || 'http://' );
+            if(url) $w.find('#image_preview').attr('src', url);
+            setTimeout( function () {
+                $input.focus();
+            } );
+        },
+        width: 400
+    } );
+} )( KM.Utils );
\ No newline at end of file

import.js

@@ -23,6 +23,7 @@
             ,'module/geometry.js'
             ,'module/history.js'
             ,'module/icon.js'
+            ,'module/image.js'
             ,'module/layout.js'
             ,'module/layout.default.js'
             ,'module/layout.bottom.js'
@@ -72,6 +73,7 @@
             ,'adapter/contextmenu.js'
             ,'adapter/dialog.js'
             ,'adapter/hyperlink.js'
+            ,'adapter/image.js'
             ,'adapter/zoom.js'
             ,'protocal/xmind.js'
             ,'protocal/freemind.js'

kityminder.config.js

@@ -63,7 +63,7 @@
         'KITYMINDER_HOME_URL': getKMBasePath(),
         //定义工具栏
         toolbars: [
-            'hand | zoom-in zoom zoom-out | collapsenode expandnode | undo redo | bold italic | fontfamily fontsize forecolor | saveto | hyperlink unhyperlink | markers | node | help'
+            'hand | zoom-in zoom zoom-out | collapsenode expandnode | undo redo | bold italic | fontfamily fontsize forecolor | saveto | hyperlink unhyperlink image removeimage | markers | node | help'
         ]
         //只读模式，默认是false
         //readOnly: true
@@ -89,5 +89,10 @@
         // }
         //配置放大缩小的比例
         //,zoom:[50,80,100,120,150,200]
+        //
+        //图片尺寸限制
+        //,maxImageWidth: 200
+        //,maxImageHeight: 200
+        //
     };
 } )();
\ No newline at end of file

lang/zh-cn/zh-cn.js

@@ -18,6 +18,7 @@ KityMinder.LANG[ 'zh-cn' ] = {
         'switchlayout': '切换主题',
         'help': '帮助',
         'preference': '偏好设置',
+        'image': '插入图片',
         'hyperlink': '插入链接',
         'unhyperlink': "删除链接",
         'expandnode': "展开节点",
@@ -48,7 +49,8 @@ KityMinder.LANG[ 'zh-cn' ] = {
         'help': {
 
         },
-        hyperlink: {}
+        'hyperlink': {},
+        'image': {}
     },
     'node': {
         'appendsiblingnode': '插入同级节点',
@@ -63,6 +65,10 @@ KityMinder.LANG[ 'zh-cn' ] = {
     'hyperlink':{
         'hyperlink':'插入超链接',
         'unhyperlink':"取消超链接"
+    },
+    'image':{
+        'image': '插入图片',
+        'removeimage': '删除图片'
     }
 
 };
\ No newline at end of file

src/adapter/button.js

-KM.registerToolbarUI( 'bold italic redo undo unhyperlink expandnode collapsenode hand zoom-in zoom-out',
+KM.registerToolbarUI( 'bold italic redo undo unhyperlink removeimage expandnode collapsenode hand zoom-in zoom-out',
     function ( name ) {
         var me = this;
         var $btn = $.kmuibutton( {

src/adapter/image.js

+KM.registerToolbarUI( 'image', function ( name ) {
+
+    var me = this,
+        currentRange, $dialog,
+        opt = {
+            title: this.getLang( 'tooltips' )[ name ] || '',
+            url: me.getOptions( 'KITYMINDER_HOME_URL' ) + 'dialogs/' + name + '/' + name + '.js'
+
+        };
+
+    var $btn = $.kmuibutton( {
+        icon: name,
+        title: this.getLang( 'tooltips' )[ name ] || ''
+    } );
+
+    //加载模版数据
+    utils.loadFile( document, {
+        src: opt.url,
+        tag: "script",
+        type: "text/javascript",
+        defer: "defer"
+    }, function () {
+
+        $dialog = $.kmuimodal( opt );
+
+        $dialog.attr( 'id', 'kmui-dialog-' + name ).addClass( 'kmui-dialog-' + name )
+            .find( '.kmui-modal-body' ).addClass( 'kmui-dialog-' + name + '-body' );
+
+        $dialog.kmui().on( 'beforeshow', function () {
+            var $root = this.root(),
+                win = null,
+                offset = null;
+            if ( !$root.parent()[ 0 ] ) {
+                me.$container.find( '.kmui-dialog-container' ).append( $root );
+            }
+            KM.setWidgetBody( name, $dialog, me );
+        } ).attachTo( $btn );
+
+
+    } );
+
+    me.addContextmenu( [ {
+            label: me.getLang( 'image.image' ),
+            exec: function (url) {
+                $dialog.kmui().show();
+            },
+            cmdName: 'image'
+        },{
+            label: me.getLang( 'image.removeimage' ),
+            exec: function () {
+                this.execCommand( 'removeimage' );
+            },
+            cmdName: 'removeimage'
+        }
+    ]);
+
+    me.on( 'interactchange', function () {
+        var state = this.queryCommandState( name );
+        $btn.kmui().disabled( state == -1 ).active( state == 1 );
+    } );
+    return $btn;
+} );
\ No newline at end of file

src/module/image.js

+KityMinder.registerModule( "image", function () {
+    function loadImageSize( url, callback ) {
+        var img = document.createElement( 'img' );
+        img.onload = function () {
+            callback( img.width, img.height );
+        };
+        img.onerror = function () {
+            callback( null );
+        };
+        img.src = url;
+    }
+
+    function fitImageSize( width, height, maxWidth, maxHeight ) {
+        var ratio = width / height,
+            fitRatio = maxWidth / maxHeight;
+
+        // 宽高比大于最大尺寸的宽高比，以宽度为标准适应
+        if ( ratio > fitRatio && width > maxWidth ) {
+            width = maxWidth;
+            height = maxWidth / ratio;
+        } else if(height > maxHeight) {
+            height = maxHeight;
+            width = maxHeight / ratio;
+        }
+
+        return {
+            width: width,
+            height: height
+        };
+    }
+    return {
+        "defaultOptions": {
+            "maxImageWidth": 200,
+            "maxImageHeight": 200
+        },
+        "commands": {
+            "image": kity.createClass( "ImageCommand", {
+                base: Command,
+
+                execute: function ( km, url ) {
+                    var nodes = km.getSelectedNodes();
+
+                    loadImageSize( url, function ( width, height ) {
+                        if ( !width ) return;
+                        utils.each( nodes, function ( i, n ) {
+                            n.setData( 'image', url );
+                            n.setData( 'imageWidth', width );
+                            n.setData( 'imageHeight', height );
+                            km.updateLayout( n );
+                        } );
+                    } );
+
+                },
+                queryState: function ( km ) {
+                    var nodes = km.getSelectedNodes(),
+                        result = 0;
+                    if ( nodes.length === 0 ) {
+                        return -1;
+                    }
+                    utils.each( nodes, function ( i, n ) {
+                        if ( n && n.getData( 'image' ) ) {
+                            result = 0;
+                            return false;
+                        }
+                    } );
+                    return result;
+                },
+                queryValue: function ( km ) {
+                    var node = km.getSelectedNode();
+                    return node.getData( 'image' );
+                }
+            } ),
+            "removeimage": kity.createClass( "RemoveImageCommand", {
+                base: Command,
+
+                execute: function ( km ) {
+                    var nodes = km.getSelectedNodes();
+                    utils.each( nodes, function ( i, n ) {
+                        n.setData( 'image' );
+                        km.updateLayout( n );
+                    } );
+                },
+                queryState: function ( km ) {
+                    var nodes = km.getSelectedNodes();
+
+                    if ( nodes.length == 0 ) {
+                        return -1;
+                    }
+                    var image = false;
+                    utils.each( nodes, function ( i, n ) {
+                        if ( n.getData( 'image' ) ) {
+                            image = true;
+                            return false;
+                        }
+                    } );
+                    if ( image ) {
+                        return 0;
+                    }
+                    return -1;
+                }
+            } )
+        },
+        "events": {
+            "RenderNodeTop": function ( e ) {
+                var node = e.node,
+                    url = node.getData( 'image' );
+                var link, img, size, currentBox;
+
+                if ( url ) {
+
+                    size = fitImageSize(
+                        node.getData( 'imageWidth' ),
+                        node.getData( 'imageHeight' ),
+                        this.getOptions( 'maxImageWidth' ),
+                        this.getOptions( 'maxImageHeight' ) );
+
+                    img = new kity.Image( url, size.width, size.height );
+
+                    link = new kity.HyperLink( url );
+                    link.addShape( img );
+                    link.setTarget( '_blank' );
+                    link.setStyle( 'cursor', 'pointer' );
+
+                    currentBox = node.getContRc().getBoundaryBox();
+                    node.getContRc().addShape( link.setTranslate( 0, currentBox.y - size.height ) );
+
+                }
+            }
+        }
+    };
+} );
\ No newline at end of file

themes/default/css/buttonicon.css

@@ -14,6 +14,12 @@
 .kmui-btn-toolbar .kmui-btn .kmui-icon-font, .kmui-btn-toolbar .kmui-btn .kmui-icon-forecolor {
     background-position: -720px 1px;
 }
+.kmui-btn-toolbar .kmui-btn .kmui-icon-image {
+    background: url(../images/picture_add.png) no-repeat 2px 2px;
+}
+.kmui-btn-toolbar .kmui-btn .kmui-icon-removeimage {
+    background: url(../images/picture_delete.png) no-repeat 2px 2px;
+}
 .kmui-btn-toolbar .kmui-btn .kmui-icon-hand {
     background: url(../images/hand.png) no-repeat 2px 2px;
 }