撸代码

百度富文本编辑器UEditor使用入门

2019-04-25 13:29:16 作者:码工0组

百度富文本编辑器UEditor使用入门(图1)

UEditor是所见即所得的富文本web编辑器,开源基于MIT协议,允许自由使用和修改代码,有PHP、ASP、JSP等版本。它的开发团队是百度FEX,也就是百度Web前端研发部,FE是Front End的缩写,X代表全端、全栈。百度FEX官网中说,“ueditor开发组所在的FEX团队是一个前端团队,我们有一流的前端技术,但后端实力较欠缺”。真是坦率!
1、
部署包解压后的文件目录结构:
php或jsp或asp或net: 涉及到服务器端操作的后台文件,里面文件config.json,配置文件。
ueditor.all.js:ueditor源码文件。
editor_all_min.js:editor_all.js文件的压缩版,建议在正式部署时才采用。
editor_config.js:编辑器的配置文件,建议和编辑器实例化页面置于同一目录,可以创建多个不同版本,在多个地方使用。
ueditor.parse.js:编辑的内容显示页面引用。
2、
把容器放到form表单里面,设置好要提交的路径,提交表单如下。其中,text/plain的意思是将文件设置为纯文本的形式,浏览器在获取到这种文件时并不会对其进行处理。
<!DOCTYPE HTML>
<html><head>
    <meta charset="UTF-8">
    <title>ueditor富文本编辑器demo页面</title>
</head><body>
    <form action="server.php" method="post">
        <!-- 加载编辑器的容器 -->
        <script id="container" name="content" type="text/plain">
           初始化内容
        </script>
    </form>    <!-- 配置文件 -->
    <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>3、
通过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();
});
4、
建议使用“相对于网站根目录的相对路径”进行配置,即类似“/myProject/ueditor/”这样的路径。
UEditor提供了针对不同页面的编辑器可单独配置的根路径,具体来说,在需要实例化编辑器的页面最顶部写上如下代码即可。当然,需要令此处的URL等于对应的配置:window.UEDITOR_HOME_URL = "/xxxx/xxxx/";
var URL = window.UEDITOR_HOME_URL || getUEBasePath();5、
假如编辑器和图片不在一个域名下,需要给返回路径添加域名前缀,可以在php/config.json文件中,设置imageUrlPrefix配置项为 "http://img.domain",这时插入编辑器的图片会是这样:
"http://img.domain/ueditor/php/upload/2019/04/25/123.jpg"