0

i am using the CKEditor to enable writing on a page in my project. In this area where the CKEditor writes, there should also be the possibilty to insert a textfield, im using the standard textfield-dialog plugin (the 4th button in the 2nd row) with only the value field. By using the config.js:

var infoTab = dialogDefinition.getContents( 'info' );
    // remove unwanted input fields
    infoTab.remove( '_cke_saved_name' );
    infoTab.remove( 'size' );
    infoTab.remove( 'maxLength' );
    infoTab.remove( 'type' );

And i wanted to modify the onOk-function of the used value-field by inserting a nested element containing the textfield.

Original:

onOk: function() {
        var a = this.getParentEditor(),
            c = this.textField,
            b = !c;
        b && (c = a.document.createElement("input"), c.setAttribute("type", "text"));
        c = {
            element: c
        };
        b && a.insertElement(c.element);
        this.commitContent(c);
        b || a.getSelection().selectElement(c.element)
    }

Modified:

    onOk: function() {
        var a = this.getParentEditor(),
            c = this.textField,
            b = !c,
            additionalElement = a.document.createElement("button");
        additionalElement.setAttribute("onclick", $(this).parent().remove());
        b && (c = a.document.createElement("input"), c.setAttribute("type", "text"));
        c = {
            element: c,
            element2: additionalElement
        };
        b && a.insertHtml("<span>");
        b && a.insertElement(c.element);
        b && a.insertElement(c.element2);
        b && a.insertHtml("</span>");
        this.commitContent(c);
        b || a.getSelection().selectElement(c.element)
    }

I tried this approach, but the span-element does not appear in the source code of the page, when using it. I also tried using the div-element which breaks the p-element containing the whole input. (the p end at the div and a new starts after. 'div style="display: inline"' does not work either.) The at the moment most successfull approach, still not doing what i want, is using a 'a style="color: black; text-decoration: none"', which works as long as i dont double-click the textfield, if i double-click it, the link-dialog opens instead of the textfield-dialog. I also tried adding an additional element:

var wrapper = a.document.createElement("span");
wrapper.append(c);
wrapper.append(additionalElement);

But i could not get the CKEditor to output it.

All help is appreciated, hopefully before i turn insane ;)

IIOIOOO
  • 1
  • 2
  • Your `setAttribute()` statement inside `onOK` function is syntactically wrong for 2 things -- (a) It has a semicolon(`;`) after the `remove()` (b) you do NOT need double quotes for `""$(this).parent().remove()""`, So finally that statement should look like `additionalElement.setAttribute("onclick", $(this).parent().remove());`(without 2 double quotes). – Nikhil Nanjappa Oct 05 '16 at 08:04
  • That was just a copy&paste error, but thx anyway :) And this part works fine. – IIOIOOO Oct 05 '16 at 08:10
  • Ok then did you see any browser console errors ? Problems like this definitely will have errors popping on the browser console. Can you check – Nikhil Nanjappa Oct 05 '16 at 08:11
  • There appears to be no error in the console, and the source code looks like that `

    Text before textfield 

    `     – IIOIOOO Oct 05 '16 at 08:21
  • Does this source give you what you want .. If not can you tell me what change is expected ? Also check if the `onclick` value is whats expected – Nikhil Nanjappa Oct 05 '16 at 08:33
  • The button is there, and when i click it the whole text disappears, but i want only the textfield and the button to disappear. – IIOIOOO Oct 05 '16 at 08:49
  • Aww ok, is that it ? Then all you need to change is your onclick `onclick="$(this).parent().remove()"` to `onclick="$(this).prev().remove()"`. You are removing the parent of the ` – Nikhil Nanjappa Oct 05 '16 at 08:53
  • With this approach the button has also to be deleted. By modifying the solution for [this](http://stackoverflow.com/questions/6258521/clear-icon-inside-input-text), exchanging the clear-command with the remove-command i have the desired functionality without the need of using a nested element. – IIOIOOO Oct 05 '16 at 11:08
  • Awesome, Glad you got it working then. – Nikhil Nanjappa Oct 05 '16 at 11:14

0 Answers0