Custom property editor for the custom property

Please read the license agreement if you want to use Survey Creator widget in your app(s). Visit our buy page to find out developer license(s) price.
Please add any question and check 'shortname' property

                        Survey
    .JsonObject
    .metaData
    .addProperty("question", {
        name: "shortname",
        type: "shorttext",
        isRequired: true
    });

var ShortTextEditor = {
    render: function (editor, htmlElement) {
        var input = document.createElement("input");
        input.className = "form-control svd_editor_control";
        input.type = "text";
        input.maxLength = 5;
        input.style.width = "100%";
        htmlElement.appendChild(input);
        input.onchange = function() {
          editor.koValue(input.value);
        }
        editor.onValueUpdated = function (newValue) {
            input.value = editor.koValue() || "";
        }
        input.value = editor.koValue() || "";
    }
};

SurveyCreator
    .SurveyPropertyEditorFactory
    .registerCustomEditor("shorttext", ShortTextEditor);

SurveyCreator.SurveyQuestionEditorDefinition.definition.question.properties.push("shortname");


    
        SurveyCreator.StylesManager.applyTheme("bootstrap");
    


var creatorOptions = { };
var creator = new SurveyCreator.SurveyCreator("creatorElement", creatorOptions);


                    
<!DOCTYPE html>
<html>
<head>
    <title>Please add any question and check &#39;shortname&#39; property, Survey Creator Example</title>


    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>
<script src="https://surveyjs.azureedge.net/1.1.6/survey.ko.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.0/ace.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.0/ext-language_tools.js" type="text/javascript" charset="utf-8"></script>
    <!-- Uncomment to enable Select2
    <script src="https://unpkg.com/jquery"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
    -->
    <link href="https://surveyjs.azureedge.net/1.1.6/survey-creator.css" type="text/css" rel="stylesheet" />
    <script src="https://surveyjs.azureedge.net/1.1.6/survey-creator.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="./index.css">

</head>
<body>
        <div id="surveyContainer">
        <div id="creatorElement"></div>
    </div>

<script type="text/javascript" src="./index.js"></script>

</body>
</html>