区块链、APP、公众号、小程序、物联网、智能硬件、网站开发新模式，安全，超速，可控。
| 注册会员
找需求
找资源
找高手
当前位置：首页 > 资源中心 > 百度富文本编辑器的使用
资源详情

百度富文本编辑器的使用


文章来自：博客

http://blog.csdn.net/suwu150

百度富文本编辑器的使用

对于大文章的网上编辑，你的输入编辑框肯定不够用，现在看看功能强大的富文本编辑框吧
1.ueditor 官方地址：http://ueditor.baidu.com/website/index.html
   开发文档地址：    http://ueditor.baidu.com/website/document.html
   下载地址：          http://ueditor.baidu.com/website/download.html （这里可选开发版，或MINI版）
2. 从官网上下载完整源码包，解压到任意目录，解压后的源码目录结构如下所示：
    dialogs：弹出对话框对应的资源和JS文件
    lang：编辑器国际化显示的文件
    themes：样式图片和样式文件   
    php/jsp/.net：涉及到服务器端操作的后台文件，根据你选择的不同后台版本，这里也会不同，这里我们选择jsp
    third-party：第三方插件(包括代码高亮，源码编辑等组件）
    index.html:源码文件，用于演示完整的界面
    ueditor.all.js：开发版代码合并的结果,目录下所有文件的打包文件
    ueditor.all.min.js：ueditor.all.js文件的压缩版，建议在正式部署时采用
    ueditor.config.js：编辑器的配置文件，建议和编辑器实例化页面置于同一目录
    ueditor.parse.js：编辑的内容显示页面引用，会自动加载表格、列表、代码高亮等样式

    ueditor.all.min.js：ueditor.parse.js文件的压缩版，建议在内容展示页正式部署时采用

解压后结构图如下所示：


图1 源文件解压后结构图

3、将解压后的文件内容拷贝到项目下面，其中新建的文件夹可以随意起名，在这个项目中起名为ueditor，如下图所示：


图2 拷贝下载的完整文件夹到整个项目下

4.编辑器的实例化页面，导入编辑器需要的三个入口文件，示例代码如下：

[html] view plain copy
  1. <!-- 配置文件 -->  
  2. < type="text/java" src="./ueditor/ueditor.config.js"></>  
  3. <!-- 编辑器源码文件 -->  
  4. < type="text/java" src="./ueditor/ueditor.all.js"></>  
  5. <link rel="stylesheet" type="text/css" href="./udeditor/themes/default/css" />  

5.然后在编辑器的实例化页面中创建编辑器实例及其DOM容器，示例代码如下：

[plain] view plain copy
  1. <div align="center" style="width:80%">    
  2.             <textarea id="newsEditor" name="content" style="height: 80%">请输入新闻内容... </textarea>     
  3.            <input type="submit" value="发 布">    
  4.            < type="text/java">  
  5.            UE.getEditor('newsEditor');  
  6.            // var content = UE.getPlainTxt();//content就是编辑器的带格式的内容  
  7.            </>    
  8. </div>  
6.在editor_config.js中查找URL变量配置编辑器在你项目中的路径。其中./ueditor为项目中的文件夹
[java] view plain copy
  1. var URL= window.UEDITOR_HOME_URL||"./ueditor/";  

完成以上步骤，就可以实现界面的显示了，如下图所示：

图3 编辑器的显示  

7.文件上传问题： 打开ueditor.config.js，可以看到如下配置：
图片上传也需要进行一些配置，主要就是config.json的配置了

wKioL1ZxJLLBcMoNAAAUyhbbx24790.png

改变后的的配置是这样的:

[java] view plain copy
  1. {      
  2.     "imageActionName": "uploadimage",   
  3.     "imageFieldName": "upfile",   
  4.     "imageMaxSize": 2048000,   
  5.     "imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"],  
  6.     "imageCompressEnable": true,   
  7.     "imageCompressBorder": 1600,   
  8.     "imageInsertAlign": "none",  
  9.     "imageUrlPrefix": "",   
  10.     "imagePathFormat": "./ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}",  
  11.   
  12.     "scrawlActionName": "uploadscrawl",  
  13.     "scrawlFieldName": "upfile",   
  14.     "scrawlPathFormat": "./ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}",   
  15.     "scrawlMaxSize": 2048000,   
  16.     "scrawlUrlPrefix": "",   
  17.     "scrawlInsertAlign": "none",  
  18.   
  19.   
  20.     "snapscreenActionName": "uploadimage",  
  21.     "snapscreenPathFormat": "./ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}",   
  22.     "snapscreenUrlPrefix": "",  
  23.     "snapscreenInsertAlign": "none",  
  24.   
  25.   
  26.     "catcherLocalDomain": ["127.0.0.1", "localhost", "img.baidu.com"],  
  27.     "catcherActionName": "catchimage",  
  28.     "catcherFieldName": "source",  
  29.     "catcherPathFormat": "./ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}",  
  30.     "catcherUrlPrefix":"",   
  31.     "catcherMaxSize": 2048000,  
  32.     "catcherAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"],   
  33.   
  34.   
  35.     "videoActionName": "uploadvideo",  
  36.     "videoFieldName": "upfile",   
  37.     "videoPathFormat": "./ueditor/jsp/upload/video/{yyyy}{mm}{dd}/{time}{rand:6}",   
  38.     "videoUrlPrefix": "",  
  39.     "videoMaxSize": 102400000,  
  40.     "videoAllowFiles": [  
  41.         ".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg",  
  42.         ".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".[[[mid]]]"],   
  43.   
  44.   
  45.     "fileActionName": "uploadfile",   
  46.     "fileFieldName": "upfile",   
  47.     "filePathFormat": "./ueditor/jsp/upload/file/{yyyy}{mm}{dd}/{time}{rand:6}",   
  48.     "fileUrlPrefix": "",  
  49.     "fileMaxSize": 51200000,   
  50.     "fileAllowFiles": [  
  51.         ".png", ".jpg", ".jpeg", ".gif", ".bmp",  
  52.         ".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg",  
  53.         ".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".[[[mid]]]",  
  54.         ".rar", ".zip", ".tar", ".gz", ".7z", ".bz2", ".cab", ".iso",  
  55.         ".doc", ".docx", ".xls", ".xlsx", ".ppt", ".pptx", ".pdf", ".txt", ".md", ".xml"  
  56.     ],   
  57.   
  58.       
  59.     "imageManagerActionName": "listimage",   
  60.     "imageManagerListPath": "/ueditor/jsp/upload/image/",  
  61.     "imageManagerListSize": 20,   
  62.     "imageManagerUrlPrefix":"",  
  63.     "imageManagerInsertAlign": "none",  
  64.     "imageManagerAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"],  
  65.   
  66.      
  67.     "fileManagerActionName": "listfile",   
  68.     "fileManagerListPath": "/ueditor/jsp/upload/file/",  
  69.     "fileManagerUrlPrefix": "",   
  70.     "fileManagerListSize": 20,  
  71.     "fileManagerAllowFiles": [  
  72.         ".png", ".jpg", ".jpeg", ".gif", ".bmp",  
  73.         ".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg",  
  74.         ".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".[[[mid]]]",  
  75.         ".rar", ".zip", ".tar", ".gz", ".7z", ".bz2", ".cab", ".iso",  
  76.         ".doc", ".docx", ".xls", ".xlsx", ".ppt", ".pptx", ".pdf", ".txt", ".md", ".xml"  
  77.     ]   
  78.   
  79. }  
