文档章节

yii2整合百度编辑器umeditor

白狼栈
 白狼栈
发布于 2016/04/17 14:31
字数 767
阅读 301
收藏 1
点赞 1
评论 0

作者:白狼 出处:http://www.manks.top/article/yii2_umeditor 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

实际工作中,难免不会遇到类似新闻呀,文章呀之类的开发工作,这就要求运营人员去发布啦,但是喃,有些个小伙伴为了省事呢,三下五除二,ok,上线了。人家运营的妹子一试用,哎呀呀,你这发布文章内容给我整了个大点的textarea就算完事啦,发布一篇新闻你想整死老娘不成。我们接下来就来聊聊Yii2框架是如何整合百度编辑器umeditor的。

umeditor是啥,我只听过ueditor,你这umeditor是不是盗版的东东喃?umeditor呢,说白了就是mini版的ueditor,按照百度官方说法,其实就是编辑器中的"短软小",咳咳,咱们回归正题。

首先勒,咱们先去官网下载一份mini版的ueditor umeditor,注意哦,是um editor

下载下来解压放到项目根目录下面的 /css目录下 命令为umeditor,具体位置各位随意,后面能引用的到就行。

第二步,我们先去扩展下backend\assets\Appset类,为啥要扩展这么个玩意,跟咱们的umeditor整合啥关系勒,半路杀出个程咬金出来。这里扩展下这个类文件的意图是为了接下来在文件中方便引入css js文件滴。

很简单,在Appset方法中增加下面两个方法即可

    //定义按需加载JS方法,注意加载顺序在最后  
    public static function addScript($view, $jsfile) {  
        $view->registerJsFile($jsfile, [AppAsset::className(), 'depends' => 'backend\assets\AppAsset']);  
    }  
      
    //定义按需加载css方法,注意加载顺序在最后  
    public static function addCss($view, $cssfile) {  
        $view->registerCssFile($cssfile, [AppAsset::className(), 'depends' => 'backend\assets\AppAsset']);  
    }

接下来,按照下面的配置即可。

先做说明,此处我们假设有一个文章article表,有一个内容content字段需要显示为百度编辑器。

按照yii2的表单模型来看,我们修改article\_form.php文件中的content字段

<?= $form->field($model, 'content')->textarea(['style' => 'width:760px;height:500px;']) ?>

该文件引入Appset类并引入相关的css js文件如下

    use backend\assets\AppAsset;
    AppAsset::register($this);
    AppAsset::addCss($this,'/css/umeditor/themes/default/css/umeditor.css');
    AppAsset::addScript($this,'/css/umeditor/umeditor.config.js');
    AppAsset::addScript($this,'/css/umeditor/umeditor.min.js');
    AppAsset::addScript($this,'/css/umeditor/lang/zh-cn/zh-cn.js');

然后只需要在当前页面底部注册下面的js代码即可实现

    <?php $this->beginBlock('js-block') ?>
        $(function () {
            var um = UM.getEditor('article-content', {
            });
        });
    <?php $this->endBlock() ?>
    <?php $this->registerJs($this->blocks['js-block'], \yii\web\View::POS_END); ?>

关于article-content怎么来滴喃,这个就是我们要绑定的目标对象,即contentarticle-content是当前该对象的id标识。

ok,到此百度编辑器基本上整合完毕,现在赶快去添加一篇文章试试看吧,记得更新看看编辑器里面是否也有内容哦



本文转载自:http://www.manks.top/article/yii2_umeditor

共有 人打赏支持
白狼栈
粉丝 17
博文 81
码字总数 30876
作品 0
杭州
百度umeditor在线编辑器插入链接查看源码后变成http://undefined

转载自网址: http://www.vephp.com/jiaocheng/125.html 问题: 百度umeditor在线编辑器, 插入超级链接, 查看源码后, 变成http://undefined 问题排查: 问题可以锁定在源码切换功能出现问题。...

phpervip
06/27
0
0
yii2解决百度编辑器umeditor图片上传问题

作者:白狼 出处:http://www.manks.top/article/yii2umeditor_upload 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任...

白狼栈
2016/04/17
76
0
yii2集成富文本编辑器redactor

作者:白狼 出处:http://www.manks.top/article/yii2_redactor 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利...

白狼栈
2016/04/24
287
0
yii2组件之多图上传插件FileInput的详细使用

作者:白狼 出处:http://www.manks.top/yii2_multiply_images.html 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的...

白狼栈
2016/06/23
85
0
Yii 网页播放器扩展 yii-web-player

今天写了一个Yii的扩展,Yii Web Player 可以用于播放百度影音,优酷视频,搜狐视频等(前提是知道影片地址)。 我把它放到了 开源中国的代码托管 上了,项目地址: http://git.oschina.net/...

首席烤地瓜
2013/12/18
0
1
Yii 2.0开发一个仿京东商城平台

