thinkphp之ueditor使用(前端)

白与黑 2020-09-24 21:53:00 1266℃ 8134 0条

thinkphp之Word操作一文中,介绍了后端是处理word文件时,本节将介绍前端代码上,将如何将富文本编辑器嵌入到页面中,如何实现将上传的Word文件解析并展示到富文本编辑器ueditor中。选择百度的ueditor只要原因是现有大部分富文本编辑器在功能上都不是很完全,只有基础功能,其中一些还需要花钱购买付费功能,不尽人意。ueditor可以说功能很是全面,基本满足大家的需求了,安全性上面也是有保障的,毕竟后面是百度研发团队,废话不多说,进入正题。

ueditor编辑器需要修改的地方不多,主要有两个文件ueditor.config.jsphp\config.json

editor包放置位置

将下载的utf8编码的ueditor包解压到入口文件index.php相同的文件夹static下面,即app\public\static\ueditor\,删除index.html文件

  • 目录结构如下:
    目录结构

前端配置

定位到ueditor.config.js中以下代码位置,并照以下修改:

serverUrl: URL + "./php/controller.php" // 服务器统一请求接口路径
toolbars:编辑器头部功能,不需要的直接注释掉即可,也可以分成多维数组形式,编辑器展示出来的效果就会显示成多行

后端配置

修改php\config.json,主要修改上传图片、附件、视频的保存地址以及文件大小,修改以下配置项:

"imagePathFormat": "/upload/ueditor/image/{yyyy}{mm}{dd}/{time}{rand:6}"
"scrawlPathFormat": "/upload/ueditor/image/{yyyy}{mm}{dd}/{time}{rand:6}"
"snapscreenPathFormat": "/upload/ueditor/image/{yyyy}{mm}{dd}/{time}{rand:6}"
"catcherPathFormat": "/upload/ueditor/image/{yyyy}{mm}{dd}/{time}{rand:6}"
"videoPathFormat": "/upload/ueditor/video/{yyyy}{mm}{dd}/{time}{rand:6}"
"filePathFormat": "/upload/ueditor/file/{yyyy}{mm}{dd}/{time}{rand:6}"
"imageManagerListPath": "/upload/ueditor/image/"
"fileManagerListPath": "/upload/ueditor/file/"

上传文件大小以及类型,根据个人自行修改
上传文件保存到项目入口文件的publicuploadueditor下面

前端页面

<!DOCTYPE HTML>
<html>
<head>
    <title>完整demo</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <style type="text/css">
        div{
            width:100%;
        }
    </style>
</head>
<body>
<div>
    <h1>完整demo</h1>
    <div style="margin:10px;">
        <input type="file" name="wordFile" id="wordFile">
        <button>上传</button>
    </div>
    <hr>
    <script id="editor" type="text/plain" style="width:1024px;height:500px;"></script>
</div>
<div id="btns">
    <div>
        <button onclick="getAllHtml()">获得整个html的内容</button>
        <button onclick="getContent()">获得内容</button>
        <button onclick="setContent()">写入内容</button>
        <button onclick="setContent(true)">追加内容</button>
        <button onclick="getContentTxt()">获得纯文本</button>
        <button onclick="getPlainTxt()">获得带格式的纯文本</button>
        <button onclick="hasContent()">判断是否有内容</button>
        <button onclick="setFocus()">使编辑器获得焦点</button>
        <button onmousedown="isFocus(event)">编辑器是否获得焦点</button>
        <button onmousedown="setblur(event)" >编辑器失去焦点</button>

    </div>
    <div>
        <button onclick="getText()">获得当前选中的文本</button>
        <button onclick="insertHtml()">插入给定的内容</button>
        <button id="enable" onclick="setEnabled()">可以编辑</button>
        <button onclick="setDisabled()">不可编辑</button>
        <button onclick=" UE.getEditor('editor').setHide()">隐藏编辑器</button>
        <button onclick=" UE.getEditor('editor').setShow()">显示编辑器</button>
        <button onclick=" UE.getEditor('editor').setHeight(300)">设置高度为300默认关闭了自动长高</button>
    </div>

    <div>
        <button onclick="getLocalData()" >获取草稿箱内容</button>
        <button onclick="clearLocalData()" >清空草稿箱</button>
    </div>

</div>
<div>
    <button onclick="createEditor()">
    创建编辑器</button>
    <button onclick="deleteEditor()">
    删除编辑器</button>
