I am developing my own CMS and the CMS uses custom tags. The tags look like this:
I have successfully created two plugins that are inserting the tags into the editor. Of course the editor does not display them. The user needs to know that they are there, so I am wanting to insert a placeholder. I have been checking forums and documentation for hours. When the tag is first placed in the editor the placeholder is also inserted, but when I go into source view and back out or when I reload the page after saving, the placeholder disappears. So I tried the whole datafilter.addRules() deal and that is doing nothing for me. Can I get some help?
plugin.js
sm_formBuilder.js
The plugin works fine, except for the retaining of the placeholder. The placeholder script doesn't even have to be in the plugin, so long as it displays whenever and wherever there is an "sm" tag.
<sm name="widget_name" attr="random:settings;" />
I have successfully created two plugins that are inserting the tags into the editor. Of course the editor does not display them. The user needs to know that they are there, so I am wanting to insert a placeholder. I have been checking forums and documentation for hours. When the tag is first placed in the editor the placeholder is also inserted, but when I go into source view and back out or when I reload the page after saving, the placeholder disappears. So I tried the whole datafilter.addRules() deal and that is doing nothing for me. Can I get some help?
plugin.js
CKEDITOR.plugins.add('sm_formBuilder',{ init : function(editor){ editor.addCss( 'img.sm_formBuilder' + '{' + //'background-image: url(' + CKEDITOR.getUrl( this.path + 'images/placeholder.png' ) + ');' + //'background-position: center center;' + //'background-repeat: no-repeat;' + 'background-color: #000000;' + 'border: 1px solid #a9a9a9;' + 'width: 80px;' + 'height: 80px;' + '}' ); var pluginName = 'sm_formBuilder'; var pluginTitle = 'Form Builder'; CKEDITOR.dialog.add(pluginName,this.path + 'dialogs/' + pluginName + '.js'); editor.addCommand(pluginName,new CKEDITOR.dialogCommand(pluginName)); editor.ui.addButton(pluginTitle,{ label : pluginTitle, command : pluginName, icon : this.path + pluginName + '.png' }); }, afterInit : function(editor){ function createFakeElement(editor,realElement){ var fakeElement = editor.createFakeParserElement( realElement, 'sm_formBuilder', 'sm', false ); return fakeElement; } /*var ins = CKEDITOR.instances.content_body.element.getDocument().getDocumentElement('sm'); editor.createFakeParserElement(ins,'sm_formBuilder','sm',false); var t = ''; for(var i in ins){ t += i+': '+ins[i]+'\n'; } alert(t);*/ var dataProcessor = editor.dataProcessor, dataFilter = dataProcessor && dataProcessor.dataFilter; if(dataFilter){ dataFilter.addRules({ elements :{ 'sm' : function(element){ var t = ''; for(var i in element){ t += i+': '+element[i]+'\n'; } alert(t); return createFakeElement(editor,element); } } },2); } }, requires: ['fakeobjects'] });
sm_formBuilder.js
(function(){ var sm_formBuilder = function(editor){ return { title : 'Form Builder', minWidth : 300, minHeight : 50, onOk : function(){ var editor = this.getParentEditor(); var form = this.getContentElement('settings','form'); var id = form.getValue(); var element = CKEDITOR.dom.element.createFromHtml('<sm name="sm_formBuilder" attr="id:'+id+'" />'); //editor.insertElement(element); var fake = editor.createFakeElement(element, 'sm_formBuilder','sm'); editor.insertElement(fake); }, onLoad : function(){ var el = this; $.get('widgets/sm_formBuilder/getForms.php',function(data){ var form = el.getContentElement('settings','form'); var id = form.domId; $('#'+id).find('select').html(data); }); }, contents : [ { id : 'settings', label : 'Settings', elements : [ { id : 'form', type : 'select', label : 'Forms', labelLayout : 'horizontal', items : [] } ] } ] } } CKEDITOR.dialog.add('sm_formBuilder',function(editor){ return sm_formBuilder(editor); }); })();
The plugin works fine, except for the retaining of the placeholder. The placeholder script doesn't even have to be in the plugin, so long as it displays whenever and wherever there is an "sm" tag.
Re: Using Custom Tag Placeholders
Anyone?
Hi Guys,
Anyone found a solution for this?