zoukankan      html  css  js  c++  java

  • HTML编辑器UEditor的简单使用

    参考自：http://ueditor.baidu.com/website/document.html

     

    关于HTML编辑器，试过FCKeditor，升级版的CKeditor，还有TinyMCE，最近在尝试使用百度的UEditor。对比一下还是觉得UEditor的配置较简单，上手快并且文档和例子也很齐全。那么这里以UEditor1.2.3.0PHP版本UTF-8版为例梳理一下UEditor的使用流程。

     

    1.首先是UEditor的文档结构

     

    _examples：编辑器各种版本的示例页面

    _src：JS文件

    dialogs：弹出对话框对应的资源和JS文件

    lang：语言包文件

    PHP：文件上传处理，远程图片抓取，图片在线管理，屏幕截图相关文件

    themes：样式图片和样式文件

    third-party：第三方插件

    editor_all.js：_src目录下所有文件的打包文件

    editor_all_min.js：editor_all.js文件的压缩版，可以在正式部署时才采用

    editor_config.js：编辑器的配置文件

     

    2.系统配置

     

    UEditor的配置可以分为系统默认配置和用户自定义配置两种类型。系统默认配置分散在各个对应的核心或者插件文件之中，对用户不可见。当用户注释掉自定义配置时起作用。用户自定义配置包括两种类型，一种位于editor_config.js文件之中，优先级高于系统默认配置；另一种位于实例化编辑器时传入的参数中，优先级最高。默认情况下，UEditor在editor_congfig.js注释掉了所有可以省略的配置项，采用系统默认配置，若取消注释，则以该配置项为准；未注释的配置项要求用户必需按照项目实际填写。

    以下是自己定义的一个简单配置：

     

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

    其中最重要的配置是第28行关于URL参数的配置，关系到图片上传，处理等路径，需要配置为uediotr在网站的相对路径或者绝对路径。如我的项目名称为t，根目录为www，则URL的值设置如下：

     

    [html] view plaincopyprint?
    1. URL = window.UEDITOR_HOME_URL||"/t/UEditor/";  
    URL = window.UEDITOR_HOME_URL||"/t/UEditor/";

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

     

    [html] view plaincopyprint?
    1. <metahttp-equiv="Content-Type"content="text/html; charset=UTF-8"> 
    2. <scripttype="text/javascript"src="UEditor/editor_config.js"></script> 
    3. <scripttype="text/javascript"src="UEditor/editor_all.js"></script> 
    4. <linkrel="stylesheet"href="UEditor/themes/default/ueditor.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容器

     

    [html] view plaincopyprint?
    1. <formaction=""method="post"name="myForm"> 
    2. <!--以下引入UEditor编辑器界面--> 
    3. <scripttype="text/plain"id="editor"name="myContent"></script> 
    4. //此处不设置name，则editor默认名字为"editorValue"，可以在 
    5. //editor_config.js中配置参数textarea，或者在此处设置 
    6. <inputtype="submit"name="submit"value="upload"/> 
    7. </form>  
    <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，可以分别定义之后设置不同的自定义选项再渲染编辑器，

     

    [html] view plaincopyprint?
    1. <scripttype="text/plain"id="myEditor"style="800px"></script> 
    2. <scripttype="text/plain"id="myEditor1"style="800px"><p>这里我可以写一些输入提示</p> 
    3. </script> 
    4. <scripttype="text/javascript"> 
    5. var editor_a = new baidu.editor.ui.Editor(); 
    6. editor_a.render( 'myEditor' ); //此处的参数值为编辑器的id值 
    7. var editor_a1 = new baidu.editor.ui.Editor({ 
    8. //这里可以选择自己需要的工具按钮名称,此处仅选择如下五个 
    9. toolbars:[['FullScreen', 'Source', 'Undo', 'Redo','Bold']] 
    10. //更多其他参数，请参考editor_config.js中的配置项 
    11. }); 
    12. editor_a1.render( 'myEditor1' ); 
    13. </script>  
    <script type="text/plain" id="myEditor" style="800px"></script>