</div>
<script src="https://libs.cdnjs.net/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8" src="/static/ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="/static/ueditor/ueditor.all.min.js"> </script>
<script type="text/javascript" charset="utf-8" src="/static/ueditor/lang/zh-cn/zh-cn.js"></script>
<script type="text/javascript">
    $('button').click(function(){
        uploadFile();
    });
    function uploadFile() {
        var formData = new FormData();
        formData.append("wordFile", $("#wordFile")[0].files[0]);
        $.ajax({
            url: '{:url("readWord")}',
            type: 'post',
            data: formData,
            contentType: false,
            processData: false,
            dataType:'json',
            success: function (res) {
                UE.getEditor('editor').setContent(res.data);
            }
        })
    }
    //实例化编辑器
    //建议使用工厂方法getEditor创建和引用编辑器实例,如果在某个闭包下引用该编辑器,直接调用UE.getEditor('editor')就能拿到相关的实例
    var ue = UE.getEditor('editor');


    function isFocus(e){
        alert(UE.getEditor('editor').isFocus());
        UE.dom.domUtils.preventDefault(e)
    }
    function setblur(e){
        UE.getEditor('editor').blur();
        UE.dom.domUtils.preventDefault(e)
    }
    function insertHtml() {
        var value = prompt('插入html代码', '');
        UE.getEditor('editor').execCommand('insertHtml', value)
    }
    function createEditor() {
        enableBtn();
        UE.getEditor('editor');
    }
    function getAllHtml() {
        console.info(UE.getEditor('editor').getAllHtml())
    }
    function getContent() {
        var arr = [];
        arr.push("使用editor.getContent()方法可以获得编辑器的内容");
        arr.push("内容为:");
        arr.push(UE.getEditor('editor').getContent());
        console.info(arr.join("\n"));
    }
    function getPlainTxt() {
        var arr = [];
        arr.push("使用editor.getPlainTxt()方法可以获得编辑器的带格式的纯文本内容");
        arr.push("内容为:");
        arr.push(UE.getEditor('editor').getPlainTxt());
        console.info(arr.join('\n'))
    }
    function setContent(isAppendTo) {
        var arr = [];
        arr.push("使用editor.setContent('欢迎使用ueditor')方法可以设置编辑器的内容");
        UE.getEditor('editor').setContent('欢迎使用ueditor', isAppendTo);
        console.info(arr.join("\n"));
    }
    function setDisabled() {
        UE.getEditor('editor').setDisabled('fullscreen');
        disableBtn("enable");
    }

    function setEnabled() {
        UE.getEditor('editor').setEnabled();
        enableBtn();
    }

    function getText() {
        //当你点击按钮时编辑区域已经失去了焦点,如果直接用getText将不会得到内容,所以要在选回来,然后取得内容
        var range = UE.getEditor('editor').selection.getRange();
        range.select();
        var txt = UE.getEditor('editor').selection.getText();
        console.info(txt)
    }

    function getContentTxt() {
        var arr = [];
        arr.push("使用editor.getContentTxt()方法可以获得编辑器的纯文本内容");
        arr.push("编辑器的纯文本内容为:");
        arr.push(UE.getEditor('editor').getContentTxt());
        console.info(arr.join("\n"));
    }
    function hasContent() {
        var arr = [];
        arr.push("使用editor.hasContents()方法判断编辑器里是否有内容");
        arr.push("判断结果为:");
        arr.push(UE.getEditor('editor').hasContents());
        alert(arr.join("\n"));
    }
    function setFocus() {
        UE.getEditor('editor').focus();
    }
    function deleteEditor() {
        disableBtn();
        UE.getEditor('editor').destroy();
    }
    function disableBtn(str) {
        var div = document.getElementById('btns');
        var btns = UE.dom.domUtils.getElementsByTagName(div, "button");
        for (var i = 0, btn; btn = btns[i++];) {
            if (btn.id == str) {
                UE.dom.domUtils.removeAttributes(btn, ["disabled"]);
            } else {
                btn.setAttribute("disabled", "true");
            }
        }
    }
    function enableBtn() {
        var div = document.getElementById('btns');
        var btns = UE.dom.domUtils.getElementsByTagName(div, "button");
        for (var i = 0, btn; btn = btns[i++];) {
            UE.dom.domUtils.removeAttributes(btn, ["disabled"]);
        }
    }

    function getLocalData () {
        console.info(UE.getEditor('editor').execCommand( "getlocaldata" ));
    }

    function clearLocalData () {
        UE.getEditor('editor').execCommand( "clearlocaldata" );
        alert("已清空草稿箱")
    }
</script>
</body>
</html>

后端代码请参考thinkphp之Word操作

效果

效果展示

非特殊说明,本博所有文章均为博主原创。

评论啦~