简单易懂的ueditor新手教程

ueditor的使用(新手教程)

ueditor使用相当广泛,在各种留言或者文章系统运用很多,最近做了一个简单的官网,后台需要用ueditor发布新闻。写一点走过的坑。

ueditor的安装

安装十分简单,去官网下载即可,https://ueditor.baidu.com/website/download.html 我的项目使用php写的,下载对应版本即可

ueditor的配置

先把文件拷贝进我们的项目,调用编辑器,并且引入以下三个文件,注意这里问为文件路径! 需要js实例化出编辑器,并且在此我们添加了提交表单功能
简单易懂的ueditor新手教程
这样我们的demo就引入成功了简单易懂的ueditor新手教程

图片路径配置

打开ueditor->php->config.json,找到第12行,这是我们图片的上传路径,我的文件夹为app_proj下的uploads,后面的各种图片或者视频也做更改
简单易懂的ueditor新手教程

把编辑好的图文存入数据库

用了最简单的方法,先提交到别的页面,然后插入数据库
简单易懂的ueditor新手教程

我们对一篇文章进行简单排版,然后提交简单易懂的ueditor新手教程
同时,在本地文件app_proj->uploads下生成了这个文件,图片上传成功!简单易懂的ueditor新手教程
打开数据库,我们看到插入成功了,而且是已经带有html标签和css样式的简单易懂的ueditor新手教程

接下来就是把文章显示到前端了

前端也只是简单地从数据库select出来,无需任何多余函数
简单易懂的ueditor新手教程

结果如图
简单易懂的ueditor新手教程

小结:在测试的时候,post接受的页面打印$content的时候,是没有html标签,这导致了我没有直接存入数据库,而是用了很多函数,反而没有预期的效果,浪费不少时间。没想到可以直接存入和取出