<script type="text/plain" id="myEditor1" style="800px"><p>这里我可以写一些输入提示</p>
</script>
<script type="text/javascript">
var editor_a = new baidu.editor.ui.Editor();
editor_a.render( 'myEditor' ); //此处的参数值为编辑器的id值
var editor_a1 = new baidu.editor.ui.Editor({
//这里可以选择自己需要的工具按钮名称,此处仅选择如下五个
toolbars:[['FullScreen', 'Source', 'Undo', 'Redo','Bold']]
//更多其他参数，请参考editor_config.js中的配置项
});
editor_a1.render( 'myEditor1' );
</script>

    6.前后台数据交互

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

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

     

    [html] view plaincopyprint?
    1. <!DOCTYPE HTML> 
    2. <html> 
    3. <head> 
    4. <metahttp-equiv="Content-Type"content="text/html; charset=UTF-8"> 
    5. <title>UEditor</title> 
    6. <!--以下为引入UEditor资源部分--> 
    7. <scripttype="text/javascript"src="UEditor/editor_config.js"></script> 
    8. <scripttype="text/javascript"src="UEditor/editor_all.js"></script> 
    9. <linkrel="stylesheet"href="UEditor/themes/default/ueditor.css"> 
    10. <!--以上为引入UEditor资源部分--> 
    11. </head> 
    12. <body> 
    13. <formaction="test.php"method="post"name="myForm"> 
    14. <!--以下引入UEditor编辑器界面--> 
    15. <scripttype="text/plain"id="myEditor"name="myContent">这是一个测试还是一个测试</script> 
    16. <inputtype="submit"name="submit"value="upload"/> 
    17. </form> 
    18. <scripttype="text/plain"id="myEditor1"><p>这里我可以写一些输入提示</p></script> 
    19. <scripttype="text/javascript"> 
    20.     var editor_a = new baidu.editor.ui.Editor(); 
    21.     editor_a.render( 'myEditor' ); //此处的参数值为编辑器的id值 
    22.      
    23.     var editor_a1 = new baidu.editor.ui.Editor({ 
    24.     //这里可以选择自己需要的工具按钮名称,此处仅选择如下五个 
    25.     toolbars:[['FullScreen', 'Source', 'Undo', 'Redo','Bold']], 
    26.     //focus时自动清空初始化时的内容 
    27.     autoClearinitialContent:true, 
    28.     //更多其他参数，请参考editor_config.js中的配置项 
    29. }); 
    30.     editor_a1.render( 'myEditor1' ); 
    31. </script> 
    32. </body> 
    33. </html>  
    <!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( 'myEditor' ); //此处的参数值为编辑器的id值
    
    var editor_a1 = new baidu.editor.ui.Editor({
    //这里可以选择自己需要的工具按钮名称,此处仅选择如下五个
    toolbars:[['FullScreen', 'Source', 'Undo', 'Redo','Bold']],
    //focus时自动清空初始化时的内容
    autoClearinitialContent:true,
    //更多其他参数，请参考editor_config.js中的配置项
});
    editor_a1.render( 'myEditor1' );
</script>
</body>
</html>
  • 相关阅读:
    oracle 视图views
    5分钟把任意网站变成桌面软件
    Angular http跨域
    jQuery版本升级踩坑大全
    redis 模糊删除key
    jedisCluster 报错： redis.clients.jedis.exceptions.JedisClusterException: No way to dispatch this command to Redis Cluster because keys have different slots.
    mac电脑复制键失灵
    java8 for ,forEach ,lambda forEach , strean forEach , parller stream forEach, Iterator性能对比
    linux光标操作
    redis hashmap数据结构分析
  • 原文地址：https://www.cnblogs.com/leBeauty/p/3423168.html
Copyright © 2011-2022 走看看