百度ueditor富文本编辑器使用 基本说明以及注意事项

百度ueditor富文本编辑器使用初体验
最近公司门户站新上了一个专题栏目，其中涉及到专题介绍就需要使用富文本编辑器进行编辑提交。

之前公司一直用的是kindeditor，这个编辑器配置简单功能也比较全，最重要的是换了一些编辑器之后，这个编辑器是最稳定的一个。

当然这是几年前的想法了，最近同事使用编辑器编辑专题介绍的时候，各种莫名其妙的问题，以前用的少，吐槽的也少，现在工作量大了，用的多了，吐槽就多了。

好吧，那就再找个更好的吧，百度一搜“富文本编辑器”，第一个就是ueditor，居然是百度的！想来大公司做的应该不错吧，就点进去看了看，然后下载、配置、测试。

最终发现确实不错啊！首先ueditor解决了kindeditor里面表格不可以直接拖动宽度的问题，当然一些不好用的地方还是存在的，毕竟完美的富文本编辑器是不存在的

我下载的编辑器版本是最新的1_4_3开发版

下载地址和目录结构：

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. 下载完整源码包，解压后的源码目录结构如下所示：

   _examples：编辑器完整版的示例页面

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

   themes：样式图片和样式文件 php/jsp/.net：涉及到服务器端操作的后台文件，根据你选择的不同后台版本，这里也会不同，这里我们选择php

   third-party：第三方插件(包括代码高亮，源码编辑等组件）

   ueditor.all.js：_src目录下所有文件的打包文件（用于发布版本）

   ueditor.all.min.js：editor.all.js文件的压缩版，建议在正式部署时才采用

   ueditor.config.js：编辑器的配置文件，建议和编辑器实例化页面置于同一目录

下面记录一下这几天使用过程中碰到的问题和解决办法：

1 编辑器会把回车当成p标签，敲一个回车就一个p标签，p标签多了之后，就容易出各种莫名其妙的问题，不能局部居中等，相信用过富文本编辑器的都深有体会。当然对于会html的码农们来说这不是问题，问题是我的用户群体是一群不会代码的。。。好吧，这个要解决。方法：在ueditor.all.js或ueditor.all.min.js(根据调用文件不同改对应文件) 搜索 enterTag: 把"p" 改成"br"就可以了

2 table在全屏下编辑好了缩放的时候，会自动把table的宽度修改掉。解决方法：在ueditor.all.js或ueditor.all.min.js(根据调用文件不同改对应文件) 搜索 me.addListener(“fullscreenchanged” 把这个监听事件方法注释掉就可以了

3 设置默认字体大小、字体 在ueditor.config.js配置文件里面添加一行初始化的样式 ,initialStyle:‘p{line-height:1em; font-size: 12px;font-family:宋体,黑体,微软雅黑,Microsoft YaHei;’ 这里面可以定义行高、字体、字体大小等，其他默认值可以自己试

4 自定义模板 在ueditor/dialogs/template/目录下有个config.js文件，里面每个{}里面的内容就是一个模板样式，如果自己要新增模板，按这个格式新增即可。先在编辑器调好样式，然后切换到html模式，复制代码，去掉空格，放到html属性值里面即可

其它的再补充

---

<form action="<?php echo $_SERVER['PHP_SELF']; ?>"  name="add" method="post">
        
        
<div>
    <h1>完整demo</h1>
    <script id="editor" name="444" type="text/plain" style="width:1024px;height:500px;"></script>
</div>

<button name="222" type="submit">111</button>
</form>

复制代码
其中 使用script的name属性可以调整提交的name

完整demo

111

复制代码 其中 使用script的name属性可以调整提交的name

使用

<?php print_r($_POST);
                
                
                
                ?>

复制代码

显示为：

Array ( [222] => [444] =>第三个的说法
)