Enable/Disable text editor based on model value....

[Terry]

Hi,

 

Here is my editor markup -

<text-editor params="model: organisationChart, root: $root">
<div>
    <div data-bind="css: notesContainerClass, if: label" class="notes_label"></div>
    <div data-bind="css: containerClass" class="rtb_container">
        <table cellspacing="4" cellpadding="0" class="k-widget k-editor k-header k-editor-widget" role="presentation"><tbody><tr role="presentation"><td class="k-editor-toolbar-wrap" role="presentation"><ul class="k-editor-toolbar" role="toolbar" data-role="editortoolbar"><li class="k-tool-group k-button-group" role="presentation"><a href="" role="button" class="k-tool k-group-start" unselectable="on" title="Bold" aria-pressed="false"><span unselectable="on" class="k-tool-icon k-bold">Bold</span></a><a href="" role="button" class="k-tool" unselectable="on" title="Italic" aria-pressed="false"><span unselectable="on" class="k-tool-icon k-italic">Italic</span></a><a href="" role="button" class="k-tool" unselectable="on" title="Underline" aria-pressed="false"><span unselectable="on" class="k-tool-icon k-underline">Underline</span></a><a href="" role="button" class="k-tool k-group-end" unselectable="on" title="Strikethrough" aria-pressed="false"><span unselectable="on" class="k-tool-icon k-strikethrough">Strikethrough</span></a></li><li class="k-tool-group k-button-group" role="presentation"><a href="" role="button" class="k-tool k-group-start" unselectable="on" title="Align text left" aria-pressed="false"><span unselectable="on" class="k-tool-icon k-justifyLeft">Justify Left</span></a><a href="" role="button" class="k-tool" unselectable="on" title="Center text" aria-pressed="false"><span unselectable="on" class="k-tool-icon k-justifyCenter">Justify Center</span></a><a href="" role="button" class="k-tool" unselectable="on" title="Align text right" aria-pressed="false"><span unselectable="on" class="k-tool-icon k-justifyRight">Justify Right</span></a><a href="" role="button" class="k-tool k-group-end" unselectable="on" title="Justify" aria-pressed="false"><span unselectable="on" class="k-tool-icon k-justifyFull">Justify Full</span></a></li><li class="k-tool-group k-button-group" role="presentation"><a href="" role="button" class="k-tool k-group-start" unselectable="on" title="Insert unordered list" aria-pressed="false"><span unselectable="on" class="k-tool-icon k-insertUnorderedList">Insert unordered list</span></a><a href="" role="button" class="k-tool" unselectable="on" title="Insert ordered list" aria-pressed="false"><span unselectable="on" class="k-tool-icon k-insertOrderedList">Insert ordered list</span></a><a href="" role="button" class="k-tool k-group-end" unselectable="on" title="Indent"><span unselectable="on" class="k-tool-icon k-indent">Indent</span></a><a href="" role="button" class="k-tool k-group-end k-state-disabled" unselectable="on" title="Outdent" style="display: none;"><span unselectable="on" class="k-tool-icon k-outdent">Outdent</span></a></li><li class="k-tool-group k-button-group" role="presentation"><a href="" role="button" class="k-tool k-group-start" unselectable="on" title="Insert hyperlink"><span unselectable="on" class="k-tool-icon k-createLink">Create Link</span></a><a href="" role="button" class="k-tool k-state-disabled" unselectable="on" title="Remove hyperlink" style="display: none;"><span unselectable="on" class="k-tool-icon k-unlink">Remove Link</span></a><a href="" role="button" class="k-tool k-group-end" unselectable="on" title="Insert image"><span unselectable="on" class="k-tool-icon k-insertImage">Insert Image</span></a></li><li class="k-tool-group k-button-group" role="presentation"><a href="" role="button" class="k-tool k-group-start" unselectable="on" title="Subscript" aria-pressed="false"><span unselectable="on" class="k-tool-icon k-subscript">Subscript</span></a><a href="" role="button" class="k-tool k-group-end" unselectable="on" title="Superscript" aria-pressed="false"><span unselectable="on" class="k-tool-icon k-superscript">Superscript</span></a></li><li class="k-tool-group k-button-group" role="presentation"><a href="" role="button" class="k-tool k-group-start k-group-end" data-popup="" unselectable="on" title="Create table"><span unselectable="on" class="k-tool-icon k-createTable">Create table</span></a><a href="" role="button" class="k-tool k-state-disabled" unselectable="on" title="Add row above" style="display: none;"><span unselectable="on" class="k-tool-icon k-addRowAbove">Add row above</span></a><a href="" role="button" class="k-tool k-state-disabled" unselectable="on" title="Add row below" style="display: none;"><span unselectable="on" class="k-tool-icon k-addRowBelow">Add row below</span></a><a href="" role="button" class="k-tool k-state-disabled" unselectable="on" title="Add column on the left" style="display: none;"><span unselectable="on" class="k-tool-icon k-addColumnLeft">Add column on the left</span></a><a href="" role="button" class="k-tool k-state-disabled" unselectable="on" title="Add column on the right" style="display: none;"><span unselectable="on" class="k-tool-icon k-addColumnRight">Add column on the right</span></a><a href="" role="button" class="k-tool k-state-disabled" unselectable="on" title="Delete row" style="display: none;"><span unselectable="on" class="k-tool-icon k-deleteRow">Delete row</span></a><a href="" role="button" class="k-tool k-group-end k-state-disabled" unselectable="on" title="Delete column" style="display: none;"><span unselectable="on" class="k-tool-icon k-deleteColumn">Delete column</span></a></li><li class="k-tool-group k-button-group" role="presentation"><a href="" role="button" class="k-tool k-group-start k-group-end" unselectable="on" title="View HTML"><span unselectable="on" class="k-tool-icon k-viewHtml">View HTML</span></a></li><li class="k-tool-group" role="presentation"><span class="k-editor-dropdown k-group-start k-group-end"><span class="k-widget k-dropdown k-header k-editor-widget" unselectable="on" role="listbox" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-owns="" aria-disabled="false" aria-readonly="false" aria-busy="false" style="width: 110px;"><span unselectable="on" class="k-dropdown-wrap k-state-default"><span unselectable="on" class="k-input">Format</span><span unselectable="on" class="k-select"><span unselectable="on" class="k-icon k-i-arrow-s">select</span></span></span><select title="Format" class="k-formatting k-decorated" data-role="selectbox" unselectable="on" style="width: 110px; display: none;"><option value="p" selected="selected">Paragraph</option><option value="blockquote">Quotation</option><option value="h1">Heading 1</option><option value="h2">Heading 2</option><option value="h3">Heading 3</option><option value="h4">Heading 4</option><option value="h5">Heading 5</option><option value="h6">Heading 6</option></select></span></span></li><li class="k-tool-group k-button-group" role="presentation"><a href="" role="button" class="k-tool k-group-start k-group-end" unselectable="on" title="Clean formatting"><span unselectable="on" class="k-tool-icon k-cleanFormatting">Clean formatting</span></a></li><li class="k-tool-group" role="presentation"><span class="k-widget k-combobox k-header k-group-start k-editor-widget" unselectable="on" style=""><span tabindex="-1" unselectable="on" class="k-dropdown-wrap k-state-default"><input class="k-input k-fontName k-group-start" type="text" autocomplete="off" role="combobox" aria-expanded="false" tabindex="0" aria-disabled="false" aria-readonly="false" aria-autocomplete="list" aria-owns="" aria-busy="false" unselectable="on" style="width: 100%;"><span tabindex="-1" unselectable="on" class="k-select"><span unselectable="on" class="k-icon k-i-arrow-s" role="button" tabindex="-1">select</span></span></span><select title="Font Name" class="k-fontName k-group-start" data-role="combobox" aria-disabled="false" aria-readonly="false" unselectable="on" style="display: none;"><option value="inherit" unselectable="on" selected="selected">(inherited font)</option><option value="Arial,Helvetica,sans-serif" unselectable="on">Arial</option><option value="'Courier New',Courier,monospace" unselectable="on">Courier New</option><option value="Georgia,serif" unselectable="on">Georgia</option><option value="Impact,Charcoal,sans-serif" unselectable="on">Impact</option><option value="'Lucida Console',Monaco,monospace" unselectable="on">Lucida Console</option><option value="Tahoma,Geneva,sans-serif" unselectable="on">Tahoma</option><option value="'Times New Roman',Times,serif" unselectable="on">Times New Roman</option><option value="'Trebuchet MS',Helvetica,sans-serif" unselectable="on">Trebuchet MS</option><option value="Verdana,Geneva,sans-serif" unselectable="on">Verdana</option><option unselectable="on"></option></select></span><span class="k-widget k-combobox k-header k-editor-widget" unselectable="on" style=""><span tabindex="-1" unselectable="on" class="k-dropdown-wrap k-state-default"><input class="k-input k-fontSize" type="text" autocomplete="off" role="combobox" aria-expanded="false" tabindex="0" aria-disabled="false" aria-readonly="false" aria-autocomplete="list" aria-owns="" aria-busy="false" unselectable="on" style="width: 100%;"><span tabindex="-1" unselectable="on" class="k-select"><span unselectable="on" class="k-icon k-i-arrow-s" role="button" tabindex="-1">select</span></span></span><select title="Font Size" class="k-fontSize" data-role="combobox" aria-disabled="false" aria-readonly="false" unselectable="on" style="display: none;"><option value="inherit" unselectable="on" selected="selected">(inherited size)</option><option value="xx-small" unselectable="on">1 (8pt)</option><option value="x-small" unselectable="on">2 (10pt)</option><option value="small" unselectable="on">3 (12pt)</option><option value="medium" unselectable="on">4 (14pt)</option><option value="large" unselectable="on">5 (18pt)</option><option value="x-large" unselectable="on">6 (24pt)</option><option value="xx-large" unselectable="on">7 (36pt)</option><option unselectable="on"></option></select></span><div class="k-colorpicker k-foreColor" data-role="colorpicker" style=""></div><span role="textbox" aria-haspopup="true" class="k-widget k-colorpicker k-header k-editor-widget" aria-disabled="false" tabindex="0" aria-label="Current selected color is #000000" title="Color" unselectable="on" aria-owns="866d753e-1f0e-4da6-95ea-ea62eef36947"><span class="k-picker-wrap k-state-default" unselectable="on"><span class="k-tool-icon k-foreColor" unselectable="on"><span class="k-selected-color" unselectable="on" style="background-color: rgb(0, 0, 0);"></span></span><span class="k-select" unselectable="on"><span class="k-icon k-i-arrow-s" unselectable="on"></span></span></span></span><div class="k-colorpicker k-backColor" data-role="colorpicker" style=""></div><span role="textbox" aria-haspopup="true" class="k-widget k-colorpicker k-header k-editor-widget k-group-end" aria-disabled="false" tabindex="0" aria-label="Current selected color is #000000" title="Background color" unselectable="on" aria-owns="99cc64c1-d1dd-4101-8b9d-709bb8a6bf56"><span class="k-picker-wrap k-state-default" unselectable="on"><span class="k-tool-icon k-backColor" unselectable="on"><span class="k-selected-color" unselectable="on" style="background-color: rgb(0, 0, 0);"></span></span><span class="k-select" unselectable="on"><span class="k-icon k-i-arrow-s" unselectable="on"></span></span></span></span></li></ul></td></tr><tr><td class="k-editable-area"><iframe frameborder="0" class="k-content" src='javascript:""'></iframe><textarea data-bind="htmlEditor: model.note" data-role="editor" autocomplete="off" class="k-content k-raw-content" style="display: none;"></textarea></td></tr></tbody></table>
    </div>
    <div class="notes_buttons">
        <div>
            <img class="attachment_image" data-bind="click: upload, attr: { src: attachmentImageSource, title: attachmentsAddAttachementTooltip }" src="/images/clip.png" title="Upload attachment">
            <input type="file" name="files" class="hidden file-upload" data-bind="attachmentFileUploader: true, model: $component, attr: { 'data-url': uploadUrl, id: fileInputName }" multiple="" value="+" data-url="/Plan/Save?planId=580&type=OrganisationChart" id="OrganisationChart_Input">
        </div>
    </div>
    <div class="attachments">
        <!-- ko if: model.attachments().length > 0 --><!-- /ko -->
    </div>
    <wait-timer-dialog params="showMessage: showWaitTimer, message: waitMessage"><div class="popup hidden" data-bind="waitTimerDialog: showMessage, model: $data">            <div data-bind="text: message"></div>            <img data-bind="attr: { src: imageUrl }" src="/images/loader-green.gif">        </div></wait-timer-dialog>
    <wait-timer-dialog params="showMessage: showDeleteAttachmentTimer, message: deleteAttachmentMessage"><div class="popup hidden" data-bind="waitTimerDialog: showMessage, model: $data">            <div data-bind="text: message">Deleting attachment. Please wait...</div>            <img data-bind="attr: { src: imageUrl }" src="/images/loader-green.gif">        </div></wait-timer-dialog>
    <message-dialog params="showMessage: success, message: uploadSuccess"><div class="popup hidden" data-bind="messageDialog: showMessage, model: $component">             <div data-bind="text: displayMessage">Attachment(s) uploaded successfully.</div>        </div></message-dialog>
    <message-dialog params="showMessage: deleteSuccess, message: deleteSuccessMessage"><div class="popup hidden" data-bind="messageDialog: showMessage, model: $component">             <div data-bind="text: displayMessage">Attachment(s) deleted successfully.</div>        </div></message-dialog>
    <message-dialog params="showMessage: error, isError: true, message: errorMessage"><div class="popup hidden" data-bind="messageDialog: showMessage, model: $component">             <div data-bind="text: displayMessage">Error occurred. Please try again.</div>        </div></message-dialog>
