Adds tinyMCE umbraco embed plugin
This commit is contained in:
tg@umbraco.com
@@ -323,7 +323,7 @@
|
||||
<Content Include="umbraco\config\lang\se.xml" />
|
||||
<Content Include="umbraco\config\lang\zh.xml" />
|
||||
<Content Include="umbraco\controls\Tree\CustomTreeService.asmx" />
|
||||
<Content Include="umbraco\dashboard\scripts\swfobject.js" />
|
||||
<Content Include="umbraco\dashboard\scripts\swfobject.js" />
|
||||
<Content Include="umbraco\dashboard\MediaDashboardFolderBrowser.ascx" />
|
||||
<Content Include="umbraco\developer\RelationTypes\EditRelationType.aspx" />
|
||||
<Content Include="umbraco\developer\RelationTypes\Images\Bidirectional.png" />
|
||||
@@ -735,6 +735,14 @@
|
||||
<Content Include="umbraco_client\tinymce3\plugins\umbracocss\js\dialog.js" />
|
||||
<Content Include="umbraco_client\tinymce3\plugins\umbracocss\langs\en.js" />
|
||||
<Content Include="umbraco_client\tinymce3\plugins\umbracocss\langs\en_dlg.js" />
|
||||
<Content Include="umbraco_client\tinymce3\plugins\umbracoembed\dialog.htm" />
|
||||
<Content Include="umbraco_client\tinymce3\plugins\umbracoembed\editor_plugin.js" />
|
||||
<Content Include="umbraco_client\tinymce3\plugins\umbracoembed\editor_plugin_src.js" />
|
||||
<Content Include="umbraco_client\tinymce3\plugins\umbracoembed\img\ajax-loader.gif" />
|
||||
<Content Include="umbraco_client\tinymce3\plugins\umbracoembed\img\embed.png" />
|
||||
<Content Include="umbraco_client\tinymce3\plugins\umbracoembed\js\dialog.js" />
|
||||
<Content Include="umbraco_client\tinymce3\plugins\umbracoembed\langs\en.js" />
|
||||
<Content Include="umbraco_client\tinymce3\plugins\umbracoembed\langs\en_dlg.js" />
|
||||
<Content Include="umbraco_client\tinymce3\plugins\umbracoimg\editor_plugin_src.js" />
|
||||
<Content Include="umbraco_client\tinymce3\plugins\umbracoimg\js\image.js" />
|
||||
<Content Include="umbraco_client\tinymce3\plugins\umbracoimg\langs\en_dlg.js" />
|
||||
|
||||
@@ -0,0 +1,92 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>{#embed_dlg.title}</title>
|
||||
<script type="text/javascript" src="../../../ui/jquery.js"></script>
|
||||
<script type="text/javascript" src="../../tiny_mce_popup.js"></script>
|
||||
<script type="text/javascript" src="js/dialog.js"></script>
|
||||
<script type="text/javascript" src="../../utils/mctabs.js"></script>
|
||||
<style>
|
||||
#previewContainer
|
||||
{
|
||||
height:195px;
|
||||
width:550px;
|
||||
overflow:auto;
|
||||
}
|
||||
#source
|
||||
{
|
||||
width:99%;
|
||||
height:270px;
|
||||
|
||||
}
|
||||
#url
|
||||
{
|
||||
width:400px;
|
||||
}
|
||||
.size
|
||||
{
|
||||
width:50px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<form onsubmit="UmbracoEmbedDialog.insert();return false;" action="#">
|
||||
<div class="tabs" role="presentation">
|
||||
<ul>
|
||||
<li id="general_tab" class="current" aria-controls="general_panel"><span><a href="javascript:mcTabs.displayTab('general_tab','general_panel');" onmousedown="return false;">{#embed_dlg.general}</a></span></li>
|
||||
<li id="source_tab" aria-controls="source_panel"><span><a href="javascript:mcTabs.displayTab('source_tab','source_panel');" onmousedown="return false;">{#embed_dlg.source}</a></span></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="panel_wrapper">
|
||||
<div id="general_panel" class="panel current">
|
||||
<fieldset>
|
||||
<legend>{#embed_dlg.general}</legend>
|
||||
<table role="presentation" border="0" cellpadding="4" cellspacing="0">
|
||||
<tr>
|
||||
<td><label for="media_type">{#embed_dlg.url}</label></td>
|
||||
<td>
|
||||
<input type="text" id="url" onChange="EmbedEmAllDialog.showPreview()"/>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="dimensions">
|
||||
<td><label for="width">{#embed_dlg.size}</label></td>
|
||||
<td>
|
||||
<table role="presentation" border="0" cellpadding="0" cellspacing="0">
|
||||
<tr>
|
||||
<td><input type="text" id="width" name="width" value="500" class="size" onchange="UmbracoEmbedDialog.changeSize('width');" onfocus="UmbracoEmbedDialog.beforeResize();"/> x <input type="text" id="height" name="height" value="300" class="size" onchange="UmbracoEmbedDialog.changeSize('height');" onfocus="UmbracoEmbedDialog.beforeResize();" /></td>
|
||||
<td> <input id="constrain" type="checkbox" name="constrain" class="checkbox" checked="checked" /></td>
|
||||
<td><label id="constrainlabel" for="constrain">{#embed_dlg.constrain_proportions}</label></td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<legend>{#embed_dlg.preview}</legend>
|
||||
<div id="previewContainer">
|
||||
<div id="preview">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div id="source_panel" class="panel">
|
||||
<fieldset>
|
||||
<legend>{#embed_dlg.source}</legend>
|
||||
<textarea id="source"></textarea>
|
||||
</fieldset>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="mceActionPanel">
|
||||
<input type="button" id="insert" name="insert" value="{#insert}" onclick="UmbracoEmbedDialog.insert();" disabled="disabled"/>
|
||||
<input type="button" id="cancel" name="cancel" value="{#cancel}" onclick="tinyMCEPopup.close();" />
|
||||
</div>
|
||||
</form>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1 @@
|
||||
(function(){tinymce.PluginManager.requireLangPack("example");tinymce.create("tinymce.plugins.ExamplePlugin",{init:function(a,b){a.addCommand("mceExample",function(){a.windowManager.open({file:b+"/dialog.htm",width:320+parseInt(a.getLang("example.delta_width",0)),height:120+parseInt(a.getLang("example.delta_height",0)),inline:1},{plugin_url:b,some_custom_arg:"custom arg"})});a.addButton("example",{title:"example.desc",cmd:"mceExample",image:b+"/img/example.gif"});a.onNodeChange.add(function(d,c,e){c.setActive("example",e.nodeName=="IMG")})},createControl:function(b,a){return null},getInfo:function(){return{longname:"Example plugin",author:"Some author",authorurl:"http://tinymce.moxiecode.com",infourl:"http://wiki.moxiecode.com/index.php/TinyMCE:Plugins/example",version:"1.0"}}});tinymce.PluginManager.add("example",tinymce.plugins.ExamplePlugin)})();
|
||||
@@ -0,0 +1,84 @@
|
||||
/**
|
||||
* editor_plugin_src.js
|
||||
*
|
||||
* Copyright 2009, Moxiecode Systems AB
|
||||
* Released under LGPL License.
|
||||
*
|
||||
* License: http://tinymce.moxiecode.com/license
|
||||
* Contributing: http://tinymce.moxiecode.com/contributing
|
||||
*/
|
||||
|
||||
(function() {
|
||||
// Load plugin specific language pack
|
||||
tinymce.PluginManager.requireLangPack('umbracoembed');
|
||||
|
||||
tinymce.create('tinymce.plugins.umbracoembed', {
|
||||
/**
|
||||
* Initializes the plugin, this will be executed after the plugin has been created.
|
||||
* This call is done before the editor instance has finished it's initialization so use the onInit event
|
||||
* of the editor instance to intercept that event.
|
||||
*
|
||||
* @param {tinymce.Editor} ed Editor instance that the plugin is initialized in.
|
||||
* @param {string} url Absolute URL to where the plugin is located.
|
||||
*/
|
||||
init : function(ed, url) {
|
||||
// Register the command so that it can be invoked by using tinyMCE.activeEditor.execCommand('mceExample');
|
||||
ed.addCommand('mceUmbracoEmbed', function() {
|
||||
ed.windowManager.open({
|
||||
file : url + '/dialog.htm',
|
||||
width : 600 + parseInt(ed.getLang('example.delta_width', 0)),
|
||||
height : 400 + parseInt(ed.getLang('example.delta_height', 0)),
|
||||
inline : 1
|
||||
}, {
|
||||
plugin_url : url, // Plugin absolute URL
|
||||
some_custom_arg : 'custom arg' // Custom argument
|
||||
});
|
||||
});
|
||||
|
||||
// Register example button
|
||||
ed.addButton('umbracoembed', {
|
||||
title : 'Embed third party media',
|
||||
cmd : 'mceUmbracoEmbed',
|
||||
image : url + '/img/embed.png'
|
||||
});
|
||||
|
||||
// Add a node change handler, selects the button in the UI when a image is selected
|
||||
/*ed.onNodeChange.add(function(ed, cm, n) {
|
||||
cm.setActive('example', n.nodeName == 'IMG');
|
||||
});*/
|
||||
},
|
||||
|
||||
/**
|
||||
* Creates control instances based in the incomming name. This method is normally not
|
||||
* needed since the addButton method of the tinymce.Editor class is a more easy way of adding buttons
|
||||
* but you sometimes need to create more complex controls like listboxes, split buttons etc then this
|
||||
* method can be used to create those.
|
||||
*
|
||||
* @param {String} n Name of the control to create.
|
||||
* @param {tinymce.ControlManager} cm Control manager to use inorder to create new control.
|
||||
* @return {tinymce.ui.Control} New control instance or null if no control was created.
|
||||
*/
|
||||
createControl : function(n, cm) {
|
||||
return null;
|
||||
},
|
||||
|
||||
/**
|
||||
* Returns information about the plugin as a name/value array.
|
||||
* The current keys are longname, author, authorurl, infourl and version.
|
||||
*
|
||||
* @return {Object} Name/value array containing information about the plugin.
|
||||
*/
|
||||
getInfo : function() {
|
||||
return {
|
||||
longname : 'Umbraco Embed',
|
||||
author : 'Tim Geyssens',
|
||||
authorurl : 'http://http://umbraco.com/',
|
||||
infourl : 'http://http://umbraco.com/',
|
||||
version : "1.0"
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
// Register plugin
|
||||
tinymce.PluginManager.add('umbracoembed', tinymce.plugins.umbracoembed);
|
||||
})();
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 537 B |
@@ -0,0 +1,82 @@
|
||||
tinyMCEPopup.requireLangPack();
|
||||
|
||||
var UmbracoEmbedDialog = {
|
||||
insert: function () {
|
||||
// Insert the contents from the input into the document
|
||||
tinyMCEPopup.editor.execCommand('mceInsertContent', false, $('#source').val());
|
||||
tinyMCEPopup.close();
|
||||
},
|
||||
showPreview: function () {
|
||||
|
||||
$('#insert').attr('disabled', 'disabled');
|
||||
|
||||
var url = $('#url').val();
|
||||
var width = $('#width').val(); ;
|
||||
var height = $('#height').val(); ;
|
||||
|
||||
$('#preview').html('<img src="img/ajax-loader.gif" alt="loading"/>');
|
||||
$('#source').val('');
|
||||
$.ajax(
|
||||
{
|
||||
type: 'POST',
|
||||
async: true,
|
||||
url: '/umbraco/plugins/embedemall/service/Embed.asmx/EmbedIt',
|
||||
data: '{ url: "' + url + '", width: "' + width + '", height: "' + height + '" }',
|
||||
contentType: 'application/json; charset=utf-8',
|
||||
dataType: 'json',
|
||||
success: function (msg) {
|
||||
var resultAsJson = msg.d;
|
||||
switch (resultAsJson.Status) {
|
||||
case 0:
|
||||
//not supported
|
||||
$('#preview').html('Not Supported');
|
||||
break;
|
||||
case 1:
|
||||
//error
|
||||
$('#preview').html('Error');
|
||||
break;
|
||||
case 2:
|
||||
$('#preview').html(resultAsJson.Markup);
|
||||
$('#source').val(resultAsJson.Markup);
|
||||
if (resultAsJson.SupportsDimensions) {
|
||||
$('#dimensions').show();
|
||||
} else {
|
||||
$('#dimensions').hide();
|
||||
}
|
||||
$('#insert').removeAttr('disabled');
|
||||
break;
|
||||
}
|
||||
|
||||
},
|
||||
error: function (xhr, ajaxOptions, thrownError) {
|
||||
$('#preview').html("Error");
|
||||
//alert(xhr.status);
|
||||
//alert(thrownError);
|
||||
}
|
||||
});
|
||||
},
|
||||
beforeResize: function () {
|
||||
this.width = parseInt($('#width').val(), 10);
|
||||
this.height = parseInt($('#height').val(), 10);
|
||||
},
|
||||
changeSize: function (type) {
|
||||
var width, height, scale, size;
|
||||
|
||||
if ($('#constrain').is(':checked')) {
|
||||
width = parseInt($('#width').val(), 10);
|
||||
height = parseInt($('#height').val(), 10);
|
||||
if (type == 'width') {
|
||||
this.height = Math.round((width / this.width) * height);
|
||||
$('#height').val(this.height);
|
||||
} else {
|
||||
this.width = Math.round((height / this.height) * width);
|
||||
$('#width').val(this.width);
|
||||
}
|
||||
}
|
||||
|
||||
if ($('#url').val() != '') {
|
||||
UmbracoEmbedDialog.showPreview();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@@ -0,0 +1,10 @@
|
||||
tinyMCE.addI18n('en.embed_dlg', {
|
||||
title: 'Insert rich media',
|
||||
general: 'General',
|
||||
url: 'Url:',
|
||||
size: 'Size:',
|
||||
constrain_proportions: 'Constrain',
|
||||
preview: 'Preview',
|
||||
source: 'Source'
|
||||
|
||||
});
|
||||
@@ -0,0 +1,10 @@
|
||||
tinyMCE.addI18n('en.embed_dlg', {
|
||||
title: 'Insert rich media',
|
||||
general: 'General',
|
||||
url: 'Url:',
|
||||
size: 'Size:',
|
||||
constrain_proportions: 'Constrain',
|
||||
preview: 'Preview',
|
||||
source: 'Source'
|
||||
|
||||
});
|
||||
Reference in New Issue
Block a user