first commit
This commit is contained in:
116
libraries/ckeditor/plugins/googlemaps/docs/inlinesample.html
Normal file
116
libraries/ckeditor/plugins/googlemaps/docs/inlinesample.html
Normal file
@@ -0,0 +1,116 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Copyright (c) 2003-2014, CKSource - Frederico Knabben. All rights reserved.
|
||||
For licensing, see LICENSE.md or http://ckeditor.com/license
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Inline Editing by Code — CKEditor Sample</title>
|
||||
<script src="../ckeditor.js"></script>
|
||||
<link href="sample.css" rel="stylesheet">
|
||||
<style>
|
||||
|
||||
#editable
|
||||
{
|
||||
padding: 10px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1 class="samples">
|
||||
Google Maps plugin used with CKEditor in inline mode
|
||||
</h1>
|
||||
<div class="description">
|
||||
<p>
|
||||
This sample shows how to create an inline editor instance of CKEditor. It is created
|
||||
with a JavaScript call using the following code:
|
||||
</p>
|
||||
<pre class="samples">
|
||||
// This property tells CKEditor to not activate every element with contenteditable=true element.
|
||||
CKEDITOR.disableAutoInline = true;
|
||||
|
||||
var editor = CKEDITOR.inline( document.getElementById( 'editable' ) );
|
||||
</pre>
|
||||
<p>
|
||||
Note that <code>editable</code> in the code above is the <code>id</code>
|
||||
attribute of the <code><div></code> element to be converted into an inline instance.
|
||||
</p>
|
||||
</div>
|
||||
<div id="editable" contenteditable="true">
|
||||
<p>This is an editable element with a Google maps</p>
|
||||
<div id="dgmap201431202520"><img alt="" id="gmap201431202520" src="//maps.googleapis.com/maps/api/staticmap?center=37.44190,-122.14190&zoom=11&size=500x370&maptype=roadmap&markers=color:purple|37.41680,-122.15355&sensor=false" style="height:370px; width:500px" />
|
||||
<x-script type="text/javascript">
|
||||
/*<![CDATA[*/
|
||||
/* CK googlemaps v3.6 */
|
||||
var imgMap = document.getElementById("gmap201431202520"),
|
||||
dMap = document.createElement("div");
|
||||
dMap.id="wgmap201431202520";
|
||||
imgMap.parentNode.insertBefore( dMap, imgMap);
|
||||
dMap.appendChild(imgMap);
|
||||
dMap.style.width = "500px";
|
||||
dMap.style.height = "370px";
|
||||
/*generatedType = 3;*/
|
||||
function CreateGMapgmap201431202520() {
|
||||
var dMap = document.getElementById("gmap201431202520");
|
||||
if (dMap)
|
||||
dMap = dMap.parentNode;
|
||||
else
|
||||
dMap = document.getElementById("wgmap201431202520");
|
||||
if (!dMap) return;
|
||||
if (dMap.ckemap) {
|
||||
var map = dMap.ckemap.map, center = map.getCenter();
|
||||
google.maps.event.trigger(map, "resize");
|
||||
map.setCenter(center);
|
||||
return;
|
||||
}
|
||||
dMap.onclick = null;
|
||||
var mapOptions = {
|
||||
zoom: 11,
|
||||
center: [37.44190,-122.14190],
|
||||
mapType: 0,
|
||||
zoomControl: "Default",
|
||||
mapsControl: "Default",
|
||||
heading: 0,
|
||||
tilt: 0,
|
||||
overviewMapControlOptions: {opened:true},
|
||||
pathType: "Default",
|
||||
googleBar: false
|
||||
};
|
||||
var myMap = new CKEMap(dMap, mapOptions);
|
||||
dMap.ckemap=myMap;
|
||||
myMap.AddMarkers( [{lat:37.41680, lon:-122.15355, text:"<p>Info about the point<\/p>\n",color:"purple", title:"Title", maxWidth:200, open:0}] );
|
||||
}
|
||||
|
||||
if (!window.gmapsLoaders) window.gmapsLoaders = [];
|
||||
window.gmapsLoaders.push(CreateGMapgmap201431202520);
|
||||
window.gmapsAutoload=true;
|
||||
/*]]>*/
|
||||
</x-script></div>
|
||||
|
||||
<p> </p>
|
||||
|
||||
<x-script type="text/javascript" src="/FCKplugins/CKE_mios/googlemaps/scripts/cke_gmaps_end.js">/* CK googlemapsEnd v3.6 */</x-script>
|
||||
<p>End of the editable zone</p>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// We need to turn off the automatic editor creation first.
|
||||
CKEDITOR.disableAutoInline = true;
|
||||
var div = document.getElementById("editable");
|
||||
var value = div.innerHTML;
|
||||
var editor = CKEDITOR.inline( 'editable', {
|
||||
on : {
|
||||
instanceReady: function(ev) {
|
||||
ev.editor.setData(value.replace(/x-script/g, "script"));
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<div id="footer">
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user