Добрый день!
Хочу добавить панель редактирования текста к существующему полю сообщения, но необходимая панель у него не появляется
Следовал инструкции https://community.terrasoft.ua/questions/izmenenie-teksta-v-kommentariy…
Для этого создал замещающую модель представления базовой схемы SocialFeed из пакета ESN, после чего удалось отрисовать новое поле с редактором
diff: [ // Сообщение в которое хочу добавить редактор текста //Зеленый блок на картинке { "operation": "insert", "name": "SocialMessageEdit", "parentName": "SocialMessageEditContainer", "propertyName": "items", "values": { "generateId": false, "className": "Terrasoft.ESNHtmlEdit", "itemType": Terrasoft.ViewItemType.MODEL_ITEM, "dataValueType": Terrasoft.DataValueType.TEXT, "contentType": Terrasoft.ContentType.RICH_TEXT, "labelConfig": { "visible": false }, "keydown": {bindTo: "onKeyDown"}, "enterkeypressed": {bindTo: "onEnterKeyPressed"}, "value": {bindTo: "SocialMessageText"}, "placeholder": {bindTo: "Resources.Strings.WritePostHint"}, "classes": { htmlEditClass: ["postMessage", "placeholderOpacity", "feedMaxWidth"] }, "focus": {bindTo: "onSocialMessageEditFocus"}, "focused": {bindTo: "SocialMessageEditFocused"}, "blur": {bindTo: "onSocialMessageEditBlur"}, "markerValue": "postMessageMemoEdit", "height": "26px", "prepareList": {bindTo: "prepareEntitiesExpandableList"}, "list": {bindTo: "entitiesList"}, "listViewItemRender": {bindTo: "onEntitiesListViewItemRender"}, "autoGrow": true, "autoGrowMinHeight": 26, "customItemAttributes": { schema: { property: "schemaName", attribute: "data-schemaname" } } } }, //Поле с редактором, которое удалось добавить //Красный блок на картинке { "operation": "insert", // Операция добавления компонента на страницу. "name": "Message",//"Message", // Имя колонки схемы, к которой привязан компонент. "parentName": "SocialMessageEditContainer", // Мета-имя родительского контейнера, в который добавляется поле. "propertyName": "items", // Поле добавляется в коллекцию компонентов родительского элемента. "values": { // Заголовок поля. "contentType": this.Terrasoft.ContentType.RICH_TEXT, "labelConfig": { "visible": false }, // Расположение поля. "layout": { "column": 0, // Номер столбца. "row": 0, // 5 Номер строки. "colSpan": 12, // 12 Диапазон занимаемых столбцов. "layoutName": "SocialMessageEditContainer" }, "height": "50px", "styles": { "background-color": "white" }, "controlConfig": { //здесь и ниже код для того, чтобы в примечания можно было добавлять картинки "imageLoaded": { "bindTo": "SortIcon"//"insertImagesToNotes" }, "images": { "bindTo": "SummariesIcon"//"NotesImagesCollection" } } } } ]
Вот такой результат вижу сейчас
Нравится
Если попробовать операцией merge изменить зеленый блок, функциональность не проявляется
{ "operation": "merge", // Операция добавления компонента на страницу. "name": "SocialMessageEdit",//"Message", // Имя колонки схемы, к которой привязан компонент. "parentName": "SocialMessageEditContainer", // Мета-имя родительского контейнера, в который добавляется поле. "propertyName": "items", // Поле добавляется в коллекцию компонентов родительского элемента. "values": { // Заголовок поля. "contentType": this.Terrasoft.ContentType.RICH_TEXT, "labelConfig": { "visible": false }, // Расположение поля. "layout": { "column": 0, // Номер столбца. "row": 0, // 5 Номер строки. "colSpan": 12, // 12 Диапазон занимаемых столбцов. "layoutName": "SocialMessageEditContainer" }, "height": "50px", "styles": { "background-color": "white" }, "controlConfig": { //здесь и ниже код для того, чтобы в примечания можно было добавлять картинки "imageLoaded": { "bindTo": "SortIcon"//"insertImagesToNotes" }, "images": { "bindTo": "SummariesIcon"//"NotesImagesCollection" } } } }
Полный код замещающей модели представления базовой схемы SocialFeed :
https://datagr-my.sharepoint.com/:u:/g/personal/serhii_udielov_datagroup_ua/Efsq1LLC5wJOuTQV_9Ld4nMB3Y12zlmuLfn96ROGOyQHJA?e=jjhI5y
Добрый день,
У меня получилось такое сделать, только нужно еще с кнопкой Publish доделать (пробовал через новые контейнеры сделать, но кнопку адекватно переместить не смог):
Сам код:
define("SocialFeed", ["ESNHtmlEditModule", "SocialMentionUtilities", "css!SocialMessagePublisherModule", "NotesUtilities" ], function() { return { entitySchemaName: "SocialMessage", mixins: { NotesUtilities: "Terrasoft.NotesUtilities" }, attributes: { "NotesImagesCollection": {dataValueType: Terrasoft.DataValueType.COLLECTION} }, methods: { /** * @inheritdoc * @overridden */ init: function(callback, scope) { this.callParent(arguments); this.mixins.NotesUtilities.initNotesImagesCollection.call(this); }, onNotesImagesUploadComplete: function() { this.hideBodyMask(); this.updateFileDetail(); }, onNotesImagesUpload: function() { this.showBodyMask(); }, onButtonClick: function(){ console.log("Test"); }, postPublishActionsVisible: function() { return true; } }, diff: /**SCHEMA_DIFF*/[ { "operation": "insert", "name": "MessageContainer", "parentName": "SocialFeedHeader", "propertyName": "items", "values": { "itemType": Terrasoft.ViewItemType.CONTAINER, "items": [] } }, { "operation": "insert", "name": "Message", "parentName": "MessageContainer", "propertyName": "items", "values": { "contentType": this.Terrasoft.ContentType.RICH_TEXT, "labelConfig": { "visible": false }, "value": {bindTo: "SocialMessageText"}, "layout": { "column": 0, "row": 0, "colSpan": 12, "layoutName": "SocialFeedHeader" }, "height": "50px", "styles": { "background-color": "white" }, "controlConfig": { "imageLoaded": { "bindTo": "SortIcon" }, "images": { "bindTo": "NotesImagesCollection" } } } }, { "operation": "insert", "name": "MessagePublishButtonContainer", "parentName": "MessageContainer", "propertyName": "items", "values": { "generateId": false, "itemType": Terrasoft.ViewItemType.CONTAINER, "classes": { wrapClassName: ["publishButtonWrap"] }, "visible": {bindTo: "postPublishActionsVisible"}, "items": [] } }, { "operation": "insert", "parentName": "MessagePublishButtonContainer", "name": "MessagePublishButton", "propertyName": "items", "values": { "generateId": false, "caption": {bindTo: "Resources.Strings.Publish"}, "itemType": Terrasoft.ViewItemType.BUTTON, "style": Terrasoft.controls.ButtonEnums.style.GREEN, "click": {bindTo: "onPostPublishClick"}, "markerValue": "publishPostMessageButton", "classes": { textClass: ["floatRight"] }, "clickDebounceTimeout": 1000 } }, { "operation": "remove", "name": "SocialMessageContainer" } ]/**SCHEMA_DIFF*/ }; });
Сообщения публикуются при нажатии на Publish, осталось только переместить саму кнопку.
Oleg Drobina,
Супер! Получилось отобразить редактор, поигрался немного с индексами и вышло более-менее корректно отобразить необходимые панельки
Но теперь появилась следующая проблема :
при попытке добавить изображение с локального устройства, ловлю такое (картинка не загружаеться):
Мой текущий код елемента :
{
"operation": "insert",
"name": "Message",
"parentName": "MessageContainer",
"propertyName": "items",
"values": {
//"bindTo": "Message",
"itemType": Terrasoft.ViewItemType.MODEL_ITEM,
//"dataValueType": Terrasoft.DataValueType.TEXT,
"contentType": this.Terrasoft.ContentType.RICH_TEXT,
//"className": "Terrasoft.ESNHtmlEdit", //- removed redactor
"labelConfig": {
"visible": false
},
// "keydown": {bindTo: "onKeyDown"}, //invalid logic in side chat
// "enterkeypressed": {bindTo: "onEnterKeyPressed"}, //invalid logic in side chat
"value": {bindTo: "SocialMessageText"}, //+
//"placeholder": {bindTo: "Resources.Strings.WritePostHint"},
"focus": {bindTo: "onSocialMessageEditFocus"},
"focused": {bindTo: "SocialMessageEditFocused"},
"blur": {bindTo: "onSocialMessageEditBlur"},
"markerValue": "postMessageMemoEdit",
"layout": {
"column": 0,
"row": 0,
"colSpan": 12,
"layoutName": "SocialFeedHeader"
},
"height": "26px",
//"classes": {
// htmlEditClass: ["placeholderOpacity"]
//},
"styles": {
"background-color": "white"
},
"controlConfig": {
"imageLoaded": {
"bindTo": "SortIcon"
},
"images": {
"bindTo": "NotesImagesCollection"
}
}
},
"index" : 0
},
Поправил код, теперь изображения загружаются корректно
define("SocialFeed", ["ESNHtmlEditModule", "SocialMentionUtilities", "css!SocialMessagePublisherModule", "NotesUtilities" ], function() { return { entitySchemaName: "SocialMessage", mixins: { NotesUtilities: "Terrasoft.NotesUtilities" }, attributes: { "NotesImagesCollection": {dataValueType: Terrasoft.DataValueType.COLLECTION} }, methods: { /** * @inheritdoc * @overridden */ init: function(callback, scope) { this.callParent(arguments); this.mixins.NotesUtilities.initNotesImagesCollection.call(this); }, postPublishActionsVisible: function() { return true; } }, diff: /**SCHEMA_DIFF*/[ { "operation": "insert", "name": "MessageContainer", "parentName": "SocialFeedHeader", "propertyName": "items", "values": { "itemType": Terrasoft.ViewItemType.CONTAINER, "items": [] } }, { "operation": "insert", "name": "Message", "parentName": "MessageContainer", "propertyName": "items", "values": { "contentType": this.Terrasoft.ContentType.RICH_TEXT, "labelConfig": { "visible": false }, "value": {bindTo: "SocialMessageText"}, "layout": { "column": 0, "row": 0, "colSpan": 12, "layoutName": "SocialFeedHeader" }, "height": "50px", "styles": { "background-color": "white" }, "controlConfig": { "imageLoaded": { "bindTo": "insertImagesToNotes" }, "images": { "bindTo": "NotesImagesCollection" } } } }, { "operation": "insert", "name": "MessagePublishButtonContainer", "parentName": "MessageContainer", "propertyName": "items", "values": { "generateId": false, "itemType": Terrasoft.ViewItemType.CONTAINER, "classes": { wrapClassName: ["publishButtonWrap"] }, "visible": {bindTo: "postPublishActionsVisible"}, "items": [] } }, { "operation": "insert", "parentName": "MessagePublishButtonContainer", "name": "MessagePublishButton", "propertyName": "items", "values": { "generateId": false, "caption": {bindTo: "Resources.Strings.Publish"}, "itemType": Terrasoft.ViewItemType.BUTTON, "style": Terrasoft.controls.ButtonEnums.style.GREEN, "click": {bindTo: "onPostPublishClick"}, "markerValue": "publishPostMessageButton", "classes": { textClass: ["floatRight"] }, "clickDebounceTimeout": 1000 } }, { "operation": "remove", "name": "SocialMessageContainer" } ]/**SCHEMA_DIFF*/ }; });