Custom Property Editor (edit the title 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.
Use CK Editor as a property editor

                        var CkEditor_ModalEditor = {
    afterRender: function(modalEditor, htmlElement) {
        var editor = CKEDITOR.replace(htmlElement);
        editor.on('change', function() {
            modalEditor.editingValue = editor.getData();
        });
        editor.setData(modalEditor.editingValue);
        modalEditor.onValueUpdated = function (newValue) {
            editor.setData(newValue);
        }
    },
    destroy: function(modalEditor, htmlElement) {
        var instance = CKEDITOR.instances[htmlElement.id];
        if (instance){
            instance.removeAllListeners();
            CKEDITOR.remove(instance);
        }
    }
};
SurveyCreator.SurveyPropertyModalEditor.registerCustomWidget("html", CkEditor_ModalEditor);
SurveyCreator.SurveyPropertyModalEditor.registerCustomWidget("text", CkEditor_ModalEditor);

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});
SurveyCreator.defaultStrings.pe.tabs["title"] = "Title";
var ind = questionDef.properties.indexOf("title");
if(ind > -1) questionDef.properties.splice(ind, 1);

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



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

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);
});;
                    
<!DOCTYPE html>
<html>
<head>
    <title>Use CK Editor as a property editor, 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.0/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.0/survey-creator.css" type="text/css" rel="stylesheet" />
    <script src="https://surveyjs.azureedge.net/1.1.0/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">
<script src="https://cdn.ckeditor.com/4.5.1/standard/ckeditor.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/1.6.4/showdown.min.js"></script>

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

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

</body>
</html>