ThinkPhp6框架如何使用富文本编辑器UEditor的使用

最新推荐文章于 2023-10-14 20:50:26 发布

跨时空思念ღ

最新推荐文章于 2023-10-14 20:50:26 发布

阅读量1.6k

点赞数 2

文章标签： javascript 开发语言 ecmascript thinkphp

本文链接：https://blog.csdn.net/Xian_Hu/article/details/121281664

版权

第一步：

我们要下载富文本编辑器的安装包提起码： 3678

https://pan.baidu.com/s/1-aqHbbxH0NBEuGBuF-D34Q https://pan.baidu.com/s/1-aqHbbxH0NBEuGBuF-D34Q https://pan.baidu.com/s/1-aqHbbxH0NBEuGBuF-D34Q

第二步：

将文件压缩后放在指定区域，并将文件夹进行更改名称

原名：ueditor1_4_3_3-utf8-php 更改后： ueditor

将文件夹放置在 tp 中的 public中

第三步：

进入视图调用它，src 的位置，位置一定要对，不然无法出来

<script type="text/javascript" src="/ueditor/ueditor.config.js"></script>
    <script type="text/javascript" src="/ueditor/ueditor.all.js"></script>
    <script type="text/javascript" src="/ueditor/lang/zh-cn/zh-cn.js"></script>

第四步：

直接书写文本域，并且书写 ID

<div class="layui-form-item">
            <label class="layui-form-label"><span class="x-red"></span>富文本编辑器</label>
            <div class="layui-input-inline">
                <textarea id="layout" name="layout" rows="10"></textarea>
            </div>
        </div>

第五步：

给富文本编辑器写 JS 样式将文本域渲染成 UEditor 即可

<script type="text/javascript">
    var ue = UE.getEditor('layout', {
        initialFrameWidth: 900,    //设置宽度
        initialFrameHeight: 300,   //设置高度
        maximumWords:1000,         //设置最大长度限制
    });
</script>