tp5 composer扩展think-ueditor

浏览:2378 发布日期:2018/05/10 分类:系统代码 关键字: composer ueditor think-ueditor
由于tp5官方缺少composer扩展,5月初来了几个扩展,反响不错。那就把我之前整理的百度编辑器也弄了个composer扩展。无需写后台php程序完全,html和js调用即可
github地址:https://github.com/cinaofdai/think-ueditor

think-ueditor

The ThinkPHP5 ueditor 百度编辑器 composer模块
安装
一、执行命令安装

composer require dh2y/think-ueditor

或者
二、require安装

"require": {
"dh2y/think-ueditor":"*"
},

或者
三、autoload psr-4标准安装

a) 进入vendor/dh2y目录 (没有dh2y目录 mkdir dh2y)
b) git clone
c) 修改 git clone下来的项目名称为think-ueditor
d) 添加下面配置
"autoload": {
"psr-4": {
"dh2y\\sms\\": "vendor/dh2y/think-ueditor/src"
}
},
e) php composer.phar update

使用
添加配置文件

1、默认配置在 conf下面的config.json 2、需要自己的配置将 conf下面的ueditor.php复制到 extra目录下面(或者通过下面console添加配置文件)
使用方法
初始化项目资源

在项目目录下面找到 command.php 添加控制台添加下面配置

return [
'dh2y\ueditor\Baidu'
];


执行console命令初始化assets资源

php think baidu ##默认资源目录
php think baidu --path /src/path ##绝对路径
php think baidu --path admin/js ##默认资源目录下面的路径


执行console命令初始化config配置

php think baidu --config y ##初始化config配置

前端调用

引用百度编辑器js

<!-- 配置文件 -->
<script type="text/javascript" src="__static__/admin/js/ueditor/ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="__static__/admin/js/ueditor/ueditor.all.js"></script>

普通使用案例

//###############html代码###############
<!---------完整的编辑器功能--------->
<div style="display: none">
<!-- 加载编辑器的容器 -->
<script id="container" type="text/plain"></script>
</div>

//###############JS代码###############

_Ueditor = UE.getEditor('container');


VueJS使用案例

//###############html代码###############
<div style="display: none">
<!-- 加载编辑器的容器使用图片上传功能 -->
<script id="image" type="text/plain"></script>
</div>

<!---------完整的编辑器功能--------->
<div style="display: none">
<!-- 加载编辑器的容器 -->
<script id="container" type="text/plain"></script>
</div>


//###############JS代码###############
var _editor; //初始化百度编辑器图片

var model = {
model: {}
};
var store_model = new Vue({
el: "#form-admin",
data: model,
mounted: function () {
this.initTime();
this.initImage();
},
methods: {

//初始化百度编辑器
initUEditor:function () {
_Ueditor = UE.getEditor('container');
},

//初始化时间选择插件
initTime:function (event) {
laydate.render({elem: '#start_time'});
laydate.render({elem: '#end_time'});
},

//初始化百度编辑器上传图片
initImage:function(event){
_editor = UE.getEditor('image');
_editor.ready(function () {
//设置编辑器不可用
//_editor.setDisabled();
//隐藏编辑器,因为不会用到这个编辑器实例,所以要隐藏
_editor.hide();
//侦听图片上传
_editor.addListener('beforeInsertImage', function (t, arg) {
console.log( arg);
//app_model.model.pic = arg[0].src;
//图片预览
//$("#form-input-pic").attr("src", arg[0].src);
})

});

},

//上传图片点击事件弹出图片框
upImage:function () {
var myImage = _editor.getDialog("insertimage");
myImage.open();
},


doSubmit: function () {
$.ajax({
type: 'post',
data: this.model,
url: "xxxx/xxxx",
cache: false,
dataType: 'json',
success: function (data) {

}
});
}
}
});

评论( 相关
后面还有条评论,点击查看>>