Inserting non editable Value in the editor

3 posts, 0 answers
  1. Nicolas
    Nicolas avatar
    2 posts
    Member since:
    Nov 2014

    Posted 19 Dec 2014 Link to this post

    Hello all,

    I have been looking for a solution to allow user inserting a variable name into the editor (once submitted the value is searched into a hash-map and replaced on server side)
    For this I wanted to forbid the user to edit the value (to avoid him involuntary edition).

    The solution I found is to insert a span with "contenteditable='false' " attribute :

    editor.exec("inserthtml", { value: " <span contenteditable='false'>+myValue+</span>" });

    At a point this work well. The value cannot be changed and all the content is deleted at once.

    But I face 2 issues with this solution :

    1. If I put the cursor just before the snippet and I press enter, the snippet jump to the next line but the editor looses focus ( On chrome 39.0.2171.95 )
    2. After that its impossible to put back the snippet on the previous line :
          On chrome (39.0.2171.95) it delete the snippet when I hit backspace with the cursor before the snippet
          On Firefox (33.1) it does nothing when I hit backspace.

    There is a small code example :


  2. Alex Gyoshev
    Alex Gyoshev avatar
    2497 posts

    Posted 23 Dec 2014 Link to this post

    Hello Nicolas,

    I am afraid that using non-editable elements in the editor is not supported at this time. Even if these issues are fixed, there may be other problems that will pop up. In order to request this functionality, submit a feature request on UserVoice.

    Alex Gyoshev
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Nicolas
    Nicolas avatar
    2 posts
    Member since:
    Nov 2014

    Posted 02 Mar 2015 Link to this post

    Thank's for the answer.
    I surrounded the issues by using a Input 
    editor.exec("inserthtml", { value: '<input readonly="readonly"  value="' + text + '" title="' + text + '" />' })

    But this solution does not provide easy auto-size functionality. 
    As I will probably need this on other places I will insert a feature request.

Back to Top