Thinkphp整合最新Ueditor编辑器

最新推荐文章于 2024-04-04 09:33:35 发布

原创

最新推荐文章于 2024-04-04 09:33:35 发布 · 761 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#编辑器 #前端 #javascript

说到最新的富文本编辑器的确不少(ckeditor、fkeditor、ueditor),这些富文本编辑器如果单独使用基本上很方便，不需要做额外的配置，只要把官方的插件下载下来放到一个web容器中，看看插件中提供的 index.html 里的代码就明白应该怎么调用了。因为富文本编辑器会经常涉及到文件、图片、视频资源的上传，如果本身所用到的框架或者是项目本身就有一个模块是专门来处理这一块儿的，对一些资源需要做特殊处理的，例如水印处理，对图片的大小处理(原图、缩略图)，那么就设计到把富文本编辑器与你现有的上传模块结合起起来(富文本编辑器都有自己的上传模块)。这里值得一提的是ueditor 这个富文本编辑器，各个版本之间的差异比较大(1.2+ 、1.3+、1.4+)，导致与现有的上传模块结合也存在差异。

这里笔者就采用最新版的ThinkPHP 与最新的百度Ueditor 做整合。

首先访问百度Ueditor的官方地址：下载列表

根据自己的需求下载不同的版本，这里采用的是1.4.4PHP utf8版本的。

Thinkphp 这里就不用说了，直接去tp官网下载最新的。

步骤：

前端部分：

把下载下来的富文本编辑器重新命名例如 ueditor ,把把放到项目的根目录(笔者建议你在根目录新建一个文件件或者是把它放到项目的Public目录下)，这个根据个人对网站目录

的要求而决定，笔者是放在 Public 目录下的

其次就是到你需要加载富文本编辑器的地方，做一些初始化(1.引用富文本编辑器所需要的js文件 2.初始化插件)，代码如下：

<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>Demo</title>
        <!-- JQuery 这里自己引用 -->
    <js file="__ROOT__/P

最低0.47元/天解锁文章