jquery anpassbarer Online-UEditor editor

jquery anpassbarer Online-UEditor editor_jquery

WBOY

Freigeben： 2016-05-16 15:31:49

Original

1557 Leute haben es durchsucht

UMeditor, eine Miniversion des WYSIWYG-Rich-Text-Webeditors UEditor, der von der Web-Frontend-Forschungs- und Entwicklungsabteilung von Baidu entwickelt wurde, ist leichtgewichtig, anpassbar, konzentriert sich auf die Benutzererfahrung und ermöglicht die kostenlose Nutzung und Änderung von Code, geeignet für Front -End schnelles und einfaches Antwortfeld oder Back-End-Inhaltseditor.

Verwendung:

Da dieses Plug-in vom „FEX Front-end R&D Team“ entwickelt wurde, verfügt es über ein starkes und detailliertes offizielles chinesisches Dokument. Der Zweck dieses Artikels besteht lediglich darin, Freunde wissen zu lassen, dass es ein so gutes Plug-in gibt. in, daher sind das Dokumentationshandbuch, Downloads und Beispiele alle offiziell verlinkt.
Laden Sie die benötigte Sprachversion herunter, entpacken Sie sie und erstellen Sie eine HTML-Datei mit dem Namen „demo“ im entpackten Verzeichnis. Der Code lautet wie folgt:

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

Nach dem Login kopieren

OK, nachdem Sie die oben genannten Arbeiten abgeschlossen haben, öffnen Sie demo.html mit einem Browser. Wenn Sie den folgenden Bildschirm sehen, herzlichen Glückwunsch, die erste Bereitstellung war erfolgreich!

Wie benutzt man? Eine weitere detaillierte Verwendung:
Erstellen Sie zunächst eine demo.html-Datei, in der Sie einen Editor hinzufügen müssen. Verwenden Sie den Stil, um die Breite und Höhe des Editors festzulegen.

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

Nach dem Login kopieren

Laden Sie dann die UMeditor-bezogenen JS- und CSS-Dateien. Relevante Dateien können von dieser Website heruntergeladen werden oder gehen Sie direkt zur offiziellen Website von UMeditor, um die neueste Version herunterzuladen.

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

Nach dem Login kopieren

Als nächstes rufen wir den Editor auf:

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

Nach dem Login kopieren

Jetzt können wir den Browser öffnen, um eine Vorschau des Editoreffekts anzuzeigen.
Anpassungsoptionen
UMeditor bietet eine Fülle von Optionseinstellungen, die Benutzer entsprechend ihren eigenen Projektanforderungen anpassen können.
Sie können den folgenden Code verwenden, um den Inhalt im Editor abzurufen. Sie können auch Nur-Text-Inhalte abrufen.

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

Nach dem Login kopieren

Um festzustellen, ob der Editor über Inhalte verfügt, können Sie den folgenden Code verwenden:

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

Nach dem Login kopieren

Wenn Sie den Editor in ein Formular einfügen und den Aktionspfad festlegen, können Sie das Formular abschicken, um den Inhalt im Editor zu senden. Zum Beispiel:

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

Nach dem Login kopieren

Wir können die in der Symbolleiste zulässigen Werkzeugsymbole festlegen. Im Folgenden finden Sie beispielsweise einfache Anpassungen mehrerer häufig verwendeter Werkzeugsymbole:

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

Nach dem Login kopieren

UMeditor bietet viele Tools, die je nach Bedarf angepasst werden können, wie z. B. Tabellenbearbeitung, Listenlayout, Multimedia-Einfügung, Bild-Upload, Kartenaufruf usw. UMeditor bietet mehrere Sprachversionen des Servers, die hauptsächlich zur Verarbeitung hochgeladener Bilder verwendet werden. Benutzer können Upload-Pfade, Upload-Dateitypbeschränkungen, Größenbeschränkungen und mehr festlegen. Einfach einrichten und bewerben.

Nutzungseffekt:

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er kann jedem helfen, den UMeditor-Editor besser zu nutzen.