Hilfe-Center

Attribute

Weitere Details zu den einzelnen AttributeTypen

Text

Wichtig bei Text-Attributen: Soll das Attribut mit einem Editor gepflegt werden können, muss das äußere Element ein div-Element sein.

Bild

Da Bild-Attribute sehr komplex in ihrer Pflege sind, benötigen diese zusätzlich zu den normalen Attribut-Renderfunktionen noch zwei weitere Spezialfunktionen:

Link

Analog zu Bildern benötigen auch Links spezielle Werte und Toolbars.

Datei

Video- und Audio-Attribute benötigen eine spezielle Toolbar. Diese muss als letztes Element innerhalb des Attributs genommen werden.

Multiple-Attribute

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.

Funktionen für Attribute

RenderEditParams(
   Attribute As Content.AttributeValue.Base, 
   EditMode As Boolean, 
   Optional MoveLevelsInDomUp As Integer = 0
) As MvcHtmlString [V2]

Rendert die Attribute-Parameter in das umschließende Tag des AttributeWertes.

  • Attribute: Das aktuelle Attribut
  • EditMode: Bearbeitungsmodus
  • Optionale Parameter:
  • MoveLevelsInDomUp: Für Spezialfälle: Steuert die Anzahl Ebenen im DOM, die die Toolbar zur Laufzeit nach oben verschoben wird

RenderMultipleToolbar(
   Attribute As API.iAttributeValue, 
   EditMode As Boolean,
   MvcHtmlHelper As HtmlHelper
) As MvcHtmlString [V2]

Rendert die Attributparameter für ein Mehrfachattribut.

  • Attribute: Das aktuelle Attribut
  • EditMode: Bearbeitungsmodus
  • MvcHtmlHelper: Intern benötigtes Hilfsobjekt

Image

RenderImageToolbar(
   ImageAttribute As API.iTypedImage, 
   EditMode As Boolean,
   MvcHtmlHelper As HtmlHelper
) As MvcHtmlString [V2]

@Template.Attribute.RenderImageToolbar(MvcHtmlHelper, CurrentImageAttribute.TypedImage, EditMode)

Rendert die Toolbar für ein Image-Attribut in die Seite.

  • ImageAttribute: Das aktuelle Attribut
  • EditMode: Bearbeitungsmodus
  • MvcHtmlHelper: Intern benötigtes Hilfsobjekt

Link

RenderLinkToolbar(
   LinkAttribute As API.iTypedLink, 
   EditMode As Boolean,
   MvcHtmlHelper As HtmlHelper
) As MvcHtmlString [V2]

Rendert die Toolbar für ein Link-Attribut.

  • LinkAttribute: Das aktuelle Attribut
  • EditMode: Bearbeitungsmodus
  • MvcHtmlHelper: Intern benötigtes Hilfsobjekt

Video

RenderVideoToolbar(
   FileAttribute As API.iTypedFile, 
   EditMode As Boolean,
   MvcHtmlHelper As HtmlHelper
) As MvcHtmlString [V2]

Rendert die Toolbar für ein Video-Attribut.

  • FileAttribute: Das aktuelle Attribut
  • EditMode: Bearbeitungsmodus
  • MvcHtmlHelper: Intern benötigtes Hilfsobjekt

Audio

RenderAudioToolbar(
   FileAttribute As API.iTypedFile, 
   EditMode As Boolean,
   MvcHtmlHelper As HtmlHelper
) As MvcHtmlString [V2]

Rendert die Toolbar für ein Audio-Attribut.

  • FileAttribute: Das aktuelle Attribut
  • EditMode: Bearbeitungsmodus
  • MvcHtmlHelper: Intern benötigtes Hilfsobjekt

Allgemeines Verwendungsbeispiel der verschiedenen Attributtypen

Copy

<div @Template.Attribute.RenderEditParams(MyAttribute, EditMode)>
        ' Hier steht der Inhalt des Attributs
</div>
@Template.Attribute.RenderToolbar(Html, MyAttribute, EditMode)



Erstellung eines Editors im ViewMode:

Function RenderEditor(
    EditorSettings As API.Setting.Editor,
    Optional TagAttributes As Dictionary(Of String, String) = Nothing
) As MvcHtmlString

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:

Copy

@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.

Copy

@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>



Erstellung eines Datepickers im ViewMode:

Function RenderDatePicker(
     DatePickerSettings As API.Setting.DatePicker,
     Optional TagAttributes As Dictionary(Of String, String) = Nothing
) As MvcHtmlString

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:

Copy


@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>

War dieser Beitrag hilfreich?
0 von 0 fanden dies hilfreich.
Es ist ein technisches Problem aufgetreten. Bitte wenden Sie sich telefonisch oder per E-Mail an uns.