tp3富文本编辑器部署

富文本编辑器

他和PHP的是一样的我们不必要写ajax进行传值我们可以写一个form表单进行提交。

就直接把他当做input框就可以我们后台接收值然后将值插入数据库，不过我们要找对这个富文本编辑器，和放置的文件夹和我们引用的js要写对。

其他的和form表单一样，数据库有所改变我们的字段的大小要进行改变不能用varchar了它装的东西太少，要用text文本然后这个可以装很多东西。

下载富文本编辑器插架：请参考https://www.jb51.net/article/118616.htm；

下载资源后我们将文件放置在Public公共文件夹中去里面在创建一个文件夹名字为ueditor

然后我们就可以进行配置了。

 

静态页面内容：

<h2 class="Index-addotopn-h">富文本编辑器</h2>
<form action="{:U('Home/Ueditor/add')}" method="post" class="ueditor-index-form">
<div><textarea name="intro_detail" id="intro_detail" cols="30" rows="10"></textarea> </div>
<input class="ueditor-index-submit" type="submit" value="提交" />
</form>
<script type="text/javascript" src="__PUBLIC__/ueditor/ueditor.config.js"></script>
<script type="text/javascript" src="__PUBLIC__/ueditor/ueditor.all.min.js"></script>
<!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->
<!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
<script type="text/javascript" src="__PUBLIC__/ueditor/lang/zh-cn/zh-cn.js"></script>
<script type="text/javascript">
        UE.getEditor('intro_detail', { //intro_detail为要编辑的textarea的id
               initialFrameWidth: 1200, //初始化宽度
               initialFrameHeight: 400, //初始化高度
        });
</script>

 

控制器中：

//读取 页面
public function index() {
    $this->display( 'index' );

}
//数据库插入内容
public function add() {
    $User = M( 'ueditor' );
    //连表
    $ueditor['id'] = 1;
    $ueditor['name'] = I( 'intro_detail' );
    //邮箱
    $save = $User->save( $ueditor );
    // 根据条件更新记录
    if ( $save ) {
        //判断有值
        $this->success( '成功！！' );
    } else {
        //判断无值
        $this->error( '无更改值！！ ' );
    }
}

//读取内容
public function read() {
    $User = M( 'ueditor' );
    //连表
    $id['id'] = 1;
    //当pid为1，意思就是输出一级的内容。
    $data = $User->find( $id );
    $this->assign( 'all', $data );
    $this->display( 'read' );
}

 

 

读取内容页面：

<h2 class = 'Index-addotopn-h'>富文本编辑器读取内容</h2>
<form action = "{:U('Home/Ueditor/add')}" method = 'post' class = 'ueditor-index-form'>
<div><textarea name = 'intro_detail' id = 'intro_detail' cols = '30' rows = '10'> {$all.name}
    </textarea> </div>
    <!--<input type = 'submit' value = '提交' />-->
    </form>
    <script type = 'text/javascript' src = '__PUBLIC__/ueditor/ueditor.config.js'></script>
    <script type = 'text/javascript' src = '__PUBLIC__/ueditor/ueditor.all.min.js'></script>
    <!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->
    <!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
    <script type = 'text/javascript' src = '__PUBLIC__/ueditor/lang/zh-cn/zh-cn.js'></script>
    <script type = 'text/javascript'>
    UE.getEditor( 'intro_detail', {
        //intro_detail为要编辑的textarea的id
        initialFrameWidth: 1200, //初始化宽度
        initialFrameHeight: 400, //初始化高度
    }
);
</script>

这里注意读取内容的时候我们也要将js链接给写进入不然无法出现富文本编辑器的样式

 

富文本编辑器的图片不显示路径问题

我们的图片不显示说明我们的图片路径不对，我们上传图片时和我们的普通一样，上传的只是一个路径然后我们的图片要复制到一个文件内，然后进行插入。

图片的路径在富文本编辑器项目中的PHP->config.json配置文件中。

我们的图片上传的文件在  "filePathFormat": "/Public/ueditor/php/imgs/file/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */

这一句话中这里我进行了更改，文件夹名字可以进行更改他会自动生成，但是我们的前面最好在写一个路径不然它在根目录下创建文件夹，我们在前面跟一个文件夹那么他会在本文件夹中去创建文件夹进行插入文件。

我们也可以根据页面去查找这个图片所在的文件夹在哪，然后进行更改。

在服务器中可能会出现错误，因为新建文件夹那么新建的文件夹就没有777权限所以可能会报错，也可能不会