Resumirei os problemas que encontrei no processo de personalização do estilo do editor, principalmente a interface de desenvolvimento secundário do editor e a personalização do estilo com o Angular. Existem muitos problemas. Finalmente, com a ajuda de **, foi concluído. Ainda não há interação entre a versão antiga e a nova versão, mas não é difícil. A seguir explica os problemas separadamente.
Desenvolvimento do Ueditor
Você pode baixar qualquer versão no site oficial e usá -lo: http://ueditor.baidu.com/website/download.html Após o download, você pode usá -lo de acordo com a configuração no site oficial. Endereço do documento: http://fex.baidu.com/ueditor/ Existem muitos problemas com o desenvolvimento secundário do Ueditor e eles estão listados aqui.
1. O Ueditor filtra automaticamente a tag div em uma tag P
Durante o processo de estilo personalizado, descobri que todos os divs foram filtrados e as tags UNP foram encontradas. Encontrei muitas informações on -line, mas nenhum deles foi útil. Mais tarde, vi um mestre escrevendo que a configuração de diferentes versões do Ueditor é diferente. Aqui escrevi minha solução: Abra o arquivo de configuração ueditor.config.js e adicione o seguinte código:
, Allowddivtranstop: false
Observe que ele é adicionado manualmente na janela.uediroe_config! Além disso, algumas pessoas encontraram situações semelhantes e podem se referir a: http://www.cnblogs.com/olive116/p/3464495.html
2. Como inserir estilos personalizados no editor?
A interface é fornecida no editor, vamos dar uma olhada.
função inserthtml () {var value = prompt ('inserir html code', ''); ue.getEditor ('editor'). ExecCommand ('inserthtml', value)}Então, como você usa essa interface em nosso próprio projeto? Primeiro, você precisa realizar o editor, geralmente usa ue.getEditor () diretamente para obter a instância.
// Use o método de fábrica GetEditor para criar e fazer referência a uma instância do editor. Se você se referir ao editor sob um determinado fechamento, poderá chamar o ue.getEditor ('editor') para obter a instância relevante antes de usá -lo. Precisamos apresentar o editor para chamar seu método.
<script src = "libs/ueditor/ueditor.config.js"> </script> <script src = "libs/ueditor/ueditor.all.min.js"> </script>
Crie um exemplo de editor em nosso projeto angular. O editor fornece métodos prontos para instanciar:
// Crie a coluna real do editor $ scope.ready = function (ueditor) {window.editor = ueditor;};OK, agora podemos usar a instância do editor. Em seguida, vamos dar uma olhada nos estilos personalizados.
Estilo personalizado
Vamos dar uma olhada no estilo do menu de acordeão que escrevemos em mãos. Endereço para download: https://github.com/foreverjiangting/set-menu/tree/master/menu A interação usada aqui usa data-toggle = "colapso", mas conflita com NG, portanto, o NG precisa ser usado para controlar a interação. Vamos ver como escrever:
<!-Adicionar barra de ferramentas-> <div> <h4> barra de ferramentas </h4> <!-conteúdo da barra lateral-> <div> <a ng-click = "Toggle ('titlestyle')"> </span> home </a> <l ng-hide = "titlestyle" id = "usemeun> <li- ng ng-ren-ren-lines) ng-click = "inserthtml ('títulos', title)"> <a> {{title.name}} </a> </li> </ul> <a ng-click = "Toggle ('titleCon')"> <span> </span> icon </a> fontes.imgs "ng-click =" inserthtml ('imgs', img) "> <a> <img ng-src =" {{img.url}} "> </a> </li> </ul> <a ng-click =" Toggle ('titleyouxia') "> id = "glyphicnmenu"> <li ng-repeat = "yx em fontes.yxs" ng-click = "inserthtml ('yxs', yx)"> <a> {{yx.name}} </a> </li> </ul> <a ng-click = togle}}} </a> Board </a> <ul ng-hide = "titlesvens" id = "servemenu"> <li ng-repeat = "Ser em fontes.sers" ng-click = "inserthtml ('sers', ser)"> <a> {{ser.name}} </a> ng-click = "Toggle ('titLearticle')"> <pan> </span> Artigos recomendados </a> <ul ng-hide = "titlearticle" id = "articlemenu"> <li ng-repeat = "arc em fontes.arcs" ng-click = "inserthtml ('arcs',, arc) "> <a> {{arc.article}} </a> </li> </ul> </div> <!-tema do conteúdo termina-> </div>O código em JS é o seguinte:
// Estilo de interação da barra de ferramentas $ scope.titlestyle = $ scope.titleicon = $ scope.titleyouxia = $ scope.titleServe = $ titLearticle = false; $ scope.toggle = function (style) {$ scope [style] =! $ scope [estilo];}O efeito de acordeão controlado por Ng é simples e leve, com uma pequena quantidade de código.
Os efeitos são os seguintes:
Depois que o estilo for escrito, ele será inserido no editor. Então, como inseri -lo? Existem dois tipos de coisas aqui: insira diretamente e insira de acordo com os artigos após a pesquisa. É mais fácil inserir diretamente.
$ scope.inserthtml = function (tipo, item) {if (type === 'títulos' || tipo === 'imgs') {editor.execCommand ('inserthtml', item.html);}O efeito após a inserção é o seguinte:
Claro, qual é a utilidade de fazer isso? Ele usa principalmente o conteúdo no editor e usa a ligação de dados NG para refletir no aplicativo, criando assim a interface de edição de artigo do aplicativo.
Produção da função de pesquisa
Os dados são obtidos naturalmente da API. Como obter os dados na API? Vamos dar uma olhada. Utilizamos principalmente o HTTP para obter dados, depois usamos o método então para retorno de chamada, obtiver http, obter dados e, em seguida, usar o método então para retorno de chamada, obtenha dados SCOPE.DATA.
angular.module ('Service'). Service ('Articleservice', function ($ http) {return {SearchTicle: function (title) {return $ http.get ('api/artigo/pesquisa', {data: {title: title}};}};});Aqui, declaramos o Articleservice e retornamos os dados da API, por isso injetamos a dependência na página para chamá -lo para chamar seu método. Vejamos o código: geralmente chamadas de serviço
Os dados retornados pela API são colocados em uma pasta e o controlador que controla os dados é colocado em uma pasta. Vamos dar uma olhada em como os dados da API são chamados de volta no controlador.
Angular.Module ('Artigo.Controllers').Observe que você precisa injetar o ArticlesService no controlador antes de poder ligar de volta os dados. Como ligar de volta os dados? Veja o seguinte código:
var arcfullSearch = {text: '', resultado: [], selecionado: [], // armazenou os dados selecionados primeiro na matriz inicia pesquisas: function () {var self = this; var text = self.text.Trim () if (! text) retornar; parâmetro passado em self.result = data.data; // obtenha os dados}, function (err) {console.log (err);}); },};OK, nós, de chamada com sucesso, para os dados da função. Em relação à seção de pesquisa, o seguinte é um resumo dos pontos de conhecimento desconhecidos.
Resumo dos pontos de conhecimento
1. Como escrever uma matriz em uma string
2. Em relação ao uso de substituição de substituição pela função
O ECMAScript estipula que a substituição de parâmetros do método substituir () pode ser uma função ou uma string. Nesse caso, cada partida chama a função e a palavra que ela retorna
A string será usada em vez de texto. O primeiro parâmetro retornado pela função de retorno de chamada da função indica o caractere correspondente e o segundo e subsequentemente os dados do pacote correspondente. Vamos dar uma olhada no código.
3. O que diabos é [p.slice (0, índice)] [p.slice (índice+1)]? Você saberá após a depuração.
Vamos ver o que significa o código de síntese.
var arr = sirt.map (function (xx) {retorna item.html.replace (/{{([/w /. ]+?). formatfield (xx [p]);}});4. Em relação ao princípio do Timer Settimeout, vamos dar uma olhada no código primeiro
Por que a saída é -1? Vamos primeiro olhar para o princípio setTimeout ()
setTimeout () executa o código apenas uma vez. Se você deseja ligar várias vezes, use setInterval () ou tenha o código em si chamada setTimeout () novamente.
O setTimeout é usado para atrasar por um período de tempo antes de executar uma determinada operação. Ou seja, após o atraso do tempo especificado após o carregamento, a expressão é executada uma vez e apenas uma vez é executada.
setTimeout (código, tempo de atraso);
O tempo de atraso não é o tempo que você espera. Navegadores diferentes têm tempos de atraso diferentes. Veja o exemplo acima, ou seja, o tempo de atraso não é o 0 acima. Comparação
Em outras palavras, o setTimeout é executado apenas uma vez, mas o tempo não é 0. Não é certo quantos segundos o atraso é. Então não é surpreendente por que parece -1. Vamos analisar o programa.
Quando eu = 3, depois de (3), é reduzido para 2 e executo um settimeout
Quando eu = 2, depois de (2), é reduzido para 1 e executo um settimeout
Quando eu = 1, depois de (0), eu é reduzido para 2, e um Settimeout é executado
Quando i = 0, depois de (0), diminuo para -1. Neste momento, o programa termina, mas o intervalo de tempo para definir o Settimeout é 0 não entenderá a execução e será inserido na fila de execução do thread, esperando por i
Quando se tornar -1, os três settimeouts anteriores serão executados e, neste momento, mudei para -1, então a saída é -1. O console impresso neste momento é impresso pelo console anterior.
O setTimeout é o código assíncrono, o que significa que a gravação do setTimeout (FN, 100) não significa que o FN seja executado imediatamente após 100 milissegundos, e o atraso provavelmente será mais longo. Porque tudo
Eventos assíncronos (incluindo temporizadores ou um XMLHTTPRequest concluídos) serão executados apenas quando houver gratuitamente durante a execução do programa, não quando você estipular quando for executado.
O exposto acima é o resumo do problema de inserir estilo personalizado do AngularJS no Ueditor introduzido pelo editor. Espero que seja útil para todos. Se você tiver alguma dúvida, deixe -me uma mensagem e o editor responderá a todos a tempo. Muito obrigado pelo seu apoio ao site wulin.com!