分类归档: Javascript

让KindEditor支持MP4视频(使用ckplayer播放器)

参考文章:https://blog.csdn.net/zhjx922/article/details/7601660

KindEditor本身支持音视频文件的上传,但是对于这些文件的支持是依赖于浏览器控件的,兼容性很差,而且现在比较常见的视频文件MP4也不支持,因此本文提供了对KindEditor进行修改的办法,使其在添加视频后可直接使用CKplayer进行播放。

CKplayer下载地址:http://www.ckplayer.com/down/
我这里使用的是2018-12-20的X1版本

使用简单调用方式:http://www.ckplayer.com/manualX/14.html

KindEditor我为了省事,我这里使用的是kindeditor.all.js直接进行修改,其他文件大同小异。

首先找到K.options,在embed数组中增加下面两项

'flashvars', 'allowfullscreen'

然后修改函数 function _mediaType(src)

// 把
if (/.(swf|flv)(\?|$)/i.test(src)) {
// 改成
if (/.(swf|flv|mp4)(\?|$)/i.test(src)) {

找到函数 function _mediaEmbed(attrs) 为html中的<embed标签添加两个属性

allowscriptaccess="always" allowfullscreen="true"

找到 KindEditor.plugin(‘media’ 修改音视频插件生成HTML的方法

// 将原有的HTML生成代码进行修改

var html = K.mediaImg(self.themesPath + 'common/blank.gif', {
src : url,
type : K.mediaType('.swf'),
width : width,
height : height,
quality : 'high'
});
// 改为

var html = K.mediaImg(self.themesPath + 'common/blank.gif', {
src : '/resource/ckplayer/ckplayer.swf', // 这里替换成你的ckplayer.swf的实际位置
flashvars : 'video=' + url.replace(/^video=/, ''),
type : K.mediaType('.swf'),
width : width,
height : height,
quality : 'high'
});

还需要将media插件代码的后半段中对视频属性修改的部分进行处理

// 找到
urlBox.val(attrs.src);
// 替换为
urlBox.val(attrs.flashvars);

最后只要在创建KindEditor实例时在items中添加’media’就可以了。

Read: 9

Vue.js 学习资料

awesome-vue (项目大集合)
https://github.com/vuejs/awesome-vue

前端开发之走进Vue.js
http://www.jianshu.com/p/78c9e5342990

ECMAScript 6入门
http://es6.ruanyifeng.com/

Vue.js 指南
https://cn.vuejs.org/v2/guide/

Vue.js API
https://cn.vuejs.org/api

vue-router
https://github.com/vuejs/vue-routerhttp://router.vuejs.org/zh-cn/advanced/meta.html

vue-resource
https://github.com/pagekit/vue-resource

vue-cli
官方指南:https://cli.vuejs.org/zh/guide/
https://github.com/vuejs/vue-cli
https://github.com/vuejs-templates/webpack
http://vuejs-templates.github.io/webpack/


https://github.com/vuejs/vue-cli
https://github.com/vuejs-templates/webpack
http://vuejs-templates.github.io/webpack/

vuex 中文文档
https://vuefe.cn/vuex/actions.html

官方实例
https://github.com/vuejs/vuex/tree/dev/examples/shopping-cart

vuex入门实例(中文,非官方)
https://segmentfault.com/a/1190000005018970#articleHeader11

饿了么Vue 2.0组件库 Element
http://element.eleme.io/#/zh-CN

Read: 7

SimpleScriptLoader for Firefox 一个简单的脚本加载工具

最近在做的一个项目需要调用JS文件对网页内容进行修改,老是用Firefox复制粘贴特别麻烦,于是乎就顺手写了个小扩展SimpleScriptLoader。这个小东西可以手动或者自动的加载指定的JS文件,非常简单易用。

支持在任何网页打开时加载指定的脚本文件,还可以设置自动加载,在选项面板中能设置允许自动加载的URL地址。

开源协议:GPL v3

代码托管在GitHub:https://github.com/HessianZ/simple-script-loader

0.1版已经发布到了Firefox扩展中心:https://addons.mozilla.org/zh-CN/firefox/addon/simple-script-loader/

界面截图

选项面板截图

Read: 72

一些网站开发中常用到的Javascript项目

图片轮播 SlideJS

SlidesJS is a responsive slideshow plug-in for jQuery (1.7.1+) with features like touch and CSS3 transitions. Give it a try above and check out the examples to help you get started adding SlidesJS to your project.

官方地址: http://www.slidesjs.com/

 

图片滚动(Marquee) jCarousel

jCarousel是一款 jQuery 插件, 用来控制水平或垂直排列的列表项. 这些项目(可以是静态HTML内容或是Ajax加载内容)内容是可以来回滚动的(可以有动画效果)。

官方地址: http://sorgalla.com/jcarousel/

中文文档:http://www.zhangxinxu.com/jq/jcarousel_zh/

 

图像放大 Etalage

A ready to use jQuery image zooming plugin to present your images in the highest detail without leaving the page.

官方地址:http://frique.me/etalage/

 

简单粗暴的在线编辑器 KindEditor

KindEditor 是一套开源的在线HTML编辑器,主要用于让用户在网站上获得所见即所得编辑效果,开发人员可以用 KindEditor 把传统的多行文本输入框(textarea)替换为可视化的富文本输入框。

官方地址:http://www.kindsoft.net

 

树状列表 zTree

zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。

官方地址:http://www.ztree.me/v3/main.php

 

数据报表 Google Chart

Google chart tools are powerful, simple to use, and free. Try out our rich gallery of interactive charts and data tools.

官方地址:https://developers.google.com/chart/?hl=zh-CN

Read: 311

[转]如何修复 “Internet Explorer 无法打开 Internet 站点….”

src:http://www.nirmaltv.com/2007/08/08/how-to-fix-internet-explorer-cannot-open-the-internet-site-operation-aborted-error/

How to Fix “Internet Explorer Cannot Open the Internet Site- Operation Aborted” Error

Of late few of my blog readers using Internet explorer pointed out to me that there was some error happening while loading my blog in IE. Around 25% of my readers use Internet Explorer to read my blog. I check my blog frequently in IE and many times I too encountered this error, but initially I thought it was some error in my browser. The error is really frustrating as it shows only in IE and not in Firefox or Opera or any other browser for that matter.

The nature of error is that it shows up when the site is loads completely. This is what you see when the error occurs.

Internet Explorer Error

Once you click OK, the page is replaced with “The Page cannot be Displayed” error. How to fix this error?

A bit of Googling gave me some idea into this error. This error can happen because of many reasons. Microsoft has even a patch for solving this error in IE.

1. This error can happen if Google Map API is present in the code. If you are getting this error because of Google Map API, then the fix for the problem is available here.

2. If you are not using Google API and still getting the error, then it could be because of this reason.

It is not possible append to the BODY element from script that isn’t a direct child to the BODY element

If there are any Javascripts running inside the body tag or inside a table which is directly a child of body, then most of the times this error is bound to happen. The solution is to move the script to the top or bottom of the body tag or even moving it after the body. The script can also be put inside a function and then calling it from window.onload. Another solution to this problem is to add defer=”defer” in the script tag.

I checked my code for scripts which were running inside the body tag and was a direct child to it. Then I moved all my Javascript codes to bottom of the body tag so that it will not interfere while parsing the page. I tested my blog in IE after I made the change and I could see the difference, the error was not happening any more. I checked in different versions of IE to confirm. In case you are using IE and still getting the error on my blog, please do inform me.

Read: 2003