Wichtig bei Text-Attributen: Soll das Attribut mit einem Editor gepflegt werden können, muss das äußere Element ein div-Element sein.
Hilfe-Center
Wichtig bei Text-Attributen: Soll das Attribut mit einem Editor gepflegt werden können, muss das äußere Element ein div-Element sein.
Da Bild-Attribute sehr komplex in ihrer Pflege sind, benötigen diese zusätzlich zu den normalen Attribut-Renderfunktionen noch zwei weitere Spezialfunktionen:
Video- und Audio-Attribute benötigen eine spezielle Toolbar. Diese muss als letztes Element innerhalb des Attributs genommen werden.
Bestimmte Attribute (Bild, Datei, Dropdown und Link) können aus mehreren Einzelattributen bestehen. Solche Mehrfach-Attribute benötigen wiederum spezielle Aufrufe, die hier am Beispiel eines Multiple-Bild-Attributs erklärt werden.
Jedes Attribut besteht aus einem Element, in dem sein Inhalt gepflegt werden kann und aus einer Toolbar, die alle nötigen Pflege-Funktionen, etc. für den Bearbeitungsmodus bereitstellt.
Die Toolbar wird mit @Template.Attribute.RenderToolbar(Html, MyAttribute, EditMode), erzeugt, wobei "MyAttribute" der Namen des Attributs ist. Die Toolbar muss direkt unterhalb des Attributs platziert werden.
Zusätzlich braucht das Attribut in seinem äußersten Element die Zeile @Template.Attribute.RenderEditParams(MyAttribute, EditMode), damit es als Attribut erkannt werden kann.
Rendert die Attribute-Parameter in das umschließende Tag des AttributeWertes.
Rendert die Attributparameter für ein Mehrfachattribut.
@Template.Attribute.RenderImageToolbar(MvcHtmlHelper, CurrentImageAttribute.TypedImage, EditMode)
Rendert die Toolbar für ein Image-Attribut in die Seite.
Rendert die Toolbar für ein Link-Attribut.
Rendert die Toolbar für ein Video-Attribut.
Rendert die Toolbar für ein Audio-Attribut.
<div @Template.Attribute.RenderEditParams(MyAttribute, EditMode)>
' Hier steht der Inhalt des Attributs
</div>
@Template.Attribute.RenderToolbar(Html, MyAttribute, EditMode)
Liefert einen vollständigen Editor (CKEditor) anhand der gegebenen Einstellungen. Hiermit kann der Editor, der auch im Backend verwendet wird, im ViewMode zugänglich gemacht werden.
EditorSettings - Ein Objekt, das die Konfiguration des Editors enthält. Details siehe unter API.Setting.Editor
TagAttributes - Ein optionales String-String-Dictionary. Hiermit können dem Editor beliebige HTML-Attribute gegeben werden.
Diese sollten nur nicht mit "data-contailor-" beginnen, da so die editoreigenen Attribute benannt sind. Wird dennoch ein bereits vom Editor verwendetes Attribut angegeben, wird diese Angabe ignoriert.
Nachfolgend ein Beispiel für das Erstellen eines ViewMode-Editors:
@Code
Dim EditorSettings As New API.Setting.Editor()
EditorSettings.InnerText = "Testtext"
'EditorSettings.Language = API.Languages.GetByCode("en-GB", True)
EditorSettings.Language = API.Languages.GetByCode("es", True)
EditorSettings.AllowBackgroundColor = True
EditorSettings.AllowDash = True
EditorSettings.AllowGermanQuotes = True
EditorSettings.AllowH2 = True
EditorSettings.AllowH3 = True
EditorSettings.AllowH4 = True
EditorSettings.AllowIndent = True
EditorSettings.AllowNbsp = True
EditorSettings.AllowOL = True
EditorSettings.AllowTextColor = True
EditorSettings.AllowTextPositioning = True
EditorSettings.AllowTextUnderline = True
EditorSettings.AllowUL = True
EditorSettings.Tag = API.Enum.EditorTag.Div
Dim TagAttributes As New Dictionary(Of String, String)
TagAttributes.Add("id", "editor_" & Model.Shape.ID)
End Code
<div class="instanceeditor" @Template.Shape.RenderEditParams(Model.Shape, EditMode)>
<b>Testeditor:</b>
@Template.Attribute.RenderEditor(EditorSettings, TagAttributes)
</div>
Soll der Inhalt des Editors an ein Formular gesendet werden ist ein Input-Hidden und ein wenig JagaScript nötig.
@Template.Attribute.RenderEditor(EditorSettings, TagAttributes)
<input type="hidden" id="editordata_@Model.Shape.ID" />
<script>
document.addEventListener('JQueryLoaded', function () {
// Braucht man den Inhalt des Editor bereits beim Laden des HTML braucht man das "instanceReady"
CKEDITOR.on('instanceReady', function () {
$(document).off('click', '#absendebutton');
$(document).on('click', '#absendebutton', function () {
$('#editordata_@Model.Shape.ID').val(CONTAILOR.API.Editor.getData($('#editor_@Model.Shape.ID')));
});
});
});
</script>
Liefert einen vollständigen Datepicker (JQuery-UI) anhand der gegebenen Einstellungen. Hiermit kann der Datepicker, der auch im Backend verwendet wird, im ViewMode zugänglich gemacht werden.
DatePickerSettings - Ein Objekt, das die Konfiguration des Datepickers enthält. Details siehe unter API.Setting.Datepicker
TagAttributes - Ein optionales String-String-Dictionary. Hiermit können dem Datepicker beliebige HTML-Attribute gegeben werden.
Diese sollten nur nicht mit "data-contailor-" beginnen, da so die datepickereigenen Attribute benannt sind. Ebenso vorbelegt sind "min", "max" und "value". Wird dennoch ein bereits vom Datepicker verwendetes Attribut angegeben, wird diese Angabe ignoriert.
Nachfolgend ein Beispiel für das Erstellen eines View-Mode-Datepickers:
@Code
Dim DatePickerSettings As New API.Setting.DatePicker()
DatePickerSettings.Language = API.Languages.GetByCode("fr", True)
DatePickerSettings.AppendText = "test"
DatePickerSettings.Autocomplete = True
DatePickerSettings.AutoSize = True
DatePickerSettings.ChangeMonth = True
DatePickerSettings.ChangeYear = True
DatePickerSettings.Duration = "slow"
DatePickerSettings.GotoCurrent = True
DatePickerSettings.HideIfNoPrevNext = True
DatePickerSettings.Max = Date.Now().AddYears(1)
DatePickerSettings.Min = Date.Now().AddYears(-1)
DatePickerSettings.SelectOtherMonths = True
DatePickerSettings.ShowOtherMonths = True
DatePickerSettings.ShowWeek = True
DatePickerSettings.YearRangeStart = "c-1"
DatePickerSettings.YearRangeEnd = "c+1"
Dim TagAttributes As New Dictionary(Of String, String)
'TagAttributes.Add("id", "datepicker_" & Model.Shape.ID)
End Code
<div class="instancedatepicker" @Template.Shape.RenderEditParams(Model.Shape, EditMode)>
<b>Testdatepicker:</b>
@Template.Attribute.RenderDatePicker(DatePickerSettings, TagAttributes)
@Template.Shape.RenderToolbar(Html, Model, EditMode)
</div>