suchen

Heim >Web-Frontend >js-Tutorial >jquery anpassbarer Online-UEditor editor_jquery

jquery anpassbarer Online-UEditor editor_jquery

WBOY
WBOYOriginal
2016-05-16 15:31:491561Durchsuche

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>

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>

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

Als nächstes rufen wir den Editor auf: 

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

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

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

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>

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

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.

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Eine tägliche Zusammenfassung des Javascript-Lernens (RegExp-Objekt)_Javascript-FähigkeitenNächster Artikel：Eine tägliche Zusammenfassung des Javascript-Lernens (RegExp-Objekt)_Javascript-Fähigkeiten

In Verbindung stehende Artikel

Mehr sehen