Hi.
Okay... this post may be long... but try to read the whole post and come with feedback (positive and negative)
I would like to be able to protect some html against being edited, and some not possible to be deleted.
Example:
(Preliminary FEATURE request)
The newly introduced:
FCKConfig.ProtectedSource.Add(...)
is really handy piece of work.
Is it possible to create something similar for visible tags in the editor?
For example:
Let say you let your users insert premade code into the editor using a custom made dialog ...
Let say the user inserted a DIV with one H3 tag and one table with one cell.
Then say you want a rules like this:
The user should be able to edit text widthin the H3 tag.
The user should be able to edit text widthin the TD tag of the TABLE.
The user should not be able to delete H3 tag.
The user should not be able to delete TABLE.
The user should be able to delete the DIV tag, but then also deleting all content widthin that tag.
The user should not be able to insert tags or text within the DIV tag and outside the H3 or TABLE tag.
Could maybe be implemented by using this within the tags:
fckedit="no"
which means that editing directly inside tag is not allowed, but editing within sub tags may be allowed (which depends if fckedit="no" are used on subtags or not)
fckdelete="no"
Which means deletion of that single tag is not allowed directly, but should be deleted if parent tag are.
And then if FCK writes some code to obey the rules .... well it might work.... and should opt for some new possibilities...
Se example code below.... and if you have some thoughts about this ...well.....
<div fckedit="no" class="someclass">
<h3 fckdelete="no">Title here</h3>
<table fckdelete="no" width="100%" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td>
<p>Text here</p>
</td>
</tr>
</tbody>
</table>
</div>
Another more practical example could be this:
Let say you wanted your CMS users to be able to insert code like this in their pages (see link below):
(Move the mouse-pointer over the tabs in the page and you will see a cool effect)
http://scripts.chitika.net/eminimalls/468x180.html
This is ONE of the cool and practical stuff I want implemented in my CMS system.
I have looked a the source of the above minitab example and made a much simpler, yet effective crossbrowser version.
In order to use this code I need to create a custom dialog where my site-admins can enter tab-text as well as content for each of the tabs.
But to make this work nicely then I should be able to protect the inserted code from being altered from within FCKeditor. If one of my users inserted my custom minitab then if he laiter on want to change it, he would have to delete the whole minitab in FCKeditor or even better, be able to right-click somewhere inside the minitab and get a context-menu where he can select "edit minitab". Clicking "edit-minitab" should display the current minitab values in the custom made dialog.
Hope you see the potential of this. I mean here the benefit of being able to protect some of the HTML in FCKeditor.
Hope this was not too far out and that other can comment on this idea of protecting some of the HTML, and comment if this way of protecting HTML tags are doable or if there are other better ways of doing it.
Hope some of the developers can join in as well.
What do you think?
Best regards
Wed, 11/23/2005 - 05:20
#1
RE: Can this feature be implemented?
Did some digging (not my area though) but might be useful anyway:
To implement a way of protecting HTML tags from either being edited, deleted, or both, I proposed the use of the following custom attributes:
fckdelete="no"
fckedit="no"
When I digged around in www today I found a description of the javascript function below here:
( http://www.quirksmode.org/dom/ )
getAttribute('attribute-name-here')
I tested this against the custom attributes (fckdelete and fckedit) in a TABLE, DIV and H3 tag, and it works nicely in newer IE, FF, OP, NE...
I do not know the inner workings of FCKeditor, but could it not be possible to create an internal function FCKeditor to be called when editing and deleting a HTML element.
This function could use the getAttribute function and test against the value of fckdelete and fckedit, and return the proper value depending on what user are trying to do.
Some message handling would also be required I guess if user are trying to delete an element which are not deletable, or edit an element which are not editable.
Okay ... anybody out there with more knowledge about the inner workings of FCKeditor?
Would appreciate some feedback if this is doable or not, or you might also have a better suggestion on how to implement this features
RE: Can this feature be implemented?
The editor uses some features available in the browser as its underlying system. It means that the cursor positioning, typing, rendering and selection are not controlled by FCKeditor, but by the browser itself.
Unfortunately there is no standard available for those editing features, so each browser has its own implementation. IE has been the first to have it, so others tried to be compatible with it. This is the case of Gecko (Firefox).
The "fckedit" feature could be developed on IE with not so much problems. You can also try it right now... just create a DIV inside FCKeditor and set its "contenteditable" attribute to "false".
Ok... now the sad thing... contenteditable is a powerful IE only feature. There is no way to do the same on Gecko. So we have compatibility problems. Unfortunately Gecko is not as good and stable on editing features as is IE.
A solution could be using a placeholder image for your special content block (just like the Flash placeholder).
Things would be even worst for the "fckdelete" feature because you have no default browser feature for that.
Maybe some way to do that would be available, but it is a quite complex and delicate thing, that would generate a lot of extra code.
Even if I can't help you in this development, I hope my message have given you some clarification.
Best regards,
FredCK
Frederico Knabben
CKEditor Project Lead and CKSource Owner
--
Follow us on: Twitter | Facebook | Google+ | LinkedIn
RE: Can this feature be implemented?
First:
You said:
"A solution could be using a placeholder image for your special content block (just like the Flash placeholder)."
Could you please specify a little more how I could use this?
Second:
Urk... looks like it is going to be very hard to implement, if possible at all.
I played a little with "contenteditable".
At first sight it looked promising...
But then I found that it is pretty much useless for what I want to do. The reason for this is that when I want to insert custom content like my example in my first post, I will allways want to put that content within a container, either a div or a table.
So if I now do that, and use contenteditable="false" for that outer container in order to prevent the site editor to insert text in the outer DIV or table, then I will have to set contenteditable ="true" for the tags that should be editable.
Now, what happens is that this actually works great in IE, in FCKeditior. But when you view that content in a page (not in FCKeditor) then the end user can actually edit the text there also, and that is not very practical.
Since the child tags of my outer div/table inherits this contenteditable attribute and because it is not possible to set contenteditable="normal", on the child-tags, in order to make it possible to edit the content in FCKeditor and not be able to edit when you look at the content in the page.... I'm stuck.
Anyway, thanks again for your feedback.
RE: Can this feature be implemented?
As Frederico has said in IE it's possible to disable editing of any element by setting contentEditable to false, the corresponding bug for Gecko is https://bugzilla.mozilla.org/show_bug.cgi?id=238813 but disabling deleting of elements would be a very different task.
The normal way to do this is just to set several editors or change its content so no changes are needed in FCKeditor.
RE: Can this feature be implemented?
I'm looking at coding this feature at the moment.
I'd like to use the Dreamwe4aver template method which works by locking down the whole page and then you surround the editable code with comment tags:
<!-- TemplateBeginEditable name="someName" -->
editable html goes here
<!-- TemplateEndEditable -->
My current plan is to add a listener to the onSeletctionChange event which when called will run up the DOM Tree looking for either of the two comments so I know if the caret is currently in an editable area or not, using the logic (pseudocode):
if(foundEndEditableComment()) noEdit = true;
if(foundStartEditableComment()) noEdit = false;
if(FCKConfig.ProtectedTemplate && noEdit) rejectEdits();
I can use a noEdit flag to reject any changes to the contant in the OnKeyDown method, I'd also have to disable relevant toolbar actions.
There are issues like FCK editor doesn't appear to preserve nesting within comments, but I think this is the path to go down.
Anyone got any thoughts on this?
TIA
RE: Can this feature be implemented?
Hi.
Cool that you look into this.
You say you have to lock down the whole page and surround the editable tags with comment tags:
Hope you find another way to implement it, so we do not have to lock down the whole page.
You said:
"
My current plan is to add a listener to the onSeletctionChange event which when called will run up the DOM Tree looking for either of the two comments so I know if the caret is currently in an editable area or not, using the logic (pseudocode):
"
If you are able to check for the comment tags using the listener for the onSeletctionChange event, is there a reason that you could not make that work if you used these tags (one or both),
fckdelete="no"
fckedit="no"
on the tags in question?
And then use:
getAttribute('attribute-name-here') within that listener to check if fckdelete and/or fckedit attributes are set for the current tag.
You probably know more about this function ( getAttribute('attribute-name-here') ) than me, but if not have a look at:
( http://www.quirksmode.org/dom/ )
I have tested the function in XP using IE 6.0, FF, OP and NE, and it worked in all.
Best luck and would very much like if you posted any progress in this thread
RE: Can this feature be implemented?
I don't have to I just want to do it that way, to make it compatible with Dreamweaver.
is there a reason that you could not make that work if you used these tags (one or both),
fckdelete="no"
fckedit="no"
It might be easier, but it would break the document s W3C validation which whould be unacceptable to me
Also want it set to allow whole blocks of content to become editable not having to worry about nesting issues and going through all teh tags by hand. Just add a comment before your <div> and one after your </div> and all the <p> <ul> or even table elements become editable.
RE: Can this feature be implemented?
Is it possible to see the code that makes this possible?
If it is not available for free then how much would you charge for it?
The event listener.
The DOM walk code.
The code that undo stuff that should not be done, such as removing or changing text and/or tags that should not be removed or deleted.
Best regards
RE: Can this feature be implemented?
Because this feature will put my CMS system at the enterprise level and I have access to blue chip companies who will buy it.
Also I'm not being distracted by 200 bugs sat in my bug tracker.
FCK ddn't say he couldn't do it he said it was hard. And it is.
"Is it possible to see the code that makes this possible?"
I'm still at the proof of concept stage at the moment, although I've got Gecko to identify editable and non editable regions in text and I think I can get IE to do the same also.
I think I have the ability to create the feature as a "work that uses the library" which would allow me to retain ownership of the code under the LGPL.
It's valuable. I'm sure you've seen how many people are looking for this feature as you look around on Google. FCKeditor is easily worth $100 dollars per site.
Althogh I wouldn't be contractually obligated to provide the code, I think that morally speaking, I should open it up.
RE: Can this feature be implemented?
Some people think that Open Source just means that they can take whatever they want, demand fixes RIGHT NOW, only their problems are the important ones, etc... The Open Source developers are there just to do whatever they need, and if their product doesn't match 100% their needs then they aren't worth anything back, no donation in order to help pay the food.
There is people like I've said that will take this code, make some patches, improvements and fixes but the idea of giving back just at least one line of code doesn't cross their mind.
People that charges their clients lots of money for their product using FCKeditor and possibly other Open Source products like Apache, PHP and MySql running with some Linux distro that they take for free and whenever they find something that doesn't work as expected or is missing a feature so they can charge an extra to their customers for the new features find that these OS developers have fooled him.
You are talking on the other side about developing a very interesting code and maybe giving it back to the community. Congrats to you and good luck with your project!
RE: Can this feature be implemented?
Initial proof of concept:
Firefox only atm.
http://213.130.129.113
The main text section and the copyright text are editable. You will see none of the other areas can be edited or deleted with the keyboard.
I know you can paste stuff in and change them with the toolbar, I've only disabled basic keystrokes as yet.
Sorry if the server is a bit slow it's only an old pentium 3.
RE: Can this feature be implemented?
Also thank you for that demo page.... that looks really promising.... big time.
Hope you can continue to post your progress in this thread.
Best regards
and best luck with your development.
RE: Can this feature be implemented?
I have put this:
editorInstance.Events.AttachEvent( 'OnSelectionChange', protectElements );
in:
function FCKeditor_OnComplete( editorInstance )
So now I'm ALLMOST able to detect if cursor is placed within tags that are not editable:
I now need some code to return current node (element) at cursor position and also how to undo any changes...
Do you have any javascript code to share at this moment?
RE: Can this feature be implemented?
Are you still looking to use your tag attribute idea?
In gecko:
FCK.EditorWindow.getSelection().getRangeAt(0).startContainer
Should return you a node object for the node at the begining of your current selection.
I think in IE it's
FCK.EditorWindow.getSelection().createRange().parentElement()
but i've not tried it yet.
After I'd checked my raneg I set a boolean flag variable:
FCK.boolIsEditable
in then overloaded onKeyDown to add an additional check after the ctrl/shift/alt key checks:
(Gecko code)
else if(!FCK.boolIsEditable){
e.preventDefault() ;
e.stopPropagation() ;
}
HTH
Ron
RE: Can this feature be implemented?
That flag variable is called bool Is Editable, not boolls Editable in case anyone was wondering.
RE: Can this feature be implemented?
Are you still looking to use your tag attribute idea?
"
Yes. Currently just trying to figure out how to get a reference to the element where cursor is placed.
I tested this in FF:
el = oFCK.FCK.EditorWindow.getSelection().getRangeAt(0).startContainer;
which returns "[object text]"
How do I get a reference to the element where cursor is placed?
(If I place the cursor in the "inner" div in example below I want a reference to the "inner" element.)
Example code:
<div id="outer">
outer text here<br />
<div id="inner">
Inner text here
<div>
</div>
RE: Can this feature be implemented?
when using FF I can use this:
el = oFCK.FCK.EditorWindow.getSelection().getRangeAt(0).startContainer;
el.parentNode.id returns the element
when using IE I may use this:
el = oFCK.FCK.EditorDocument.selection.createRange().parentElement();
el.id then returns the element.
Not perfect yet but getting closer
Thanks for the hint
RE: Can this feature be implemented?
Then I got your hint about using
e.preventDefault();
e.stopPropagation();
to disable editing.
I'm currently testing my code from a function in the page that holds the FCKedtior.
And I'm getting a reference to the editor object using:
var oFCK;
if (navigator.appName=="Netscape")
oFCK = MyTextarea___Frame.contentWindow;
else
oFCK = MyTextarea___Frame;
Is it possible to use
e.preventDefault();
e.stopPropagation();
toghether with that object (oFCK from above) or do I have to use them from within FCKeditor core code?
An example would be nice.
Regards
RE: Can this feature be implemented?
e.preventDefault();
e.stopPropagation();
toghether with that object "
No you have to overload the onKeyDown event handler which is what handles the event object e.
You will also have to deal with other events in FCK which may be called from the toolbar and some mouse events. I haven't had time to go through identifying all the events that must be captured and handled yet. I am sure there will be many.
Regards
RE: Can this feature be implemented?
Regards