关键词：
百度富文本编辑器的使用
(2016年版本)
对于大文章的网上编辑，你的输入编辑框肯定不够用，现在看看功能强大的富文本编辑框吧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.编辑器的实例化页面，导入编辑器需要的三个入口文件，示例代码如下：
<!-- 配置文件 -->
<script type="text/javascript" src="./ueditor/ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="./ueditor/ueditor.all.js"></script>
<link rel="stylesheet" type="text/css" href="./udeditor/themes/default/css" />5.然后在编辑器的实例化页面中创建编辑器实例及其DOM容器，示例代码如下：
<div align="center" style="width:80%">
<textarea id="newsEditor" name="content" style="height: 80%">请输入新闻内容... </textarea>
<input type="submit" value="发 布">
<script type="text/javascript">
UE.getEditor('newsEditor');
// var content = UE.getPlainTxt();//content就是编辑器的带格式的内容
</script>
</div>var URL= window.UEDITOR_HOME_URL||"./ueditor/";完成以上步骤，就可以实现界面的显示了，如下图所示：
图3 编辑器的显示
7.文件上传问题： 打开ueditor.config.js，可以看到如下配置：
图片上传也需要进行一些配置，主要就是config.json的配置了
改变后的的配置是这样的:
"imageActionName": "uploadimage",
"imageFieldName": "upfile",
"imageMaxSize": 2048000,
"imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"],
"imageCompressEnable": true,
"imageCompressBorder": 1600,
"imageInsertAlign": "none",
"imageUrlPrefix": "",
"imagePathFormat": "./ueditor/jsp/upload/image/yyyymmdd/timerand:6",
"scrawlActionName": "uploadscrawl",
"scrawlFieldName": "upfile",
"scrawlPathFormat": "./ueditor/jsp/upload/image/yyyymmdd/timerand:6",
"scrawlMaxSize": 2048000,
"scrawlUrlPrefix": "",
"scrawlInsertAlign": "none",
"snapscreenActionName": "uploadimage",
"snapscreenPathFormat": "./ueditor/jsp/upload/image/yyyymmdd/timerand:6",
"snapscreenUrlPrefix": "",
"snapscreenInsertAlign": "none",
"catcherLocalDomain": ["127.0.0.1", "localhost", "img.baidu.com"],
"catcherActionName": "catchimage",
"catcherFieldName": "source",
"catcherPathFormat": "./ueditor/jsp/upload/image/yyyymmdd/timerand:6",
"catcherUrlPrefix":"",
"catcherMaxSize": 2048000,
"catcherAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"],
"videoActionName": "uploadvideo",
"videoFieldName": "upfile",
"videoPathFormat": "./ueditor/jsp/upload/video/yyyymmdd/timerand:6",
"videoUrlPrefix": "",
"videoMaxSize": 102400000,
"videoAllowFiles": [
".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg",
".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid"],
"fileActionName": "uploadfile",
"fileFieldName": "upfile",
"filePathFormat": "./ueditor/jsp/upload/file/yyyymmdd/timerand:6",
"fileUrlPrefix": "",
"fileMaxSize": 51200000,
"fileAllowFiles": [
".png", ".jpg", ".jpeg", ".gif", ".bmp",
".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg",
".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid",
".rar", ".zip", ".tar", ".gz", ".7z", ".bz2", ".cab", ".iso",
".doc", ".docx", ".xls", ".xlsx", ".ppt", ".pptx", ".pdf", ".txt", ".md", ".xml"
],
"imageManagerActionName": "listimage",
"imageManagerListPath": "/ueditor/jsp/upload/image/",
"imageManagerListSize": 20,
"imageManagerUrlPrefix":"",
"imageManagerInsertAlign": "none",
"imageManagerAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"],
"fileManagerActionName": "listfile",
"fileManagerListPath": "/ueditor/jsp/upload/file/",
"fileManagerUrlPrefix": "",
"fileManagerListSize": 20,
"fileManagerAllowFiles": [
".png", ".jpg", ".jpeg", ".gif", ".bmp",
".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg",
".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid",
".rar", ".zip", ".tar", ".gz", ".7z", ".bz2", ".cab", ".iso",
".doc", ".docx", ".xls", ".xlsx", ".ppt", ".pptx", ".pdf", ".txt", ".md", ".xml"
]
imageUrlPrefix：这个我在项目中没有配置，保持默认，没有值。
imagePathFormat:这个路径是图片的保存和访问的路径，你在后台代码中配置了图片保存路径就在这里配置那个路径就好了，虽然我这有说，但我绝对相信有小伙伴会配置有误导致上传图片的各种问题，一定要仔细点，确保上传的图片就在这个指定的路径下能找到，否则图片上传之后在编译器里面是显示不出来的，而且会报上传错误，但是图片确实已经上传了的现象。
这样图片就可以上传了，并且在编译器中可以回显了。
编辑器中插入图片
至此，Ueditor便在我的环境中配置成功了。更多详细的文档请参考ueditor官网DOC：http://ueditor.baidu.com/website/document.html
以下是我的Jsp代码：
<%@page contentType="text/html" import="java.util.*,java.sql.*" pageEncoding="UTF-8" language="java"%>
<%@page import="com.lut.beans.NewsRealese" %>
<%@page import="dao.NewsRealeseDao" %>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>添加新闻- 新闻发布系统--最前沿的时尚信息、最有看点的社会聚焦、最富得浪漫的殿tang</title>
<!-- 配置文件 -->
<script type="text/javascript" src="./ueditor/ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="./ueditor/ueditor.all.js"></script>
<link rel="stylesheet" type="text/css" href="./udeditor/themes/default/css" />
<link type="text/css" rel="stylesheet" href="newsRealese.css"/>
</head>
<body id="body">
<form action="InsertOneNews" method="post">
<table border="0" id="table">
<tr>
<td width="5%">left</td>
<td width="90%">
<table border="1" id="table">
<tr >
<td >新闻编号</td> <td><input type="text" name="newsid"></td>
<td>所属新闻栏目编号</td> <td><input type="text" name="classid"></td>
</tr>
<tr>
<td>所属新闻分类编号</td> <td><input type="text" name="kindid"></td>
<td>原创或转载</td> <td><input type="text" name="myother"></td>
</tr>
<tr>
<td>新闻标题</td> <td><input type="text" name="headtitle"></td>
<td>相关文章</td> <td><input type="text" name="connectrealtive"></td>
</tr>
<tr>
<td>作者</td> <td><input type="text" name="author"></td>
<td>编辑</td> <td><input type="text" name="editor"></td>
</tr>
<tr>
<td>出处</td> <td><input type="text" name="newsfrom"></td>
<td>是否置顶</td> <td><input type="text" name="top"></td>
</tr>
<tr>
<td>新闻发布时间</td> <td><input type="text" name="newstime"></td>
<td>新闻点击次数</td> <td><input type="text" name="hits"></td>
</tr>
<tr>
<td>新闻状态</td> <td><input type="text" name="state"></td>
<td>新闻标记</td> <td><input type="text" name="tag"></td>
</tr>
<tr>
</table>
</td>
<td width="5%">right</td>
</tr>
<tr>
<td> </td>
<td>
<div align="center" style="width:80%">
<textarea id="newsEditor" name="content" style="height: 80%">请输入新闻内容... </textarea>
<br/>
<input type="submit" value="发 布">
<script type="text/javascript">
UE.getEditor('newsEditor');
// var content = UE.getPlainTxt();//content就是编辑器的带格式的内容
</script>
</div>
</td>
<td> </td>
</tr>
</table>
</form>
</body>
</html>以上就是对百度编辑器的引用配置。
参考链接地址
vue中配置:http://blog.csdn.net/fungleo/article/details/77867583
node中配置：http://blog.csdn.net/a1104258464/article/details/52231737
django之百度ueditor富文本编辑器后台集成(代码片段)
Python3+Django2.0百度Ueditor富文本编辑器的集成百度富文本编辑器官网地址：http://fex.baidu.com/ueditor/ 疑问：为什么要二次集成？答案：因为百度富文本编辑器Ueditor没有对python的支持 步骤1： 在官网下载Ueditor的任意版本代... 查看详情
类百度富文本编辑器文件上传。(代码片段)
在项目安开发中，有一个需求是用户需上传特定的text文件，根据此文件判断设备的状态。以上是需求，此时需要在页面上用到文件上传的功能，原始的文件上传样式不好看，自己此段时间一直都在用layui前端框架写页面，本想用... 查看详情
百度富文本编辑器ueditor添加到pom(代码片段)
.../lib/ueditor-1.1.2.jar</systemPath></dependency>由于富文本编辑器的地址相对性，我们发布项目的时候不能将ueditor的jar包放在私服中，会提示找不到该路径。所以，将该jar包放在项目中。 查看详情
在vue项目中引入tinymce富文本编辑器(代码片段)
项目中原本使用的富文本编辑器是wangEditor，这是一个很轻量、简洁编辑器但是公司的业务升级，想要一个功能更全面的编辑器，我找了好久，目前常见的编辑器有这些：UEditor：百度前端的开源项目，功能强大，基于jQuery，但已... 查看详情
富文本编辑器tinymce的使用(reactvue)(代码片段)
富文本编辑器TinyMCE的使用(ReactVue)一,需求与介绍 1.1,需求 编辑新闻等富有个性化的文本 1.2,介绍TinyMCE是一款易用、且功能强大的所见即所得的富文本编辑器。TinyMCE的优势：开源可商用，基于LGPL2.1插件丰富，... 查看详情
在线文本的编辑框——kindeditor富文本编辑的使用(代码片段)
1.富文本编辑器介绍 富文本编辑器，RichTextEditor，简称RTE，它提供类似于MicrosoftWord的编辑功能。常用的富文本编辑器： KindEditor http://kindeditor.net/ UEditor http://ueditor.baidu.com/website/ CKEdirot http://ckedito... 查看详情
原关于百度富文本编辑器的使用心得
...的数据库中添加新字段，修改后台代码用创建更多ueditor编辑器的新实例（一个字段对应一个实例）。编辑时从数据库中取出数据到ueditor编辑器中这里要说的就是我在从数据库中取出内容到编辑器中踩过的坑 1.实例名.getContent... 查看详情
vue项目中使用tinymce富文本的踩坑经历(代码片段)
...用到富文本这个东西。现在在写vue项目中就需要到富文本编辑器，所以给大家推荐一款富文本编辑器（TinyMCE）首先，下载编辑器依赖包npminstalltinymce--saveoryarnaddtinymce 在需要用到编辑器的地方引入importtinymcefrom‘tinymce/tinymce‘... 查看详情
使用百度富文本编辑器
插件下载地址：http://ueditor.baidu.com/website/download.html具体引用：把下载的文件完全的额引入到你的项目中，然后编辑页面内容：<!--加载编辑器的容器--><scriptid="container"style="height:700px"type="text/plain"> &nbs 查看详情
djangoxadmin集成djangoueditor富文本编辑器(代码片段)
本文档记录自己的学习历程！介绍UeditorHTML编辑器是百度开源的在线HTML编辑器,功能非常强大额外功能解决图片视频等无法上传显示问题Ueditor下载地址https://github.com/wsqy/DjangoUeditor.git解压后将DjangoUeditor文件夹复制到django项目目录... 查看详情
富文本编辑器summernote的基本使用(代码片段)
summernote比较突出的优点就是能保持复制过来的东西的原有样式，并且比较流畅。官方文档地址：https://summernote.org/getting-started我是用到cdn引入 <!--插件引入--><linkhref="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summerno... 查看详情
ueditor富文本编辑器跨域上传图片解决办法(代码片段)
在使用百度富文本编辑器的过程中,如果是有一台单独的图片服务器就需要将上传的图片内容放到图片服务器,也就是比如在a.com的编辑器上传图片,图片要保存到img.com的跨域上传图片功能,而在ueditor官方文档中说不支持单图上传的... 查看详情
vue实现富文本编辑以及组件传值的使用总结(代码片段)
...sp; 实现这个富文本编辑需要以下步骤：第一步：安装编辑器组件 npminstallvue-quill-editor–-save第二步：创建一个Ue.vue的文件，放如下代码<template><div><scriptid="editor"type="text/plain"></scrip 查看详情
新手如何在vue项目中优雅的使用ueditor（百度富文本编辑器）(代码片段)
1、去官网，下载ueditor，解压，重命名，放在vue项目中的static文件夹下。 ps：新手会觉得在官网上有几种不同版本的文件，俺到底要下载哪一个，如果你仅仅是一个前端，那么好，只要是最新版本的UEditor，随便下，如果你比... 查看详情
django开发5_富文本编辑器(代码片段)
1、下载kindeditor，百度一下2、把解压后的文件放在js文件夹下，如3、保存着几个文件，其余在python用不到，删除了4、打开admin.py文件，文章模型进行配置，为文章内容添加一个富文本编辑框5、以上的3个js文件路径为刚复制进来... 查看详情
kindeditor富文本框使用方法(代码片段)
这周我一共使用了两个文本框编辑器！我的上一篇文档讲的是wangeditor这个编辑器，现在就来讲讲kindeditor这个编辑器！首先还是去它的官网去下载脚本！http://kindeditor.net/demo.php所做的操作和那个wangeditor编辑器差不多都是需要在你... 查看详情
百度ueditor富文本上传图片(代码片段)
项目中使用UEditor发现设置图片自定义保存路径会出现《请求后台配置项http错误，上传功能将不能正常使用！错误》/*上传图片配置项*/"imageActionName":"uploadimage",/*执行上传图片的action名称*/"imageFieldName":"inputForm",/*提交的图片表单... 查看详情
umeditor百度富文本编辑器的使用
批量上传的图片在线管理没法查看图片是因为jar包本身的Bug,这里暂时做了个替换展示。就是找到Img.js 然后搜索img.set替换下就好了 &nbs 查看详情