Nosso projeto usa o BootstrapValidator para verificação front-end, mas há um ueditor no formulário. Não tem efeito ao usar o bootstrapValidator. Por uma questão de estilo de página unificado, basta modificá -lo e modificá -lo.
Primeiro, vamos dar uma olhada no efeito modificado
O ueditor acima precisa ser ajustado para este ponto. Primeiro, vamos escrever primeiro a estrutura básica.
<form style = "Padding-top: 15px; largura: 100%" id = "defaultForm"> <div> <etiqueta id = "labelid" style = "font-weight: norm;"> ueditor teste </label> <div id = "divid"> <script id = "ueid" type = "text/plana"> </script> <input "> <input"> <script = "ueid" = "text/plana"> </script> style = "altura: 0px; borda: 0px; margem: 0px; preenchimento: 0px"/> </div> </div> <div> <botão type = "submit" id = "btn_save"> salvar </button> </div> </form>
Preste atenção especial, adicionei uma caixa de texto atrás do Ueditor. O objetivo desta caixa de texto é armazenar o conteúdo do Ueditor. Como o seu ueditor não pode usar o BootstrapValidator para verificação, adicionarei uma caixa de texto que pode ser usada para verificação e depois ocultar a entrada usando style = "altura: 0px; borda: 0px; margem: 0px; preenchimento: 0px;" método. Preste atenção especial de que não pode ser oculto com a exibição: Nenhum, então a verificação será escondida.
Então não funcionará agora. Vamos adicionar verificação do conteúdo da caixa de texto agora.
$ ('#defaultForm'). bootstrapValidator ({message: 'verificação falhou', feedbackicons: {válida: 'glificon glificon-ok', inválido: 'glyphicon glificon shorm: sndrefthicon: sndrefthicon: shorm: shorm: sndrorficon shorm: sndrefthicon: sndrorficon shorm:' glificon-shormfShhicon): frie-shorm: shorm: sndrefthicon: sndrefthicon: sndrefthicon: sndrefthicon: sndrefthicon: sndrefthicon: fshithicon: sndrorficon shorm. 'Os dados enviados não podem estar vazios', Validadores: {NotEmpty: {// Mensagem não vazia: 'Os dados preenchidos não podem estar vazios'},}},}}). ON ('success.form.bv', function (e) {e.PreventDefault (); var $ form = $ (e.target); var bv); $ .Post ('endereço', {Data: "Data"}, function (resultado) {alert (resultado);});Vamos tentar, realmente não funciona, porque nosso conteúdo de texto e texto oculto ainda não foi sincronizado e deve ser sincronizado quando inserimos o conteúdo no Ueditor!
Então, sincronizamos no evento ContentChange do Ueditor? ?
Parece que não há problema no início, mas você descobrirá que esses símbolos especiais como *&%￥ não acionarão o evento ContentChange ao entrar.
É embaraçoso agora, vamos continuar a resolvê -lo!
Aqui precisamos resolver dois problemas, um é o evento de conteúdo, o problema que os símbolos especiais não podem ser acionados e o problema de atribuição e re-verificação.
Primeiro, observe o primeiro problema que os símbolos especiais não podem ser acionados. Vamos primeiro olhar para a aparência do Ueditor depois que ele é gerado.
Um iframe foi encontrado aqui. Parece que o conteúdo do Ueditor está oculto aqui. Desde que você ouça os eventos de alterações de conteúdo, o primeiro problema deve ser resolvido.
Há outra segunda pergunta, basta fazer o upload do código
editor = ue.getEditor ("ueid", {InitialFrameHeight: 40}). Ready (function () {var editor = ue.getEditor ("ueid"); /* encontre o iframe de ueditor* / var contents = $ ('#ueid'). $ ("#inputID"). val (ue.getEditor ("ueid"). {//document.all reconhece se é verdadeiro no IE e no IE Contents.get (0) .ttachevent ('onpropertychange', function (e) {fn ();});Após a atribuição, devemos usar o método UpdateStatus e ValidateField de BootstrapValidator para re-verificá-lo e depois tentarmos novamente.
Se você olhar de perto, há três problemas dentro. Uma é que a borda não muda de cor juntos. A segunda é que não há ícone com √ e × à direita. O terceiro é que o Point Direct Point não aciona a verificação.
Ok, vamos resolver um por um! Primeiro, por que a fronteira não mudou de cor? Na verdade, é normal, porque estamos verificando uma caixa de texto oculta. Se a cor mudar, deve ser a caixa de texto.
Ok, então adicionaremos um pedaço de JS e fará a cor da borda da mesma forma que a cor da etiqueta esquerda, então adicione um pedaço de código após cada re-verificação do Ueditor
$ ($ ('#Ueid div') [0]). CSS ('Border-Color', $ ('#LABELID'). CSS ('color'));
O segundo problema é deixar √ × exibi -lo. Isso é um pouco problemático. Ajustei o estilo pouco a pouco. Finalmente, encontrei uma solução. Encontre a classe .edui-default .edui-editor no arquivo ueditor.css e altere sua posição para a posição: inicial; Em seguida, ajuste seu margin-top para o mesmo que a barra de ferramentas no método pronto do Ueditor.
var margintop = $ ($ ('#ueid .edui-editor-toolbarbox') [0]). altura ();
$ ($ ('#divid i') [0]). css ('margin-top', margintop);
O último é melhor resolvido, basta adicionar esse código para formar envio
$ ('#defaultForm'). submmit (function () {$ ('#defaultForm'). data ('bootstrapValidator') .updatestatus ('inputName', 'não_validado', null) .validedfield ('inputName'); $ ('('#ueid div ') [0]). $ ('#LABELID'). CSS ('cor'));Por fim, podemos ver o efeito final e, quando enviarmos o formulário, podemos tomar o Val () da caixa de texto e não queremos adicionar um julgamento extra se (é Ueditor) {....}. Finalmente, todo o conteúdo HTML está anexado
<! Doctype html> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <> href = "scripts /bootstrap.css" rel = "stylesheet" /> <link href = "bootstrapValidator.min.css" rel = "stylesheet" /> <ylem> .form-confeedback {margin-right: 10px; } </style></head><body> <form style="padding-top:15px;width:100%" id="defaultForm"> <div> <label id="labelId" style="font-weight:normal;"> UEditor test</label> <div id="divId"> <script id="UEId" type="text/plain"></script> <input type="text" id = "inputId" name = "inputName" style = "altura: 0px; borda: 0px; margem: 0px; preenchimento: 0px"/> </div> </div> <div> <button type = "submit" id = "btn_save"> salvar </button> </div> </forma> </body> </bodys> </ht "</ht" </hm "</bodyled" </hms) src = "jQuery-1.9.1.min.js"> </script> <script src = "scripts/bootstrap.min.js"> </script> <script src = "bootstrapValidator.min.js"> </script> <cripts) src = "uEeditor/ueditor.all.min.js"> </script> <script src = "zh_cn.js"> </script> <script src = "ueeditor/lang/zh-cn/zh-cn.js"> </script> <cript type = "text/javscld"/javscrintr (javscrintcring (script> <cript)/"text/javscldrcr (javscrintcring"> </script> <cript) Ue.getEditor ("ueid", {InitialFrameHeight: 40}). Pronto (function () {var editor = ue.getEditor ("ueid"); /*encontrando o iframe de ueditor* / var margintop = $ ('#ueid .edui-editor-toolbarbox') [0]. i ') [0]). CSS (' margem-top ', margintop); $ ('#defaultForm'). Data ('bootstrapValidator') // revalide inputName .updatestatus ('inputName', 'não_validado', null) .validedfield ('inputName'); if (document.all) {//document.all reconhece se é verdadeiro no IE e no IE Contents.get (0) .tachevent ('onpropertychange', function (e) {fn ();}); Data ('#defaultForm'). $('#defaultForm').bootstrapValidator({ message: 'Verification failed', feedbackIcons: { valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh' }, fields: { inputName: {// Submitted control name attribute message: 'The Os dados enviados não podem estar vazios ', Validadores: {NotEmpty: {// Mensagem não vazia:' Os dados preenchidos não podem estar vazios '},}},}}). ON (' succcess.form.bv ', functionId (e) {e.PreventDeFault (); var $ form = $ (e.Target); var bv = $ $ .Post ('endereço', {Data: "Data"}, function (resultado) {alert (resultado);});Lembre -se de adicionar algumas bootstraps e jQuery aos que você usa.
O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.