Добрый день!
Хочу добавить панель редактирования текста к существующему полю сообщения, но необходимая панель у него не появляется
Следовал инструкции 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*/
};
});