recherche

Maison >interface Web >js tutoriel >jquery personnalisable en ligne UEditor editor_jquery

jquery personnalisable en ligne UEditor editor_jquery

WBOY
WBOYoriginal
2016-05-16 15:31:491561parcourir

UMeditor, qui est une mini version de l'éditeur Web de texte riche WYSIWYG UEditor développé par le département R&D web front-end de Baidu, est léger, personnalisable, se concentre sur l'expérience utilisateur et permet une utilisation et une modification gratuites du code, adapté au front -end boîte de réponse rapide et simple ou éditeur de contenu back-end.

Utilisation :

Parce que ce plug-in a été développé par « l'équipe R&D FEX Front-end » de Baidu, il dispose d'un document officiel chinois solide et détaillé. Le but de cet article est simplement de faire savoir à vos amis qu'il existe un si bon plug-in. dans, donc le manuel de documentation, les téléchargements et les exemples sont tous un lien vers le site officiel.
Téléchargez la version linguistique dont vous avez besoin, puis décompressez-la et créez un fichier html nommé démo dans le répertoire décompressé. Le code est le suivant
. 

<!DOCTYPE HTML>
<html>
 
<head>
 <meta charset="UTF-8">
 <title>ueditor demo</title>
</head>
 
<body>
 <!-- 加载编辑器的容器 -->
 <script id="container" name="content" type="text/plain">
 这里写你的初始化内容
 </script>
 <!-- 配置文件 -->
 <script type="text/javascript" src="ueditor.config.js"></script>
 <!-- 编辑器源码文件 -->
 <script type="text/javascript" src="ueditor.all.js"></script>
 <!-- 实例化编辑器 -->
 <script type="text/javascript">
 var ue = UE.getEditor('container');
 </script>
</body> 
</html>

OK, après avoir terminé le travail ci-dessus, ouvrez demo.html avec un navigateur Si vous voyez l'écran suivant, félicitations, le premier déploiement a réussi !

Comment utiliser ? Autre utilisation détaillée :
Créez un fichier demo.html. Tout d'abord, ajoutez le code suivant là où vous devez ajouter un éditeur. Utilisez le style pour définir la largeur et la hauteur de l'éditeur. 

<script type="text/plain" id="myEditor" style="width:98%;height:240px;"> 
 <p>内容区域</p> 
</script>

Ensuite, chargez les fichiers js et css liés à UMeditor. Les fichiers pertinents peuvent être téléchargés à partir de ce site ou accéder directement au site officiel d'UMeditor pour télécharger la dernière version. 

<script src="http://libs.useso.com/js/jquery/2.1.0/jquery.min.js"></script> 
<script type="text/javascript" charset="utf-8" src="umeditor.config.js"></script> 
<script type="text/javascript" charset="utf-8" src="umeditor.min.js"></script> 
<link href="themes/default/css/umeditor.min.css" type="text/css" rel="stylesheet">

Ensuite, nous commençons à appeler l'éditeur : 

<script type="text/javascript"> 
 var um = UM.getEditor('myEditor'); 
</script>

Nous pouvons maintenant ouvrir le navigateur pour prévisualiser l'effet de l'éditeur.
Options de personnalisation
UMeditor fournit une multitude de paramètres d'options que les utilisateurs peuvent personnaliser en fonction des besoins de leur propre projet.
Vous pouvez utiliser le code suivant pour obtenir le contenu dans l'éditeur. Vous pouvez également obtenir du contenu en texte brut. 

UM.getEditor('myEditor').getContent();

Pour déterminer si l'éditeur a du contenu, vous pouvez utiliser le code suivant : 

 var cont = UM.getEditor('myEditor').hasContents(); 
 if(cont==true){ 
 alert('有内容。'); 
 }else{ 
 alert('无内容。'); 
 }

Si vous placez l'éditeur dans un formulaire et définissez le chemin d'action, vous pouvez soumettre le formulaire pour envoyer le contenu dans l'éditeur. Tel que : 

<form action="server.php" method="post"> 
 <script id="container" name="content" type="text/plain" style="width:98%;height:240px;">这里写你的初始化内容</script> 
 <button type="submit" class="btn">提交</button> 
</form>

Nous pouvons définir les icônes d'outils autorisées dans la barre d'outils. Par exemple, voici de simples personnalisations de plusieurs icônes d'outils couramment utilisées : 

var editor = UM.getEditor('container',{ 
 toolbar: 
 ['bold italic underline fullscreen', 'link unlink','| justifyleft justifycenter justifyright justifyjustify |', 'emotion image video | map'] 
 
});

UMeditor fournit de nombreux outils qui peuvent être personnalisés en fonction des besoins, tels que l'édition de tableaux, la mise en page de listes, l'insertion multimédia, le téléchargement d'images, l'appel de cartes, etc. UMeditor propose plusieurs versions linguistiques du serveur, principalement utilisées pour le traitement des images téléchargées. Les utilisateurs peuvent définir des chemins de téléchargement, des limites de type de fichier de téléchargement, des limites de taille, etc. Il suffit de le configurer et de postuler.

Effet d'utilisation :

Ce qui précède représente l'intégralité du contenu de cet article. J'espère que cela pourra aider tout le monde à mieux utiliser l'éditeur UMeditor.

Déclaration：
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
Article précédent：Un résumé quotidien de l'apprentissage javascript (objet RegExp)_compétences javascriptArticle suivant：Un résumé quotidien de l'apprentissage javascript (objet RegExp)_compétences javascript

Articles Liés

Voir plus