117 lines
3.4 KiB
HTML
117 lines
3.4 KiB
HTML
<!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>
|