Open the menu

    Marcação de elementos HTML para edição estruturada

    O editor HTML do LumisXP suporta marcações no seu conteúdo para criar dinamicamente um formulário de edição. A seguir veremos uma referência de todas as marcações suportadas.

    Texto de elemento HTML -- tipo string

    Para se criar um campo tipo string referente ao texto de um elemento HTML, basta utilizar a marcação data-lum-editable-field-label="Rótulo do campo" no elemento HTML em questão. Nesse exemplo, Rótulo do campo é o rótulo que será exibido no formulário editável.

    Exemplo:

    Cadastro do exemplo:

    Cadastro de campo tipo String
    Cadastro de campo tipo String

    Utilização do exemplo:

    Uso de campo tipo String
    Uso de campo tipo String

     

    Texto de atributo HTML -- tipo string

    Para se criar um campo tipo string referente ao texto de um atributo HTML, basta utilizar a marcação data-lum-editable-field-label-data-test="Rótulo do campo" no elemento HTML em questão. Nesse exemplo, Rótulo do campo é o rótulo que será exibido no formulário editável e data-test é o nome do atributo que será editável através do formulário.

    Exemplo:

    No exemplo dado, o atributo a ser transformado em um campo editável é data-test. Por isso a marcação do rótulo do campo foi data-lum-editable-field-label-data-test="Valor para o atributo data-test". Caso ao invés de data-test o atributo a ser preenchido fosse xpto, a marcação teria sido data-lum-editable-field-label-xpto="Valor para o atributo data-test".

    Cadastro do exemplo:

    Cadastro de campo tipo String
    Cadastro de campo tipo String

    Utilização do exemplo:

    Uso de campo tipo String
    Uso de campo tipo String

     

    Texto de elemento HTML -- tipo string, obrigatório

    Para se criar um campo tipo string e obrigatório referente ao texto de um elemento HTML, basta utilizar a marcação data-lum-editable-field-label="Rótulo do campo" data-lum-editable-field-required="true" no elemento HTML em questão. Nesse exemplo, Rótulo do campo é o rótulo que será exibido no formulário editável.

    Exemplo:

    Cadastro do exemplo:

    Cadastro de campo tipo String obrigatório
    Cadastro de campo tipo String obrigatório

    Utilização do exemplo:

    Uso de campo tipo String obrigatório
    Uso de campo tipo String obrigatório

     

    Texto de atributo HTML -- tipo string e obrigatório

    Para se criar um campo tipo string obrigatório referente ao texto de um atributo HTML, basta utilizar a marcação data-lum-editable-field-label-data-test="Rótulo do campo" data-lum-editable-field-required-data-test="true" no elemento HTML em questão. Nesse exemplo, Rótulo do campo é o rótulo que será exibido no formulário editável e data-test é o nome do atributo que será editável através do formulário.

    Exemplo:

    No exemplo dado, o atributo a ser transformado em um campo editável é data-test. Por isso a marcação do rótulo do campo foi data-lum-editable-field-label-data-test="Título do campo do atributo" data-lum-editable-field-required-data-test="true". Caso ao invés de data-test o atributo a ser preenchido fosse xpto, a marcação teria sido data-lum-editable-field-label-xpto="Título do campo do atributo" data-lum-editable-field-required-xpto="true".

    Cadastro do exemplo:

    Cadastro de campo tipo String obrigatório
    Cadastro de campo tipo String obrigatório

    Utilização do exemplo:

    Uso de campo tipo String obrigatório
    Uso de campo tipo String obrigatório

     

    Texto de elemento HTML -- tipo string com opções pré-cadastradas

    Para se criar um campo tipo string e com opções pré-cadastradas referente ao texto de um elemento HTML, basta utilizar a marcação data-lum-editable-field-label="Campo com opções" data-lum-editable-field-options="Rio de Janeiro | RJ ; São Paulo | SP ; Minas Gerais | MG" no elemento HTML em questão. Nesse exemplo, Campo com opções é o rótulo que será exibido no formulário editável e Rio de Janeiro | RJ ; São Paulo | SP ; Minas Gerais | MG são as opções no formato Rótulo da opção 1 | Valor da opção 1 ; Rótulo da opção 2 | Valor da opção 2 ; ... ; Rótulo da opção n | Valor da opção n.

    Exemplo:

    Cadastro do exemplo:

    Cadastro de campo tipo String com opções
    Cadastro de campo tipo String com opções

    Utilização do exemplo:

    Uso de campo tipo String com opções
    Uso de campo tipo String com opções

     

    Texto de atributo HTML -- tipo string com opções pré-cadastradas

    Para se criar um campo tipo string com opções pré-cadastradas referente ao texto de um atributo HTML, basta utilizar a marcação data-lum-editable-field-options-data-test="Rio de Janeiro | RJ ; São Paulo | SP ; Minas Gerais | MG" data-lum-editable-field-label-data-test="Meu campo" no elemento HTML em questão. Nesse exemplo, Meu campo é o rótulo que será exibido no formulário editável, data-test é o nome do atributo que será editável através do formulário e Rio de Janeiro | RJ ; São Paulo | SP ; Minas Gerais | MG são as opções no formato Rótulo da opção 1 | Valor da opção 1 ; Rótulo da opção 2 | Valor da opção 2 ; ... ; Rótulo da opção n | Valor da opção n.

    Exemplo:

    No exemplo dado, o atributo a ser transformado em um campo editável é data-test. Por isso a marcação do rótulo do campo foi data-lum-editable-field-options-data-test="Rio de Janeiro | RJ ; São Paulo | SP ; Minas Gerais | MG" data-lum-editable-field-label-data-test="Meu campo". Caso ao invés de data-test o atributo a ser preenchido fosse xpto, a marcação teria sido data-lum-editable-field-options-xpto="Rio de Janeiro | RJ ; São Paulo | SP ; Minas Gerais | MG" data-lum-editable-field-label-xpto="Meu campo".

    Cadastro do exemplo:

    Cadastro de campo tipo String com opções
    Cadastro de campo tipo String com opções

    Utilização do exemplo:

    Uso de campo tipo String com opções
    Uso de campo tipo String com opções

     

    Texto de elemento HTML -- tipo HTML

    Para se criar um campo tipo HTML, basta utilizar a marcação data-lum-editable-field-label="Meu campo HTML" data-lum-editable-field-type="html" no elemento HTML em questão. Nesse exemplo, Meu campo HTML é o rótulo que será exibido no formulário editável.

    Exemplo:

    Cadastro do exemplo:

    Cadastro de campo tipo HTML
    Cadastro de campo tipo HTML

    Utilização do exemplo:

    Uso de campo tipo HTML
    Uso de campo tipo HTML

     

    Imagem de um <img>

    Para se criar um campo tipo imagem para se editar um elemento <img>, basta utilizar a marcação data-lum-editable-field-label-src="Meu campo tipo imagem" data-lum-editable-field-type-src="media" no elemento HTML em questão. Nesse exemplo, Meu campo tipo imagem é o rótulo que será exibido no formulário editável.

    Exemplo:

    No exemplo dado, o atributo a ser transformado em um campo editável é src. Por isso a marcação do rótulo do campo foi data-lum-editable-field-label-src="Meu campo tipo imagem" data-lum-editable-field-type-src="media". Caso ao invés de src o atributo a ser preenchido fosse href, a marcação teria sido data-lum-editable-field-label-href="Meu campo tipo imagem" data-lum-editable-field-type-href="media".

    Cadastro do exemplo:

    Cadastro de campo tipo Imagem
    Cadastro de campo tipo Imagem

    Utilização do exemplo:

    Uso de campo tipo Imagem
    Uso de campo tipo Imagem

     

    Link para um documento

    Para se criar um campo tipo documento para se editar um elemento <a>, basta utilizar a marcação data-lum-editable-field-label-href="Campo tipo documento" data-lum-editable-field-type-href="document" no elemento HTML em questão. Nesse exemplo, Campo tipo documento é o rótulo que será exibido no formulário editável.

    Exemplo:

    No exemplo dado, o atributo a ser transformado em um campo editável é href. Por isso a marcação do rótulo do campo foi data-lum-editable-field-label-href="Campo tipo documento" data-lum-editable-field-type-href="document". Caso ao invés de href o atributo a ser preenchido fosse src, por exemplo, a marcação teria sido data-lum-editable-field-label-src="Campo tipo documento" data-lum-editable-field-type-src="document".

    Cadastro do exemplo:

    Cadastro de campo tipo Documento
    Cadastro de campo tipo Documento

    Utilização do exemplo:

    Uso de campo tipo Documento
    Uso de campo tipo Documento

     

    Edição mista (WYSIWYG / Edição via Formulário)

    O editor suporta edição mista, mesclando partes do HTML com edição WYSIWYG e partes do HTML com edição via formulário.

    Exemplo:

    Cadastro do exemplo:

    Cadastro de edição mista
    Cadastro de edição mista

    Utilização do exemplo:

    Uso de edição mista
    Uso de edição mista

     

    Lista de elementos

    Para se criar uma lista de elementos, basta utilizar a marcação data-lum-editable-list="Minha lista" no elemento HTML em questão. Nesse exemplo, Minha lista é o rótulo que será exibido para a lista no formulário editável.

    Exemplo:

    Cadastro do exemplo:

    Cadastro de lista
    Cadastro de lista

    Utilização do exemplo:

    Uso de lista
    Uso de lista

     

    Campo de valor gerado

    A marcação data-lum-editable-value-generator-ATTRIBUTE_NAME="Calculated value:'${attribute.SRC_ATTRIBUTE_NAME}'" permite que o atributo interno (ou o campo em si, caso 'ATTRIBUTE_NAME' seja omitido), seja baseado em um outro attributor interno. O valor do campo pode ser resgatado utilizando ${attribute.SRC_ATTRIBUTE_NAME}, onde SRC_ATTRIBUTE_NAME é o nome do attributo interno.

    Exemplo:

    Cadastro do exemplo:

    Cadastro de lista
    Cadastro de campo gerador de valor

    No exemplo dado, data-lum-editable-value-generator-style informa que o atributo style daquele html irá receber um novo valor que é gerado pela expressão background-color:${attribute.fundo}; color: ${attribute.cor}. A marcação ${attribute.NOME-DO-ATRIBUTO} é utilizada para resgatar o valor do atribudo interno daquela tag.

    Utilização do exemplo:

    Uso de lista
    Uso do campo de valor gerado

     

    Tabela referência:

    Marcação Obrigatório Valores possíveis Descrição
    data-lum-editable-field-label Sim Um texto com o rótulo do campo do formulário. Define um rótulo para um campo relacionado ao texto de um elemento HTML.
    data-lum-editable-field-label-[ATRIBUTO] Define um rótulo para um campo relacionado ao texto de um atributo HTML chamado [ATRIBUTO].
    data-lum-editable-field-type Não
    • string (padrão, se omitido): texto curto
    • text: texto longo
    • media: imagem
    • document: documento
    • html: HTML
    		 Define o tipo de dado do campo relacionado ao elemento HTML.
    data-lum-editable-field-type-[ATRIBUTO] Define o tipo de dado do campo relacionado ao atributo HTML chamado [ATRIBUTO].
    data-lum-editable-field-required Não
    • false (padrão, se omitido): não
    • true: sim
    		 Define se o campo relacionado ao elemento HTML será obrigatório.
    data-lum-editable-field-required-[ATRIBUTO] Define se o campo relacionado ao atributo HTML chamado [ATRIBUTO] será obrigatório.
    data-lum-editable-html-field-simple-editor Não
    • false: força o uso do editor completo
    • true: força o uso do editor simples
    		 Indica se um campo do tipo HTML deve forçar usar um editor simples (true) ou se deve forçar usar um editor completo (false). Caso omitido, o editor completo será usado se o elemento relacionado ao campo for um dos elementos a seguir:
    • ARTICLE
    • SECTION
    • NAV
    • ASIDE
    • HEADER
    • FOOTER
    • ADDRESS
    • BLOCKQUOTE
    • LI
    • DT
    • DD
    • FIGCAPTION
    • MAIN
    • SEARCH
    • DIV
    • CAPTION
    • TD
    • TH
    • FORM
    • FIELDSET
    • DETAILS
    • DIALOG

    Caso contrário, um editor simples será utilizado.
    data-lum-editable-html-field-simple-editor-[ATRIBUTO] Indica se um campo do tipo HTML atrelado a um atributo chamado [ATRIBUTO] deve forçar usar um editor simples (true) ou se deve forçar usar um editor completo (false). Caso omitido, o editor completo será usado.
    data-lum-editable-list Não Um texto com o rótulo da lista do formulário. Marca um elemento como sendo uma lista de elementos filhos.
    data-lum-editable-dummy-tag="true" Não
    • true(padrão)
    		 Um elemento marcado com este atributo será removido, porém manterá todo o seu conteúdo interno na mesma posição em que foi introduzido. Ou seja, a Tag HTML marcada com este atributo e seu fechamento serão removidas, mas seu conteúdo será mantido.
    data-lum-editable-value-generator Não Um texto com expressão contendo o valor que será atribuído. Define um valor para o elemento HTML que é construído através de uma um texto que pode resgatar valores de atributos internos do elemento.
    data-lum-editable-value-generator-[ATRIBUTO] Define um valor para um atributo interno do HTML chamado [ATRIBUTO]. Esse valor é construído através de uma expressão que pode resgatar valores de outros atributos internos do mesmo elemento HTML.