Tutorial zur Verwendung eines benutzerfreundlichen HTML-Editors (UEditor)

Was HTML-Editoren betrifft, habe ich FCKeditor, die aktualisierte Version von CKeditor, und TinyMCE ausprobiert. Kürzlich versuche ich, Baidus UEditor zu verwenden. Im Vergleich dazu habe ich immer noch den Eindruck, dass die Konfiguration von UEditor relativ einfach ist, der Einstieg schnell erfolgt und die Dokumentation und Beispiele vollständig sind. Hier finden Sie eine Zusammenfassung des Verwendungsprozesses von UEditor am Beispiel der UTF-8-Version der PHP-Version UEditor1.2.3.0.

1. Zuerst ist die Dokumentstruktur von UEditor

_examples: Beispielseiten verschiedener Versionen des Editors

_src: JS-Dateien

Dialoge: Pop-up Dialogfelder für entsprechende Ressourcen und JS-Dateien

lang: Sprachpaketdatei

PHP: Datei-Upload-Verarbeitung, Remote-Bilderfassung, Bild-Online-Verwaltung, Bildschirm Screenshot-bezogene Dateien

Themen: Stilbilder und Stildateien

Drittanbieter: Plug-Ins von Drittanbietern

editor_all.js: eine gepackte Datei aller Dateien im _src-Verzeichnis

editor_all_min.js: eine komprimierte Version der Datei editor_all.js, die sein kann Wird nur während der formellen Bereitstellung verwendet

editor_config.js: Editor-Konfigurationsdatei

2. Systemkonfiguration

Die Konfiguration von UEditor kann in zwei Typen unterteilt werden: Systemstandardkonfiguration und benutzerdefinierte Konfiguration. Die Standardkonfiguration des Systems ist in jeder entsprechenden Kern- oder Plug-in-Datei verstreut und für Benutzer unsichtbar. Funktioniert, wenn der Benutzer die benutzerdefinierte Konfiguration auskommentiert. Benutzerdefinierte Konfigurationen umfassen zwei Typen: Der eine befindet sich in der Datei editor_config.js und hat eine höhere Priorität als die Standardkonfiguration des Systems. Der andere befindet sich in den Parametern, die beim Instanziieren des Editors übergeben werden höhere Priorität Höchste. Standardmäßig kommentiert UEditor alle Konfigurationselemente aus, die in editor_congfig.js weggelassen werden können, und übernimmt die Standardkonfiguration des Systems. Wenn der Kommentar nicht auskommentiert ist, müssen Benutzer dem tatsächlichen Projekt folgen Bedingungen ausfüllen.

Das Folgende ist eine einfache Konfiguration, die Sie selbst definiert haben:

<script type="text/javascript">
// 自定义的编辑器配置项,此处定义的配置项将覆盖editor_config.js中的同名配置
var editorOption = {
//这里可以选择自己需要的工具按钮名称,此处仅选择如下四个
toolbars:[[&#39;FullScreen&#39;, &#39;Source&#39;, &#39;Undo&#39;, &#39;Redo&#39;]]
//更多其他参数，请参考editor_config.js中的配置项
};

Die wichtigste Konfiguration ist die 28 1. Die Konfiguration der URL-Parameter, die sich auf das Hochladen, Verarbeiten und andere Pfade von Bildern beziehen, muss als relativer Pfad oder absoluter Pfad von uediotr auf der Website konfiguriert werden. Wenn mein Projektname beispielsweise t lautet und das Stammverzeichnis www ist, wird der URL-Wert wie folgt festgelegt:

URL = window.UEDITOR_HOME_URL||"/t/UEditor/";

3.引入配置文件，JS文件和主题CSS文件

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="UEditor/editor_config.js"></script>
<script type="text/javascript" src="UEditor/editor_all.js"></script>
<link rel="stylesheet" href="UEditor/themes/default/ueditor.css">

4.创建编辑器实例及其DOM容器

<form action="" method="post" name="myForm">
<!--以下引入UEditor编辑器界面-->
<script type="text/plain" id="editor" name="myContent"></script> //此处不设置name，则editor默认名字为"editorValue"，可以在
 //editor_config.js中配置参数textarea，或者在此处设置
<input type="submit" name="submit" value="upload"/>
</form>

5.设置选项并且渲染编辑器

如果需要有不同设置的ueditor，可以分别定义之后设置不同的自定义选项再渲染编辑器，

<script type="text/plain" id="myEditor" style="width:800px">
</script>
<script type="text/plain" id="myEditor1" style="width:800px">
<p>这里我可以写一些输入提示</p>
</script>
<script type="text/javascript">
var editor_a = new baidu.editor.ui.Editor();
editor_a.render( &#39;myEditor&#39; ); //此处的参数值为编辑器的id值

var editor_a1 = new baidu.editor.ui.Editor({
//这里可以选择自己需要的工具按钮名称,此处仅选择如下五个
toolbars:[[&#39;FullScreen&#39;, &#39;Source&#39;, &#39;Undo&#39;, &#39;Redo&#39;,&#39;Bold&#39;]],
//focus时自动清空初始化时的内容
//更多其他参数，请参考editor_config.js中的配置项
});
editor_a1.render( &#39;myEditor1&#39; );
</script>

6.前后台数据交互

对于PHP可以直接用$_POST['ueditorName']获取编辑器的值，其中ueditorName的值为初始化编辑器时ueditor的name值。

以下为完整的渲染2个ueditor的代码

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>UEditor</title>
<!--以下为引入UEditor资源部分-->
<script type="text/javascript" src="UEditor/editor_config.js"></script>
<script type="text/javascript" src="UEditor/editor_all.js"></script>
<link rel="stylesheet" href="UEditor/themes/default/ueditor.css">
<!--以上为引入UEditor资源部分-->
</head>
<body>
<form action="test.php" method="post" name="myForm">
<!--以下引入UEditor编辑器界面-->
<script type="text/plain" id="myEditor" name="myContent">这是一个测试还是一个测试</script>
<input type="submit" name="submit" value="upload"/>
</form>
<script type="text/plain" id="myEditor1"><p>这里我可以写一些输入提示</p></script>
<script type="text/javascript">
    var editor_a = new baidu.editor.ui.Editor();
    editor_a.render( &#39;myEditor&#39; ); //此处的参数值为编辑器的id值
    
    var editor_a1 = new baidu.editor.ui.Editor({
    //这里可以选择自己需要的工具按钮名称,此处仅选择如下五个
    toolbars:[[&#39;FullScreen&#39;, &#39;Source&#39;, &#39;Undo&#39;, &#39;Redo&#39;,&#39;Bold&#39;]],
    //focus时自动清空初始化时的内容
    autoClearinitialContent:true,
    //更多其他参数，请参考editor_config.js中的配置项
});
    editor_a1.render( &#39;myEditor1&#39; );
</script>
</body>
</html

【相关推荐】

1. 免费html在线视频教程

2. html开发手册

3. php.cn原创html5视频教程

Das obige ist der detaillierte Inhalt vonTutorial zur Verwendung eines benutzerfreundlichen HTML-Editors (UEditor). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!