怎么用百度编辑器来编写上传文本

发布网友发布时间：2022-04-25 05:31

共2个回答

热心网友时间：2022-04-21 16:03

UEditor是一个开源免费的编辑器，由百度web前端研发部开发所见即所得富文本web编辑器，具有轻量，可定制，注重用户体验等特点，开源基于BSD协议，允许自由使用和修改代码。
官方下载：
http://ueditor.baidu.com/website/download.html
官网上下载完整源码包，解压到任意目录，解压后的源码目录结构如下所示：
_examples：编辑器完整版的示例页面
dialogs：弹出对话框对应的资源和JS文件
themes：样式图片和样式文件
php/jsp/.net：涉及到服务器端操作的后台文件，根据你选择的不同后台版本，这里也会不同，这里应该是jsp,php,.net
third-party：第三方插件(包括代码高亮，源码编辑等组件）
editor_all.js：_src目录下所有文件的打包文件
editor_all_min.js：editor_all.js文件的压缩版，建议在正式部署时才采用
editor_config.js：编辑器的配置文件，建议和编辑器实例化页面置于同一目录
第一步：在项目的任一文件夹中建立一个用于存放UEditor相关资源和文件的目录，此处在项目根目录下建立，起名为ueditor（自己喜欢）。
第二步：拷贝源码包中的dialogs、themes、third-party、editor_all.js和editor_config.js到ueditor文夹中。其中，除了ueditor目录之外的其余文件均为具体项目文件，此处所列仅供示例。
第三步：为简单起见，此处将以根目录下的index.php页面作为编辑器的实例化页面，用来展示UEditor的完整版效果。在index.php文件中，首先导入编辑器需要的三个入口文件.
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>编辑器完整版实例</title>
<script type="text/javascript" src="ueditor/editor_config.js"></script>
<script type="text/javascript" src="ueditor/editor_all.js"></script>
第四步：然后在index.php文件中创建编辑器实例及其DOM容器。具体代码示例如下
<textarea name="后台取值的key" id="myEditor">这里写你的初始化内容</textarea>
<script type="text/javascript">
var editor = new UE.ui.Editor();
editor.render("myEditor");
//1.2.4以后可以使用一下代码实例化编辑器
//UE.getEditor('myEditor')
</script>
最后一步：在/UETest/ueditor/ editor_config.js中查找URL变量配置编辑器在你项目中的路
一个完整的编辑器实例就已经部署到咱们的项目中了！在浏览器中输入http://localhost/UETest 运行下试试UE强大的功能吧

热心网友时间：2022-04-21 17:21

1.1 下载编辑器

到官网下载 UEditor 最新版：[官网地址]

1.2 创建demo文件

解压下载的包，在解压后的目录创建 demo.html 文件，填入下面的html代码

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>ueditor demo</title>
</head>
<body>
    
    <script id="container" name="content" type="text/plain">
        这里写你的初始化内容
    </script>
    
    <script type="text/javascript" src="ueditor.config.js"></script>
    
    <script type="text/javascript" src="ueditor.all.js"></script>
    
    <script type="text/javascript">
        var ue = UE.getEditor('container');
    </script>
</body>
</html>

1.3 在浏览器打开demo.html

如果看到了下面这样的编辑器，恭喜你，初次部署成功！

1.4 传入自定义的参数

编辑器有很多可自定义的参数项，在实例化的时候可以传入给编辑器：

var ue = UE.getEditor('container', {
autoHeight: false
});

配置项也可以通过 ueditor.config.js 文件修改，具体的配置方法请看前端配置项说明

1.5 设置和读取编辑器的内容

通 getContent 和 setContent 方法可以设置和读取编辑器的内容

var ue = UE.getContent();
//对编辑器的操作最好在编辑器ready之后再做
ue.ready(function() {
    //设置编辑器的内容
    ue.setContent('hello');
    //获取html内容，返回: <p>hello</p>
    var html = ue.getContent();
    //获取纯文本内容，返回: hello
    var txt = ue.getContentTxt();
});

参考：http://fex.baidu.com/ueditor/