Create a entry in editor.undoRedoStack.stack

[Ezequiel]

Hi, I am using kendo ui editor and I created a custom tool to clean format.
I need to register an entry to undoRedoStack to make the changes reverted when pressing ctrl+z and redo changes when pressing ctrl+y.

This is the fragment of what I have done:

01.var editor = $("#symptom-editor, #resolve-editor").kendoEditor({
02.    tools: [
03.        "formatBlock",
04.        "bold",
05.        "italic",
06.        "underline",
07.        "insertUnorderedList",
08.        "insertOrderedList",
09.        "indent",
10.        "outdent",
11.        "createLink",
12.        "insertImage",
13.        {
14.            name: "formatting",
15.            tooltip: "Insert code syntax",
16.            items: [
17.                { text: "C#", value: "pre.brush-csharp" },
18.                { text: "C++", value: "pre.brush-cpp" },
19.                { text: "CSS", value: "pre.brush-css" },
20.                { text: "Java", value: "pre.brush-java" },
21.                { text: "JavaScript", value: "pre.brush-js" },
22.                { text: "Perl", value: "pre.brush-perl" },
23.                { text: "PHP", value: "pre.brush-php" },
24.                { text: "Python", value: "pre.brush-py" },
25.                { text: "Ruby", value: "pre.brush-ruby" },
26.                { text: "SASS", value: "pre.brush-sass" },
27.                { text: "SQL", value: "pre.brush-sql" },
28.                { text: "Visual Basic", value: "pre.brush-vb" },
29.                { text: "HTML / XML", value: "pre.brush-xml" }
30.            ]
31.        },
32.        {
33.            name: "clearFormat",
34.            tooltip: "Clear format"
35.        },
36.        "viewHtml"
37.    ],
38.    stylesheets: [
39.        "css/kendo.editor-custom.css"
40.    ],
41.    keyup: function (e) {
42.        $(".vld-tooltip").remove();
43.    },
44.    execute: function (e) {
45.        var editor = this,
46.            sel = editor.getSelection(),
47.            element = sel.baseNode.parentNode,
48.            stateBefore;
49.        switch (e.name) {
50.            case "clearformat":
51.                //saves the current history
52.                stateBefore = editor.undoRedoStack.stack;
53.                //cleans the style and class attributes
54.                element.innerHTML = $(element).attr({"class":null, "style":null}).html();
55.                //TODO: Create an entry to stack
56.                //editor.undoRedoStack.stack = stateBefore;
57.                //editor.undoRedoStack.currentCommandIndex = stateBefore.length - 1;
58.                break;
59.            case "formatting":
60.                //TODO: clean the children <pre> tags
61.                break;
62.        }
63.    } //end execute
64.}); //end kendoEditor

 
As a mentioned, I would like to support undo and redo throught the undoRedoStack.
Also, I am re-using the formatting / formatBlock command, I would like to create a new one that behaves like the formatting command. How do I can make it?

Thank you very much for your help.

[Alex Gyoshev]

Hello Ezequiel,

We have introduced a cleanFormatting tool with our Q2 release, which can be seen live. The latest internal builds improve upon its effect, too.

The undoRedoStack is a private API that is not officially supported, nor documented. If you decide to hack around it, your best documentation is to read the code that uses it.

Regards,
Alex Gyoshev
Telerik

 

 

[Ezequiel]

Hi Alex, I tried the live example provided in Editor / All tools, but after adding some attributes like style, class, an element: 

<a href="http://www.telerik.com/forums/" style="color:red;" class="coco" data-test="1" >feedback</a>

I used the clean formatting button, by selecting the element, and also by just positioning the caret over the text, but nothing happens.

By other hand, I want to unwrap internal <pre> tags and to clean <br> tags when using the formatting command, but sometimes it works, and other times throws an exception. How can I modify safely the content of selected element?
This is what I have achieved:

01.var editors = $(".editors").kendoEditor({
02.    ...
03.    execute: function (e) {
04.        var editor = this,
05.            sel = editor.getSelection(),
06.            element = sel.baseNode.parentNode;
07.        switch (e.name) {
08.            case "clearformat":
09.                $(element).attr({ "class": null, "style": null });
10.                break;
11.            case "formatting":
12.                //e.preventDefault();
13.                $(element).closest("pre").find("pre").unwrap();
14.                $(element).find("br").remove();
15.                break;
16.        }
17.    }
18.});//end kendoEditor