第1章 课程简介 介绍了课程内容、背景和案例展示。 第2章 项目的准备工作 介绍了如何使用PHP依赖管理工具Composer安装Yii2框架,模拟配置真实企业开发项目运行环境和编辑器。 第3章 项目前台...

15543595340
05/19
0
0
php的yii框架下开发环境xampp,vim,xdebug,DBGp的搭建

本文适用于yii1.1及yii2普通安装模式,yii2采用composer安装的见这里。 php的yii框架下开发环境xampp,vim,xdebug,DBGp的搭建 选择Linux桌面环境Deepin2014.1下开发网站的理由很简单,能截图,...

不避风云
2014/11/07
0
3
Yii框架应用程序整合Ucenter实现同步注册、登录和退出等

如今很多网站都要整合论坛程序,而康盛的Discuz系列产品往往是首选。然后就有了整合用户的需要,康盛提供了Ucenter架构,方便对不同的应用程序进行单点登录整合。 进来我尝试将ucenter整合到...

王达名字被人抢了我艹
2013/07/25
0
0
Yii框架学习笔记(二)将html前端模板整合到框架中

上一节成功将Yii框架引入,并生成了要进行的项目文件夹shop。 进入protected文件夹,开始html模板的整合之旅; protected文件夹中需要注意controller,models以及views三个文件夹,这正是MVC...

flute小行
2014/04/11
0
0
Yii2 Unable to verify your data submission 错误-CSRF

Yii2 功能很是强大,组件化编程很高大上,全栈编程很容易,但我觉得日常的开发中还是有很大一部分人会去手写表单之类的,为了配合前端的工作,或者懒得再去学这套堪比一门新语言的组件语法....

big_cat
2016/02/01
345
2

没有更多内容

加载失败,请刷新页面

加载更多

下一页

shell中的函数、shell中的数组、告警系统需求分析

shell中的函数 格式: 格式: function f_name() { command } 函数必须要放在最前面 示例1(用来打印参数) 示例2(用于定义加法) 示例3(用于显示IP) shell中的数组 shell中的数组1 定义数...

Zhouliang6
27分钟前
1
0
用 Scikit-Learn 和 Pandas 学习线性回归

      对于想深入了解线性回归的童鞋,这里给出一个完整的例子,详细学完这个例子,对用scikit-learn来运行线性回归,评估模型不会有什么问题了。 1. 获取数据,定义问题     没有...

wangxuwei
49分钟前
0
0
MAC安装MAVEN

一:下载maven压缩包(Zip或tar可选),解压压缩包 二:打开终端输入:vim ~/.bash_profile(如果找不到该文件新建一个:touch ./bash_profile) 三:输入i 四:输入maven环境变量配置 MAVEN_HO...

WALK_MAN
今天
0
0
33.iptables备份与恢复 firewalld的9个zone以及操作 service的操作

10.19 iptables规则备份和恢复 10.20 firewalld的9个zone 10.21 firewalld关于zone的操作 10.22 firewalld关于service的操作 10.19 iptables规则备份和恢复: ~1. 保存和备份iptables规则 ~2...

王鑫linux
今天
1
0
大数据教程(2.11):keeperalived+nginx高可用集群搭建教程

上一章节博主为大家介绍了目前大型互联网项目的系统架构体系,相信大家应该注意到其中很重要的一块知识nginx技术,在本节博主将为大家分享nginx的相关技术以及配置过程。 一、nginx相关概念 ...

em_aaron
今天
0
0
Apache Directory Studio连接Weblogic内置LDAP

OBIEE默认使用Weblogic内置LDAP管理用户及组。 要整理已存在的用户及组,此前办法是导出安全数据,文本编辑器打开认证文件,使用正则表达式获取用户及组的信息。 后来想到直接用Apache Dire...

wffger
今天
2
0
HFS

FS,它是一种上传文件的软件。 专为个人用户所设计的 HTTP 档案系统 - Http File Server,如果您觉得架设 FTP Server 太麻烦,那么这个软件可以提供您更方便的档案传输系统,下载后无须安装,...

garkey
今天
1
0
Java IO类库之BufferedInputStream

一、BufferedInputStream介绍 /** * A <code>BufferedInputStream</code> adds * functionality to another input stream-namely, * the ability to buffer the input and to * sup......

老韭菜
今天
0
0
STM 32 窗口看门狗

http://bbs.elecfans.com/jishu_805708_1_1.html https://blog.csdn.net/a1985831055/article/details/77404131...

whoisliang
昨天
0
0
Dubbo解析(六)-服务调用

当dubbo消费方和提供方都发布和引用完成后,第四步就是消费方调用提供方。 还是以dubbo的DemoService举例 -- 提供方<dubbo:application name="demo-provider"/><dubbo:registry address="z...

青离
昨天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部