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: <div data-lum-editable-field-label="Meu campo"> Esse texto pode ser editado através de um formulário. </div>

Cadastro do exemplo:

Utilização do exemplo:

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: <div data-lum-editable-field-label-data-test="Valor para o atributo data-test"> Essa <em>div</em> possui um atributo chamado <code>data-test</code> cujo valor pode ser editado através de um campo editável. </div>

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:

Utilização do exemplo:

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: <div data-lum-editable-field-label="Meu campo obrigatório" data-lum-editable-field-required="true"> Esse texto pode ser editado através de um formulário. </div>

Cadastro do exemplo:

Utilização do exemplo:

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: <div data-lum-editable-field-label-data-test="Título do campo do atributo" data-lum-editable-field-required-data-test="true" > Essa <em>div</em> possui um atributo chamado <code>data-test</code> cujo valor pode ser editado através de um campo editável e esse atributo é obrigatório. </div>

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:

Utilização do exemplo:

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: <div> O valor da seguinte <em>div</em> admite opções pré-estabelecidas: </div> <div 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" > RJ </div>

Cadastro do exemplo:

Utilização do exemplo:

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: <div 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" > Essa <em>div</em> possui um atributo chamado <code>data-test</code> cujo valor pode ser editado através de um campo editável. </div>

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:

Utilização do exemplo:

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: <div data-lum-editable-field-label="Meu campo HTML" data-lum-editable-field-type="html" > Esse <strong>texto em negrito</strong> pode ser editado através de um formulário. </div>

Cadastro do exemplo:

Utilização do exemplo:

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: <div> A seguinte imagem tem seu atributo <code>src</code> editável através de um formulário:<br> <img src="" alt="" data-lum-editable-field-label-src="Meu campo tipo imagem" data-lum-editable-field-type-src="media" > </div>

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:

Utilização do exemplo:

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: <div> O seguinte link possui seu atributo <code>href</code> editável através de um formulário:<br> <a href="#" data-lum-editable-field-label-href="Campo tipo documento" data-lum-editable-field-type-href="document" >Link</a> </div>

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:

Utilização do exemplo:

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: <div> Esse texto pode ser editado via WYSIWYG. </div> <div data-lum-editable-field-label="Campo" > Esse texto só pode ser editado via formulário. </div>

Cadastro do exemplo:

Utilização do exemplo:

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: <ul data-lum-editable-list="Minha lista" > <li> <div data-lum-editable-field-label="Meu campo" > Elemento editável dentro de uma lista </div> </li> </ul>

Cadastro do exemplo:

Utilização do exemplo:

Tabela referência: