Skip to content

K
kityminder-core
Commit 39896607 authored by techird's avatar techird
Browse files
Options

插入图片功能

parent bb593e10
Show whitespace changes
Inline Side-by-side
Showing with 290 additions and 3 deletions
.jshintrc
View file @ 39896607
...@@ -7,6 +7,7 @@ ...@@ -7,6 +7,7 @@
"trailing" : true, "trailing" : true,
"white": false, "white": false,
"quotmark": false, "quotmark": false,
"browser": true,
"predef" : [ "predef" : [
"module", "module",
"require", "require",
......
dialogs/image/image.js 0 → 100644
View file @ 39896607
( 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
View file @ 39896607
...@@ -23,6 +23,7 @@ ...@@ -23,6 +23,7 @@
,'module/geometry.js' ,'module/geometry.js'
,'module/history.js' ,'module/history.js'
,'module/icon.js' ,'module/icon.js'
,'module/image.js'
,'module/layout.js' ,'module/layout.js'
,'module/layout.default.js' ,'module/layout.default.js'
,'module/layout.bottom.js' ,'module/layout.bottom.js'
...@@ -72,6 +73,7 @@ ...@@ -72,6 +73,7 @@
,'adapter/contextmenu.js' ,'adapter/contextmenu.js'
,'adapter/dialog.js' ,'adapter/dialog.js'
,'adapter/hyperlink.js' ,'adapter/hyperlink.js'
,'adapter/image.js'
,'adapter/zoom.js' ,'adapter/zoom.js'
,'protocal/xmind.js' ,'protocal/xmind.js'
,'protocal/freemind.js' ,'protocal/freemind.js'
......
kityminder.config.js
View file @ 39896607
...@@ -63,7 +63,7 @@ ...@@ -63,7 +63,7 @@
'KITYMINDER_HOME_URL': getKMBasePath(), 'KITYMINDER_HOME_URL': getKMBasePath(),
//定义工具栏 //定义工具栏
toolbars: [ 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 //只读模式，默认是false
//readOnly: true //readOnly: true
...@@ -89,5 +89,10 @@ ...@@ -89,5 +89,10 @@
// } // }
//配置放大缩小的比例 //配置放大缩小的比例
//,zoom:[50,80,100,120,150,200] //,zoom:[50,80,100,120,150,200]
//
//图片尺寸限制
//,maxImageWidth: 200
//,maxImageHeight: 200
//
}; };
} )(); } )();
\ No newline at end of file
lang/zh-cn/zh-cn.js
View file @ 39896607
...@@ -18,6 +18,7 @@ KityMinder.LANG[ 'zh-cn' ] = { ...@@ -18,6 +18,7 @@ KityMinder.LANG[ 'zh-cn' ] = {
'switchlayout': '切换主题', 'switchlayout': '切换主题',
'help': '帮助', 'help': '帮助',
'preference': '偏好设置', 'preference': '偏好设置',
'image': '插入图片',
'hyperlink': '插入链接', 'hyperlink': '插入链接',
'unhyperlink': "删除链接", 'unhyperlink': "删除链接",
'expandnode': "展开节点", 'expandnode': "展开节点",
...@@ -48,7 +49,8 @@ KityMinder.LANG[ 'zh-cn' ] = { ...@@ -48,7 +49,8 @@ KityMinder.LANG[ 'zh-cn' ] = {
'help': { 'help': {
}, },
hyperlink: {} 'hyperlink': {},
'image': {}
}, },
'node': { 'node': {
'appendsiblingnode': '插入同级节点', 'appendsiblingnode': '插入同级节点',
...@@ -63,6 +65,10 @@ KityMinder.LANG[ 'zh-cn' ] = { ...@@ -63,6 +65,10 @@ KityMinder.LANG[ 'zh-cn' ] = {
'hyperlink':{ 'hyperlink':{
'hyperlink':'插入超链接', 'hyperlink':'插入超链接',
'unhyperlink':"取消超链接" 'unhyperlink':"取消超链接"
},
'image':{
'image': '插入图片',
'removeimage': '删除图片'
} }
}; };
\ No newline at end of file
src/adapter/button.js
View file @ 39896607
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 ) { function ( name ) {
var me = this; var me = this;
var $btn = $.kmuibutton( { var $btn = $.kmuibutton( {
......
src/adapter/image.js 0 → 100644
View file @ 39896607
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 0 → 100644
View file @ 39896607
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
View file @ 39896607
...@@ -14,6 +14,12 @@ ...@@ -14,6 +14,12 @@
.kmui-btn-toolbar .kmui-btn .kmui-icon-font, .kmui-btn-toolbar .kmui-btn .kmui-icon-forecolor { .kmui-btn-toolbar .kmui-btn .kmui-icon-font, .kmui-btn-toolbar .kmui-btn .kmui-icon-forecolor {
background-position: -720px 1px; 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 { .kmui-btn-toolbar .kmui-btn .kmui-icon-hand {
background: url(../images/hand.png) no-repeat 2px 2px; background: url(../images/hand.png) no-repeat 2px 2px;
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment