thinkphp6 Uditor富文本编辑器详细操作
2023-03-29 23:03:03
109
{{single.collect_count}}

首先要先下载Uditor 点击下载

下载得到的是一个压缩包,里面只有一个名为utf8-php的文件夹,我们将此解压出来并重命名为ueditor并放入TP6框架中的public目录下的static目录中

 

引入UEditor所需的JS文件

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

这个地址不是固定的根据你放的地方来决定的

然后我们需要添加一个文本域,并为它的id和name属性赋值:

<textarea id="content" name="content" rows="10"></textarea>

接下来只需在JS中将文本域渲染成UEditor即可,JS代码如下:

<script type="text/javascript">var ue = UE.getEditor('content', {initialFrameWidth: 900,//初始化宽度initialFrameHeight: 300, //初始化高度});</script>

这样就可以显示富文本添加图片或表情了

 

回帖
全部回帖({{commentCount}})
{{item.user.nickname}} {{item.user.group_title}} {{item.friend_time}}
{{item.content}}
{{item.comment_content_show ? '取消' : '回复'}} 删除
回帖
{{reply.user.nickname}} {{reply.user.group_title}} {{reply.friend_time}}
{{reply.content}}
{{reply.comment_content_show ? '取消' : '回复'}} 删除
回帖
收起
没有更多啦~
{{commentLoading ? '加载中...' : '查看更多评论'}}