Tutoriel sur l'utilisation d'un éditeur HTML facile à utiliser (UEditor)

Concernant les éditeurs HTML, j'ai essayé FCKeditor, la version améliorée de CKeditor, et TinyMCE. Récemment, j'essaie d'utiliser UEditor de Baidu. En comparaison, j'ai quand même l'impression que la configuration de UEditor est relativement simple, la prise en main est rapide et la documentation et les exemples sont complets. Nous prenons donc ici la version UEditor1.2.3.0PHP UTF-8 comme exemple pour trier le processus d'utilisation de UEditor.

1. Le premier est la structure du document de UEditor

_exemples : Exemples de pages de différentes versions de l'éditeur

_src : fichiers JS

boîtes de dialogue : Pop-up boîtes de dialogue ressources correspondantes et fichiers JS

lang : fichier du pack de langue

PHP : traitement du téléchargement de fichiers, capture d'images à distance, gestion des images en ligne, screen Capture d'écran fichiers associés

thèmes : images de style et fichiers de style

tiers : plug-ins tiers

editor_all.js : un fichier packagé de tous les fichiers du répertoire _src

editor_all_min.js : une version compressée du fichier editor_all.js, qui peut être utilisé uniquement lors du déploiement formel

editor_config.js : Fichier de configuration de l'éditeur

2. Configuration du système

La configuration d'UEditor peut être divisée en deux types : la configuration par défaut du système et la configuration définie par l'utilisateur. La configuration par défaut du système est dispersée dans chaque fichier principal ou plug-in correspondant et est invisible pour les utilisateurs. Fonctionne lorsque l'utilisateur commente une configuration personnalisée. Les configurations définies par l'utilisateur incluent deux types, l'un se trouve dans le fichier editor_config.js, avec une priorité plus élevée que la configuration par défaut du système ; l'autre se trouve dans les paramètres transmis lors de l'instanciation de l'éditeur, avec un priorité plus élevée La plus élevée. Par défaut, UEditor commente tous les éléments de configuration qui peuvent être omis dans editor_congfig.js et adopte la configuration par défaut du système. Si le commentaire n'est pas commenté, l'élément de configuration non commenté oblige les utilisateurs à suivre le projet réel ; conditions.

Ce qui suit est une configuration simple définie par vous-même :

<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中的配置项
};

La configuration la plus importante est la 28ème 1 La configuration des paramètres d'URL, liés au téléchargement, au traitement et à d'autres chemins d'image, doit être configurée comme chemin relatif ou chemin absolu de uediotr sur le site Web. Par exemple, si le nom de mon projet est t et que le répertoire racine est www, la valeur de l'URL est définie comme suit :

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视频教程

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!