Vamos dar uma olhada na descrição oficial das funções relevantes deste editor.
1. Ele pode ligar automaticamente as teclas de atalho padrão para operações comuns nas plataformas Mac e Wndows.
2. Você pode inserir imagens arrastando e soltando; Suporte ao upload da imagem (você também pode obter fotos no seu dispositivo móvel)
3. Entrada de reconhecimento de voz (apenas o navegador Chrome)
4. Permitir barras de ferramentas personalizadas; Nenhuma tags adicional é gerada; Apoie o site para fazer uso total dos excelentes recursos de bibliotecas de ferramentas, como Bootstrap, Font Awesome, etc.
5. Tudo depende de você se não houver estilo obrigatório
6. Confie nos recursos padrão do navegador, sem código não padrão; As funções da barra de ferramentas e do teclado podem ser personalizadas e podem executar quaisquer comandos suportados pelo navegador.
7. Este editor não criará um quadro separado, área de texto de backup, etc., tente simplificá -lo e executá -lo em uma div.
8. (Opcional) limpe o espaço da cauda; Clear Div e Span Clear Empty
9. Deve ser executado nos navegadores modernos (testados no Chrome 26, Firefox 19, Safari 6, e os usuários relatam que podem trabalhar no IE10)
10. Suporte ao navegador móvel (testado no iOS 6 iPad/iPhone e Android 4.1.1 Chrome)
Nota: Wysiwyg e Wysihtml5 são dois editores diferentes. O wysiwyg é uma versão aprimorada do Wysihtml5, que é relativamente semelhante. Então você pode usá -lo de acordo com suas necessidades.
Site oficial da Wysiwyg: http://mindmup.github.io/bootstrap-wysiwyg/
Site chinês Wysiwyg: http://www.bootcss.com/p/bootstrap-wysiwyg//
Wysihtml5 Site oficial: http://jhollingworth.github.io/bootstrap-wysihtml5/
Como o wysiwyg é uma versão aprimorada do Wysihtml5, deixe -me falar sobre o uso do wysiwyg, o wysihtml5 é semelhante.
Etapas a serem usadas
1. Apresente os seguintes arquivos JS e CSS. Aqui, gostaria de afirmar que o site oficial é apenas um uso geral e os seguintes documentos devem ser introduzidos antes que possam entrar em vigor; portanto, este site se concentra no aplicativo real e esses detalhes não podem ser ignorados.
<link href = "http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.no-iCons.min.css" rel = "Stylesheet"> <link href = "http://netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome.css" rel = "Sheet"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script><script src="https://mindmup.s3.amazonaws.com/lib/jquery.hotkeys.js"></script><script src = "http://netdna.bootstrappcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"> </script> <script/stsets/js/gesterpets/script/"http://twitter.github.com/bootsstrap/Stsets/JSTP:/twitter.github.com/bootsstrap/stics/JSS/GHETROOGLT> href = "index.css" rel = "Stylesheet"> <script src = "bootstrap-wysiwyg.js"> </script>
2. Adicione um pedaço do código JS. Devido a muito código, ele não será listado aqui. Este site resolveu o código -fonte. Consulte o código -fonte da Demo.html
.........
3. Adicione o seguinte formato HTML Código à etiqueta corporal. Deve -se notar aqui que o editor não está encapsulado, mas grava diretamente o código na página HTML. Todo o editor pode ser dividido em duas partes, a barra de ferramentas superior e a caixa de edição de texto.
1) Barra de ferramentas superior: é um div.btn-toolbar contendo vários grupos div.btn. Cada botão de ferramenta é um grupo div.btn. Em cada grupo div.btn, podemos configurar o texto imediato para exibir chinês.
<div data data-role = "editor-toolbar" data-target = "#editor"> <div> </div> .......... <div> </div> </div>
Há também uma ferramenta de entrada de voz HTML5 aqui. O código é o seguinte:
<input type = "text" data-edit = "insertText" id = "vozbtn" x-webkit-declara = "">>
2) Caixa de texto de conteúdo: Div#Editor
<div id = "editor"> conteúdo </div>
O exposto acima é uma breve introdução ao bootstrap-wysiwyg, vamos ver o efeito
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.
Se você ainda deseja estudar em profundidade, pode clicar aqui para aprender e anexar um tópico maravilhoso a você: Bootstrap Learning Tutorial
De fato, o WYSIWG só precisa definir alguns Divs para construir um editor visual, enquanto a parte de edição precisa apenas de uma div com um editor de identificação para concluí -lo. Espero que esta breve introdução ao editor visual do Bootstrap-Wysiwyg realmente ajude a todos.