SurveyCreator.StylesManager.applyTheme("bootstrap");
//Add a tag property to all questions
Survey.Serializer.addProperty("question", {name: "tag", category: "general"});
// Change the order of name and title properties, remove the startWithNewLine property and add a tag property
SurveyCreator.SurveyQuestionEditorDefinition.definition["question"].properties =
["title", "name", {name: "tag", title: "Tag"}, {name: "visible", category: "checks"}, {name: "isRequired", category: "checks"}];
var creatorOptions = { };
var creator = new SurveyCreator.SurveyCreator("creatorElement", creatorOptions);
creator.showToolbox = "right";
creator.showPropertyGrid = "right";
creator.rightContainerActiveItem("toolbox");
<!DOCTYPE html>
<html lang="en">
<head>
<title>Customize question editor, Survey Creator Example</title>
<meta name="viewport" content="width=device-width" />
<script src="https://unpkg.com/knockout@3.5.1/build/output/knockout-latest.js"></script>
<script src="/DevBuilds/survey-knockout/survey.ko.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.10/ace.min.js" type="text/javascript" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.10/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="/DevBuilds/survey-creator/survey-creator.min.css" type="text/css" rel="stylesheet" />
<script src="/DevBuilds/survey-creator/survey-creator.min.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>
Question Editor Definition
UI of Question Editors are built based on JSON located in SurveyCreator.SurveyQuestionEditorDefinition.definition property.
You can modify it, before creating the editor object.
The UI creator combines the information for the selected question type and all its parents. For example, the "dropdown" question combines properties and tabs from: "question", "selectbase" and "dropdown".
The original, unmodified definition, you may find
here
Here is the full Question Editors definition as JSON, used in the demo, property SurveyCreator.SurveyQuestionEditorDefinition.definition: