简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Maison > interface Web > tutoriel HTML > le corps du texte

Utilisez HTML+CSS pour créer un éditeur de démarques d'aperçu en temps réel

php中世界最好的语言
Libérer： 2018-03-08 09:27:50
original
6114 Les gens l'ont consulté

Cette fois, je vais vous proposer un éditeur de démarques avec aperçu en temps réel utilisant HTML+CSS Quelles sont les précautions à prendre pour utiliser HTML+CSS pour créer un éditeur de démarques avec aperçu en temps réel Voici un cas pratique, prenons. un regard.

La première étape pour construire la mise en page :

1. Concevoir la mise en page (ce qui suit est la mise en page globale)

Utilisez HTML+CSS pour créer un éditeur de démarques daperçu en temps réel


2. Créez une nouvelle page index.html sous le projet et écrivez le code suivant : 

<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title>markdown编辑器</title>
<style type="text/css">
* {margin: 0;padding: 0;outline: none;border-radius: 0;
}
html,body {width: 100%;height: 100%;font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;background-color: #ebebeb;
}#toolbar {height: 50px;background-color: #444;width: 100%;color: #fff;line-height: 50px;
}#container {overflow: auto;position: absolute;bottom: 0;left: 0;right: 0;top: 50px;
}#editor-column,#preview-column {width: 49.5%;height: 100%;overflow: auto;position: relative;background-color: #fff;
}.pull-left {float: left;
}
.pull-right {float: right;
}</style>
</head>
<body>
<div id="toolbar"></div>
<div id="container">
<div id="editor-column" class="pull-left">
<div id="panel-editor">
</div>
</div>
<div id="preview-column" class="pull-right">
<div id="panel-preview">
</div>
</div>
</div>
</body></html>
Copier après la connexion

La deuxième étape consiste à introduire des ressources pour obtenir des résultats préliminaires :

1. Créez un dossier js sous le projet

2. Extrayez Mark.js sous Mark/lib du package compressé téléchargé vers le dossier js

3. à partir du package compressé téléchargé pour Renommer le dossier js en ace

4 Importez le fichier js

(Remarque : markdown.css est un fichier de style markdown, vous pouvez l'écrire vous-même ou le télécharger. depuis Internet, tel que : github-markdown-css) 

<!DOCTYPE html><html> 
<head>
<meta charset=&#39;UTF-8&#39;>
<title>markdown编辑器</title>
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/marked.js"></script> 
<script src="js/ace/ace.js"></script>
                <link href="markdown.css" rel="stylesheet" />
                <!--略-->
Copier après la connexion

5 Plug-in d'initialisation

(Ajoutez la zone d'édition et affichez d'abord l'indicatif régional)

<!--略-->#mdeditor#preview,#panel-editor,#panel-preview{
height: 100%;
width: 100%;
}</style>
</head>
<body>
<div id=&#39;toolbar&#39;></div>
<div id=&#39;container&#39;><div id=&#39;editor-column&#39; class=&#39;pull-left&#39;>
<div id=&#39;panel-editor&#39;>
                                        <!--编辑区-->
<div class="editor-content" id="mdeditor" ></div>
</div> 
</div>
<div id=&#39;preview-column&#39; class=&#39;pull-right&#39;>
<div id=&#39;panel-preview&#39;>
                                       <!--显示区-->
<div id="preview" class="markdown-body"></div>
</div>
</div> 
 <!--略-->
Copier après la connexion

(Ajoutez d'abord le code d'initialisation)

<!--略--> 
var acen_edit = ace.edit(&#39;mdeditor&#39;); 
acen_edit.setTheme(&#39;ace/theme/chrome&#39;);
acen_edit.getSession().setMode(&#39;ace/mode/markdown&#39;);
acen_edit.renderer.setShowPrintMargin(false);
$("#mdeditor").keyup(function() {
$("#preview").html(marked(acen_edit.getValue()));
});
Copier après la connexion


La troisième étape consiste à ajouter un outil à la barre d'outils :

1. Écrivez une méthode publique

(En fait, cliquer sur un outil consiste principalement à l'insérer automatiquement dans l'éditeur Symboles initialement tapés à la main)

function insertText(val){
acen_edit.insert(val);//光标位置插入
}
<div id=&#39;toolbar&#39;>
<button onclick="insertText(&#39;**?**&#39;)">加粗</button>
<button onclick="insertText(&#39;_?_&#39;)">斜体</button>
<button onclick="insertText(&#39;>&#39;)">引用</button>
.....</div>
Copier après la connexion

La quatrième étape consiste à implémenter la fonction de paramétrage de l'éditeur avec l'API ace.js :

<div id=&#39;toolbar&#39;>
   <button onclick="insertText(&#39;**?**&#39;)">加粗</button>
   <button onclick="insertText(&#39;_?_&#39;)">斜体</button>
   <button onclick="insertText(&#39;>&#39;)">引用</button>..... 设置:   <select id="theme" size="1">
       <optgroup label="Bright">
           <option value="ace/theme/chrome">Chrome</option>
           <option value="ace/theme/clouds">Clouds</option>
           <option value="ace/theme/crimson_editor">Crimson Editor</option>
           <option value="ace/theme/dawn">Dawn</option>
           <option value="ace/theme/dreamweaver">Dreamweaver</option>
           <option value="ace/theme/eclipse">Eclipse</option>
           <option value="ace/theme/github">GitHub</option>
           <option value="ace/theme/iplastic">IPlastic</option>
           <option value="ace/theme/solarized_light">Solarized Light</option>
           <option value="ace/theme/textmate">TextMate</option>
           <option value="ace/theme/tomorrow">Tomorrow</option>
           <option value="ace/theme/xcode">XCode</option>
           <option value="ace/theme/kuroir">Kuroir</option>
           <option value="ace/theme/katzenmilch">KatzenMilch</option>
           <option value="ace/theme/sqlserver">SQL Server</option>
       </optgroup>
       <optgroup label="Dark">
           <option value="ace/theme/ambiance">Ambiance</option>
           <option value="ace/theme/chaos">Chaos</option>
           <option value="ace/theme/clouds_midnight">Clouds Midnight</option>
           <option value="ace/theme/cobalt">Cobalt</option>
           <option value="ace/theme/gruvbox">Gruvbox</option>
           <option value="ace/theme/idle_fingers">idle Fingers</option>
           <option value="ace/theme/kr_theme">krTheme</option>
           <option value="ace/theme/merbivore">Merbivore</option>
           <option value="ace/theme/merbivore_soft">Merbivore Soft</option>
           <option value="ace/theme/mono_industrial">Mono Industrial</option>
           <option value="ace/theme/monokai">Monokai</option>
           <option value="ace/theme/pastel_on_dark">Pastel on dark</option>
           <option value="ace/theme/solarized_dark">Solarized Dark</option>
           <option value="ace/theme/terminal">Terminal</option>
           <option value="ace/theme/tomorrow_night">Tomorrow Night</option>
           <option value="ace/theme/tomorrow_night_blue">Tomorrow Night Blue</option>
           <option value="ace/theme/tomorrow_night_bright">Tomorrow Night Bright</option>
           <option value="ace/theme/tomorrow_night_eighties">Tomorrow Night 80s</option>
           <option value="ace/theme/twilight">Twilight</option>
           <option value="ace/theme/vibrant_ink">Vibrant Ink</option>
       </optgroup>
   </select>字体大小   <select id="fontsize" size="1">
       <option value="10px">10px</option>
       <option value="11px">11px</option>
       <option value="12px" selected="selected">12px</option>
       <option value="13px">13px</option>
       <option value="14px">14px</option>
       <option value="16px">16px</option>
       <option value="18px">18px</option>
       <option value="20px">20px</option>
       <option value="24px">24px</option>
   </select>代码折行   <select id="folding" size="1">
       <option value="manual">manual</option>
       <option value="markbegin" selected="selected">mark begin</option>
       <option value="markbeginend">mark begin and end</option>
   </select>自动换行   <select id="soft_wrap" size="1">
       <option value="off">Off</option>
       <option value="40">40 Chars</option>
       <option value="80">80 Chars</option>
       <option value="free">Free</option>
   </select>全选样式   <input type="checkbox" name="select_style" id="select_style" checked="">光标行高光   <input type="checkbox" name="highlight_active" id="highlight_active" checked="">显示行号   <input type="checkbox" id="show_gutter" checked="">打印边距   <input type="checkbox" id="show_print_margin" checked=""></div>
Copier après la connexion
<!---略--->
......
            $("#theme").change(function() {
acen_edit.setTheme($(this).val());
})
$("#fontsize").change(function() {
acen_edit.setFontSize($(this).val());
}) 
$("#folding").change(function() {
session.setFoldStyle($(this).val());
})
$("#select_style").change(function() {
acen_edit.setOption("selectionStyle", this.checked ? "line" : "text");
})
$("#highlight_active").change(function() {
acen_edit.setHighlightActiveLine(this.checked);
})
$("#soft_wrap").change(function() {
acen_edit.setOption("wrap", $(this).val());
})
$("#show_print_margin").change(function() {
acen_edit.renderer.setShowPrintMargin(this.checked);
})
Copier après la connexion

Utilisez HTML+CSS pour créer un éditeur de démarques daperçu en temps réel

Croyez-le ou non Après avoir lu le cas dans cet article, vous maîtrisez la méthode. Pour des informations plus intéressantes, veuillez faire attention aux autres articles connexes sur le site Web PHP chinois !

Lecture connexe :

10 exemples d'application d'expressions régulières js

Cas pratique du système backend Vue.js 2.0

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées：
html+css markdown
source：php.cn
Article précédent：Code de la méthode html2canvas pour enregistrer des images haute définition dans des divs Article suivant：Outil de gestion d'interface WEB
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
function_exists() ne peut pas déterminer la fonction personnalisée Function test () {return true;} if (function_exists ('test')) {echo "le test est une ...
Depuis 2024-04-29 11:01:01
0
2
1771
Comment afficher la version mobile de Google Chrome Bonjour professeur, comment puis-je changer Google Chrome en version mobile ?
Depuis 2024-04-23 00:22:19
0
10
1908
La fenêtre enfant exploite la fenêtre parent, mais la sortie ne répond pas. Les deux premières phrases sont exécutables, mais la dernière ne peut pas être implémentée...
Depuis 2024-04-19 15:37:47
0
1
1626
Il n'y a aucune sortie dans la fenêtre parent document.onclick = function(){ window.opener.document.write('Je suis la sortie de la fenêt...
Depuis 2024-04-18 23:52:34
0
1
1536
Où sont les didacticiels sur la cartographie mentale CSS ? Didacticiel
Depuis 2024-04-16 10:10:18
0
0
1571
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！