其中imageActionName就是你要上传图片时访问的地址，不管你用的什么框架，地址都得有，只不过配置的地方不一样罢了。
imageUrlPrefix：这个我在项目中没有配置，保持默认，没有值。
imagePathFormat:这个路径是图片的保存和访问的路径，你在后台代码中配置了图片保存路径就在这里配置那个路径就好了，虽然我这有说，但我绝对相信有小伙伴会配置有误导致上传图片的各种问题，一定要仔细点，确保上传的图片就在这个指定的路径下能找到，否则图片上传之后在编译器里面是显示不出来的，而且会报上传错误，但是图片确实已经上传了的现象。
这样图片就可以上传了，并且在编译器中可以回显了。

编辑器中插入图片

至此，Ueditor便在我的环境中配置成功了。

更多详细的文档请参考ueditor官网DOC：http://ueditor.baidu.com/website/document.html

资源介绍
旋风小子 来源者
资源名称：百度富文本编辑器的使用
格式：zip
大小：2.79M
颜色：
风格：
上传时间：2017-10-26
资源价格：
0.00
你可能在找这些资源
【网站关注大师】 【绿色浏览器】 【Boss打赏】 【希望励志】 【上门洗碗】 【超级学习】 【偕行-有一个可以拼伞和送伞的平台】 【想象力-一个充满创意的平台】
版权所有 © 2017 ymznkf.com. 成都玉目科技有限公司 蜀ICP备17032468号-1