</div></text-editor>

 

I want to disable this based on a value in my knockout viewmodel.
From research, it appears as tho it needs to be done once the page is fully rendered, so Im trying to do so in document.ready(), without success.
I've tried to find the control in a number of ways, no of which work -

var editor = $('#OrganisationChart').data('kendoEditor');

    if (editor != undefined) {
        alert("organisationChart Editor found");
        editor.body.contentEditable = false;
    }

    $('.k-editor textarea').each(function (idx, element) {
        alert("Editors found");
        $($(element).data("htmlEditor").body).attr("contenteditable", false);

    });

 

Can you help me in how to identify these editors so I disable them please?

Thank you,

Terry.

[Terry]

Anyone able to assist?

 

I might add that I am also using RequireJS to manage my script.

[Dimitar]

Hello Terry,

In general, the approach for retrieving the widget instance is correct. Are you sure that the Editor widget is being correctly initialized on the page? 

For disabling/enabling the widget, you can refer to the suggested approach in the following HowTo article, where on the click of a button, an overlay is being shown above the Editor widget.

Also, can yоu provide a working example in the Dojo sandbox or an isolated project (width dummy data), where the described issue with initializing the widget can be reproduced? This way, I will be able to troubleshoot the problem, pin-down the cause of it and assist you further (in case the issue continues to persist).

Regards,
Dimitar
Progress Telerik

[Terry]

Hi Dimitar,

 

Thanks for response.

I've managed to get it to set the text editor to read only but with 2 strange issues still persisting:

I used the following code -

 

 

$('.k-editor textarea').each(function (idx, element) {
                    if (self.root.planState() === "FormalApplicationState")
                    {
                        alert("text-editor - plan state : FormalApplicationState");
                        $($(element).data("kendoEditor").body).attr("contenteditable", false);
                    }
                });

 

I just placed it in a js module that sets up/initializes the editor/registers the component.

The two issues are:

1 - If there is more than 1 editor on the page, the final one is not set to contenteditable=false, instead it is set to true.

2 - If I highlight the text in the editor and hit backspace, the text is deleted, so its not entirely read-only in that sense.

 

Any ideas on those two issues?

Terry.

 

[Veselin Tsvetanov]

Hello Terry,

Here you will find a simple Dojo, based on the snippet sent. You will notice, that both Editors get their contenteditable area disabled. Also, deleting content by hitting Backspace is not allowed.

May I ask you to modify this sample, so it reproduces the issue observed at your end and send it back to us?

Regards,
Veselin Tsvetanov
Progress Telerik