Cart Licenses Contact Support Online Creator Login/Register
Try
Buy
v 1.9.38

Custom Property Editor (edit the title property)


                        

var ckEditor = Survey.CustomWidgetCollection.Instance.getCustomWidgetByName("editor");
//Hide from toolbox
ckEditor.showInToolbox = false;

SurveyCreator.PropertyGridEditorCollection.register(
{
  fit: function(prop) {
    return prop.type == "text" || prop.type == "html";
  },
  getJSON: function(obj, prop, options) {
    return {
      type: "editor",
    };
  }
});

var questionDef = SurveyCreator.SurveyQuestionEditorDefinition.definition.question;
//Modify Question Editor. Remove title from general and add it as a tab.
questionDef.tabs.push({name: "title", index: 1});
var ind = questionDef.properties.indexOf("title");
if(ind > -1) questionDef.properties.splice(ind, 1);

//Create showdown markdown converter
var converter = new showdown.Converter();
function doMarkdown(survey, options) {
    //convert the markdown text to html
    var str = converter.makeHtml(options.text);
    if(str.indexOf("<p>") == 0) {
    //remove root paragraphs <p></p>
      str = str.substring(3);
      str = str.substring(0, str.length - 4);
    }
    //set html
    options.html = str;
}

const options = { showLogicTab: true };            
                var creator = new SurveyCreator.SurveyCreator(options);
            
                
                    ReactDOM.render(
                    <React.StrictMode>
                        <SurveyCreator.SurveyCreatorComponent creator={creator} />
                    </React.StrictMode>,
                    document.getElementById("creatorElement")
                    );
                
creator.survey.onTextMarkdown.add(doMarkdown);
creator.onDesignerSurveyCreated.add(function(editor, options){
    options.survey.onTextMarkdown.add(doMarkdown);
});
creator.onTestSurveyCreated.add(function(editor, options){
    options.survey.onTextMarkdown.add(doMarkdown);
});
creator.JSON = {
 "description": "<ul>\n\t<li><strong>Item 1</strong></li>\n\t<li><em>Item 2</em></li>\n\t<li><s>Item 3</s></li>\n</ul>\n",
 "pages": [
      {
       "name": "page1",
       "elements": [
        {
         "type": "text",
         "name": "question1"
        }
       ]
      }
    ]
}
                    
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Custom Property Editor (edit the title property), Survey Creator Example</title>
    
<meta name="viewport" content="width=device-width" />
    <script src="https://unpkg.com/react@17.0.1/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/react-dom@17.0.1/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/@babel/standalone@7.2.5/babel.min.js"></script>
    <script src="/DevBuilds/survey-core/survey.core.min.js"></script>
    <script src="/DevBuilds/survey-core/survey.i18n.min.js"></script>
    <script src="/DevBuilds/survey-react-ui/survey-react-ui.min.js"></script>
    <link href="/DevBuilds/survey-core/defaultV2.min.css" type="text/css" rel="stylesheet" />
    <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>
    -->
        <script src="/DevBuilds/survey-creator-core/survey-creator-core.min.js"></script>
        <link href="/DevBuilds/survey-creator-core/survey-creator-core.min.css" type="text/css" rel="stylesheet" />
        <script src="/DevBuilds/survey-creator-core/survey-creator-core.i18n.min.js"></script>
        <script src="/DevBuilds/survey-creator-react/survey-creator-react.min.js"></script>
        <style>
            :root {
                --tab-min-height: 600px;
            }
        </style>
    <link rel="stylesheet" href="./index.css">
<script src="https://cdn.ckeditor.com/4.14.1/standard/ckeditor.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/1.6.4/showdown.min.js"></script>
    <script src="/DevBuilds/surveyjs-widgets/surveyjs-widgets.min.js"></script>

</head>
<body style="margin: 0">
    
<div id="surveyContainer">
            <div id="creatorElement" style="height: 100vh;"></div>
</div>

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

</body>
</html>

Tell Us What You Think

Help us serve you better by taking this brief survey.
We are interested to learn more about your
experience of using our libraries.

We'd really appreciate your feedback.

Start the Survey

Approximate time to complete: 2 min.