jquery personnalisable en ligne UEditor editor

jquery personnalisable en ligne UEditor editor_jquery

WBOY

Libérer： 2016-05-16 15:31:49

original

1548 Les gens l'ont consulté

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>

Copier après la connexion

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>

Copier après la connexion

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">

Copier après la connexion

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

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

Copier après la connexion

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();

Copier après la connexion

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('无内容。'); 
 }

Copier après la connexion

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>

Copier après la connexion

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'] 
 
});

Copier après la connexion

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.