Question T1488
Visible to All Users

Integrate SummerNote Editor in place of CK editor

created 6 years ago (modified 6 years ago)

Hi Serge,

I am trying to convert CK Editor into Summer Note editor. I created Editor widget by including it in SurveyJS library.

FYI : http://prntscr.com/m6xgnm

Here is my reference code through which I am creating CK editor custom widget on tool. Please be noted, in online reference example, it provides CK Editor only as default. But I want Summer Note in place of CK Editor.

Please assist me on this as soon as possible.

Thanks.

Comments (1)

    Hello,

    Here is the live sample - https://plnkr.co/edit/sjte6ZQ1REPlOGDrzyJ5?p=preview

    JavaScript
    $(document).ready(function() { var SummernoteEditor_ModalEditor = { afterRender: function (modalEditor, htmlElement) { var parent = htmlElement.parentElement; parent.innerHTML = "<div></div>"; htmlElement = parent.children[0]; htmlElement.style.width = "100%"; htmlElement.style.height = "100%"; htmlElement.style.overflow = "auto"; $(htmlElement).summernote({ callbacks: { onChange: function(contents, $editable) { modalEditor.editingValue = $(htmlElement).summernote('code'); } } }); $(htmlElement).summernote('code', modalEditor.editingValue); modalEditor.onValueUpdated = function (newValue) { $(htmlElement).summernote('code', modalEditor.editingValue); } }, destroy: function (modalEditor, htmlElement) { $(htmlElement).summernote('destroy'); } }; SurveyEditor .SurveyPropertyModalEditor .registerCustomWidget("html", SummernoteEditor_ModalEditor); SurveyEditor .SurveyPropertyModalEditor .registerCustomWidget("text", SummernoteEditor_ModalEditor); });

    Further summernote editor customozations and API are not related to the SurveyJS and can be found on the summernote editor home page.

    Thanks, Serge
    SurveyJS Team