Thank you very much for your help.

[Alex Gyoshev]

Hello Ezequiel,

The mentioned bug (with the inline style) is already fixed in the internal builds.

Regarding the unwrapping of <pre> elements, can you please show an example, preferably via a Dojo snippet?

Regards,
Alex Gyoshev
Telerik

 

 

[Ezequiel]

Hello Alex, thank you for your attention.

I have been reading the internal API to registering a new tool in the editor.
As I mentioned previously, I want to achieve two goals basically:

1. Register a custom tool that format the selected text by wrapping it into a <pre> tag and cleaning that text by removing the style and class attributes, and also unwrap all the inner <pre> elements.
2. Modify or create the cleanformatting command to remove the style and class attributes. (I know that the inline style was fixed in the internal build 2014.2.826) Maybe can be added after the line #7102: node.removeAttribute("class"); 

In this example I replicate the following issues:

• When apply syntax formatting to text that is a immediate child of body, all the siblings elements gets the css class language-*​ (specified by the custom tool: codesyntax). The expected result is that only the selected elements/text are wrapped in the <pre> tag and classed with the .language-*​ class.
• At the end of document there is a sample with a nested <pre> element. Copy and paste the text and format it with any syntax code. The expected result is that the nested <pre> elements are unwrapped.

Again, Thank you in advance for your help.

[Alex Gyoshev]

Hello Ezequiel,

The problem with formatting the code from that snippet, is that the code is a direct child of the body -- not within an element. Thus, the formatting command will apply the format across the body. The problem is solved if there is an element around the text (snippet), which is the valid formatting that can be achieved when using the editing UI.

The suggestion for cleaning of class attributes is quite valid, so it has been addressed for the next internal build.

The execute event is quite limited compared to developing a custom command. You can update any HTML in a command, so it might be more fitting in your solution.

Regards,
Alex Gyoshev
Telerik

 

 

[Ezequiel]

Hi Alex,

Thank you for your response. 
Now is clear that the elements should be inside an element, not as a direct children of the body.
I am glad that the suggestion for clearing the class attribute was taken into account.

Respect to updating the HTML in a command, I got problems as mentioned in the commented line #95 in this snippet. You can test it by uncommenting the line, copy the <pre> sample written after the editor (results view), select the text and apply some codesyntax format.
Maybe I am doing in the wrong way, can you give some example on how update the selected HTML?

Again, Thank you in advance for your help.

[Alex Gyoshev]

Hello Ezequiel,

I noticed that there are updated revisions of the snippet (here), that appear to work for me. That snippet does the cleaning within the CleanFormatCommand, which is the correct approach to the implementation. Have you resolved the problem there? If not, please specify the exact steps required to reproduce the problem.

Regards,
Alex Gyoshev
Telerik

 

 

[Ezequiel]

Hi Alex,
I wrote that snippet. I decide to overwrite the CleanFormatCommand and add the unwrapper for nested <pre> tags in the line #42, and also the class attribute is removed in the line #59. The command works perfectly for my needs (as a button), but I also want to execute that command before​ the default actions for the codesyntax command. My approach was to execute the cleanformat command in the execute event​ when the codesyntax is triggered, as saw in line #116, but the problem here is that the cleanformat command is executed after the default actions for codesyntax was performed, then the class that specifies the language for the <pre> wrapper is removed. So my question is: there is a way to execute some code before the default actions get executed? something like a beforeExecute event/callback/hack.

Other approach could be, in the execute event, get the item selected by the codesyntax comand and re-apply the class specified by the value or className property, but I prefer the idea of be able to execute code in a beforeExecute event/callback/hack.

Alex, your help is very appreciated.

[Alex Gyoshev]

Hello Ezequiel,

There is no beforeExecute event at this time. I am afraid that we don't have any work-around at this time, except for developing a custom tool/command/formatter.

Regards,
Alex Gyoshev
Telerik