PHP商城笔记(编辑器2) —— 编辑器的简单引用

我们先了解一下编辑器的一般学习步骤：

    1、如何引入
        引入ueditor.config.js,ueditor.all.js
        var x = new UE.ui.Editor();
        x.render('某个id');

    2、如何个性化配置
        参考ueditor_config中的配置项，把需要配置的选项和值拿出来
        写一个对象
        把该对象当作参数给 new UE.ui.Editor() 即可

    3、如何与自己的系统整合

开始学习

1、首先，我们要在ueditor官网上下载一个ueditor编辑器，我下载的是下面这个版本
这里写图片描述

2、创建一个html和php文件交互

01.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
    </head>
    <body>
    <form action="01.php" method="post">
    <textarea id="goods_desc">我才是初始值</textarea>
    <br >
    <input type="submit" name="" value="提交">
    <input type="button" name="" value="获取编辑器内容（ajax可用）" onclick="t1()">
    <input type="button" name="" value="获取编辑器纯文本（ajax可用）" onclick="t2()">
    </form>

    <script type="text/javascript" src="./ueditor/ueditor.config.js"></script>
    <script type="text/javascript" src="./ueditor/ueditor.all.js"></script>

    <script type="text/javascript">


    var editor = new UE.ui.Editor({initialFrameWidth:750,initialContent:'欢迎来到布尔商城!',toolbars: [
        ['fullscreen', 'source', '|', 'undo', 'redo', '|',
            'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain']
        ]});
    editor.render('goods_desc');

    function t1() {
        alert(editor.getContent());
    }

    function t2() {
        alert(editor.getPlainTxt());
    }
    </script>

    </body>
</html>

01.php

<?php
print_r($_POST);
?>

关键的引用在于
两个script标签的编辑器引用

    <script type="text/javascript" src="./ueditor/ueditor.config.js"></script>
    <script type="text/javascript" src="./ueditor/ueditor.all.js"></script>

这里写图片描述

html中三个input框的作用
第一个是提交后跳转输出
这里写图片描述
第二个是在本页面可弹出编辑器内容（带标签）

第三个是在本页面弹出编辑器纯文本

以上是关于编辑器的简单学习。

扫描二维码关注公众号，回复： 2771910 查看本文章

PHP商城笔记(编辑器2) —— 编辑器的简单引用

开始学习

猜你喜欢