Hi guys,
I have scratched my head for the last 2 days on creating a fake Element placehold for <script> tags that works similarly like ckeditor did to flash object. Ckeditor has a big placehold with red 'flash' in word when you edit a content has flash. I want to do the same for 'script' tag. I have been looking around on the internet and ckeditor forum and tried different thing but it didnt work out for me. So I ask for community help.
In ckeditor/_source/plugin, I create 'jstag' folder that has 'plugin.js' and 'images' folder for the placeholder img.
In the plugin.js, I have the following:
Please give me some guides to solve this problem. If I place anything in wrong place, please let me know.
Thanks much.
I have scratched my head for the last 2 days on creating a fake Element placehold for <script> tags that works similarly like ckeditor did to flash object. Ckeditor has a big placehold with red 'flash' in word when you edit a content has flash. I want to do the same for 'script' tag. I have been looking around on the internet and ckeditor forum and tried different thing but it didnt work out for me. So I ask for community help.
In ckeditor/_source/plugin, I create 'jstag' folder that has 'plugin.js' and 'images' folder for the placeholder img.
In the plugin.js, I have the following:
(function()
{
var numberRegex = /^\d+(?:\.\d+)?$/;
function cssifyLength( length )
{
if ( numberRegex.test( length ) )
return length + 'px';
return length;
}
function createFakeElement( editor, realElement )
{
var fakeElement = editor.createFakeParserElement( realElement, 'script', 'script', false );
var width = 100,
height = 100;
if ( typeof width != 'undefined' )
fakeStyle = fakeElement.attributes.style = fakeStyle + 'width:' + cssifyLength( width ) + ';';
if ( typeof height != 'undefined' )
fakeStyle = fakeElement.attributes.style = fakeStyle + 'height:' + cssifyLength( height ) + ';';
return fakeElement;
}
CKEDITOR.plugins.add( 'js',
{
init : function( editor )
{
editor.addCss(
'div.media_embed' +
'{' +
'background-image: url(' + CKEDITOR.getUrl( this.path + 'images/placeholder.png' ) + ');' +
'background-position: center center;' +
'background-repeat: no-repeat;' +
'border: 1px solid #a9a9a9;' +
'width: 80px;' +
'height: 80px;' +
'}'
);
//this plugin does anything except for replace <div class='media_embed'> <script> </script> </div> tag with a placeholder image
},
afterInit : function( editor )
{
var dataProcessor = editor.dataProcessor,
dataFilter = dataProcessor && dataProcessor.dataFilter;
if ( dataFilter )
{
dataFilter.addRules(
{
elements :
{
script: function( element )
{
return createFakeElement( editor, element );
}
}
},
4);
}
},
requires : [ 'fakeobjects' ]
});
})();
Please give me some guides to solve this problem. If I place anything in wrong place, please let me know.
Thanks much.
Re: Create fake Element Placehold for <script> tag
viewtopic.php?f=11&t=19752
Re: Create fake Element Placehold for <script> tag
( function() { CKEDITOR.plugins.add( 'MediaEmbed', { requires: [ 'dialog' ], init: function( editor ) { var me = this; CKEDITOR.dialog.add( 'MediaEmbedDialog', function () { return { title : 'Embed Media Dialog', minWidth : 550, minHeight : 100, contents : [ { id : 'dialog', label : 'Paste Embed Media', expand : true, elements : [ { type : 'textarea', id : 'pageMediaEmbed', label : 'Paste Embed Media', style : 'width:100%' } ] } ], onOk : function() { var content = CKEDITOR.dialog.getCurrent().getValueOf('dialog','pageMediaEmbed'); editor.insertHtml('<div class="media_embed">'+content+'</div>'); } }; } ); editor.addCommand( 'MediaEmbed', new CKEDITOR.dialogCommand( 'MediaEmbedDialog' ) ); editor.ui.addButton( 'MediaEmbed', { label: 'Insert Embed Media', command: 'MediaEmbed', icon: this.path + 'images/icon.gif' } ); }, afterInit : function( editor ) { function createFakeElement(realElement) { var fakeElement = editor.createFakeParserElement(realElement, 'media_embed', 'script', false), fakeStyle = ''; fakeStyle = fakeElement.attributes.style = fakeStyle + 'width:10px;'; fakeStyle = fakeElement.attributes.style = fakeStyle + 'height:10px;'; return fakeElement; } var dataProcessor = editor.dataProcessor; var dataFilter = dataProcessor && dataProcessor.dataFilter; if (dataFilter) { dataFilter.addRules({ elements: { 'script': function(element) { return createFakeElement(element); } } }, 10); } }, requires : [ 'fakeobjects' ] } ); } )();In ckeditor/content.css, i have .embed_media { border: 2px solid red; }
When I insert script using the MediaEmbed plugin, the following code is inserted to Source.
But the normal view shows nothing. There are no fakeElements appear.
Re: Create fake Element Placehold for <script> tag
Re: Create fake Element Placehold for <script> tag
The difference is that _source contains all the source uncompressed codes. To work with the sources, and ignore the regular code, you shall include CKEditor in this way:
Of course, using sources require you to use ckeditor/_sources/plugins instead of ckeditor/plugins/
Sorry, no time to look at your code.
~Aki