rails使用Kindeditor网页编辑器,Mobile和PhoneGap混合开

在gemfile中参与(前面版本别丢卡塔 尔(阿拉伯语:قطر‎

1在html 中的使用js有三种方式

其三节,接上头的二节,这里我们进入socket.io的管理
率先,大家在./bin/www文件里走入

生龙活虎、到jquerymobile.com下载最新的ZIP File,解压拿到其JavaScript, CSS和images。放到/assets/www/js目录下。如图:【当中jquery.js是从demos的js目录里复制出来的,上生龙活虎篇小说中的cordova.js也移到了js目录下】

gem 'rails_kindeditor', '~> 0.5.0'
1.1 在html 用script 标签直接把js代码加到html文件中
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script>
        alert('hello world')
    </script>
</body>
</html>
var routes = require('../routes/index');

var server = http.createServer(app);
//在server下加入socket.io的方法
/**
 * Create WebSocket server
 */
var io = require('socket.io').listen(server);
io.sockets.on('connection', routes.vote);

 图片 1  

   $ bundle  

1.2 在html标签用事件加入js代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body onload="alert('hello world')">
</body>
</html>

那边大家到场了socket的监听,并把socket的监听交给routes.vote来拍卖,在route/index.js中参加

二、在index.html中投入如下代码:

创建布局文件,並且引入js

1.3 用script 标签走入外界的js文件
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body >
<script src="../a.js"></script>  
</body>
</html>

// a.js 
alert('hello world')
router.vote = function(socket){
    socket.on('send:vote', function(data){
        var ip = socket.handshake.headers['x-forwarded-for'] || socket.handshake.address;
        //查找当前投票
        Poll.findById(data.poll_id, function(error, poll){
            var choice = poll.choices.id(data.choice);
            choice.votes.push({ip: ip});
            poll.save(function(error, doc){
                var theDoc = {
                    question: doc.question, 
                    _id: doc._id, 
                    choices: doc.choices,
                    userVoted: false, 
                    totalVotes: 0
                };
                //查询当前IP是否已经投过票
                poll.choices.forEach(function(choice, index) {
                    choice.votes.forEach(function(vote, index) {
                        theDoc.totalVotes  ;
                        theDoc.ip = ip;
                        if(vote.ip === ip){
                            theDoc.userVoted = true;
                            theDoc.userChoice = { _id: choice._id, text: choice.text };
                        }
                    });
                });

                socket.emit('myvote', theDoc);
                socket.broadcast.emit('vote', theDoc);
            });
        });
    });
};

[html]
<link rel="stylesheet" type="text/css" href="js/jquery.mobile-1.3.1.css">   
    <script src="js/jquery.js"></script>   
     
    <!-- 这里步向项目中其余的引用 -->   
    <script type="text/javascript" charset="utf-8" src="js/cordova.js"></script> 
     
    <script src="js/jquery.mobile-1.3.1.js"></script> 

rails g rails_kindeditor:install

rails kindeditor:assets
1.4三种艺术的分别

1.2 和 1.1 的补益正是js代码直接在文书档案中不会发出http央求, 但是却不能够缓存下来了,每回呼吁都要加载三回, 1.3 就刚巧和上边相反的, 1.3会爆发http伏乞, 可是能够被浏览器缓存下来,
1.2 情势不可能加载比超多的js代码不然后边就无法维护了, 而1.3 和1.1 未有这几个主题素材

好了,服务端的拍卖实现了。
在public/js/services/services.js中加入

<link rel="stylesheet" type="text/css" href="js/jquery.mobile-1.3.1.css"> 
 <script src="js/jquery.js"></script> 
 
 <!-- 这里到场项目中别的的援用 --> 
 <script type="text/javascript" charset="utf-8" src="js/cordova.js"></script>
 
 <script src="js/jquery.mobile-1.3.1.js"></script>
在意顺序。

  js获取编辑器的剧情

1.5 js 代码参加之处

js 代码平时在三个职分参预的,
1.5.1 在head标签中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
        <script src="../a.js"></script>  
</head>
<body >

</body>
</html>


// a.js 
alert('hello world')

而是这种办法在js 中是不也许访谈到dom属性的, 因为浏览器的在加载成功js 就及时施行了, 可是这时候html还尚无加载出来, 所以不可能访谈到dom的, 化解的格局就是用body.onload事件加载要访谈dom的js代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="../a.js"></script>  
</head>
<body >
  <div id="data">123456</div>
</body>
</html>


// a.js 
var div = document.getElementById('data'); // null 拿不到id为data的dom属性
console.log(div) // null
// 解决的方法 用onload事件加载要访问dom属性的js代码
document.body.onload = function() {
  var div = document.getElementById('data'); // 可以拿到dom属性
  console.log(div) // dom 对象
}

还会有八个难点正是浏览器在加载js代码的时候是会堵塞html 代码的加载的,要等js 加载完成才会去加载html的, 所以如若js代码量十分的大或客户的互连网相当的慢就能够合世浏览器的白屏了, 那样客户体验十分不好, 所以平日不会放多量的js代码在head标签中, 放也是放很微量的js代码

//webSocket定义
.factory('socket', function($rootScope){
    var socket = io.connect();
    return {
        on: function(eventName, callback){
            socket.on(eventName, function(){
                var args = arguments;
                $rootScope.$apply(function(){
                    callback.apply(socket, args);
                });
            });
        },
        emit: function(eventName, data, callback){
            socket.emit(eventName, data, function(){
                var args = arguments;
                $rootScope.$apply(function(){
                    if(callback){
                        callback.apply(socket, args);
                    }
                });
            });
        }
    }
});

三、在</head>在此之前参预<meta charset="UTF-8"> 以扶持普通话。

 rails页面中加入以下表单

1.5.2 在html事件中投入js代码

这种方法雷同会存在下面1.5.1的标题, 何况在这里种办法, 还有只怕会更难保证了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

</head>
<body >
  <div id="data" onclick="var div = document.getElementById('data'); var conent = document.getElementById('conent'); conent.innerHTML = div.innerHTML">123456</div>
  <div id= "content"></div> 
</body>
</html>
// 上面的只是很少的功能, 如果再多点就基本无法维护了

public/js/controllers/controllers.js中加入

 

  <%= form_for @article do |f| %>
    <%= f.kindeditor :content, :editor_id => 'my_editor' %>
  <% end %>
1.5.3 在body 最后边用script标签 参与js代码

这种办法未有上面三种的难点,因为js代码是在css 和html的背后 所以不会因为加载js代码而出现白屏了,然而在html的图片一点都不小依然加载别的大的能源的时候, 会现身js尚未加载成功,而html代码和css代码加载成功了, 做成的页面假死情形(轮播图不动, 开关点击没效果的动静 因为js还不曾加载回来, 浏览器在加载大的图纸和能源卡塔尔

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

</head>
<body >
  <div id="data">123456</div>
  <script src="../a.js"></script>

</body>
</html>


// a.js 
var div = document.getElementById('data'); // null 拿不到id为data的dom属性
console.log(div) // null
// 解决的方法 用onload事件加载要访问dom属性的js代码
document.body.onload = function() {
  var div = document.getElementById('data'); // 可以拿到dom属性
  console.log(div) // dom 对象
}
//投票详情
.controller('PollItemCtrl', function($scope, $routeParams, socket, Poll){
    Poll.get($routeParams.pollId).then(function(data){
        $scope.poll = data;
    })
    //监听当前用户
    socket.on('myvote', function(data){
        console.dir(data);
        if(data._id === $routeParams.pollId){
            $scope.poll = data;
        }
    });
    //监听投票后的数据
    socket.on('vote', function(data){
        console.dir(data);
        if(data._id === $routeParams.pollId){
            $scope.poll.choices = data.choices;
            $scope.poll.totalVotes = data.totalVotes;
        }
    });
    //投票
    $scope.vote = function(){
        var pollId = $scope.poll._id,
            choiceId = $scope.poll.userVote;
        if(choiceId){
            var voteObj = {
                poll_id : pollId,
                choice: choiceId
            }
            socket.emit('send:vote', voteObj);
        }else{
            alert('请选择一个选项');
        }
    };
})

File,解压获得其JavaScript, CSS和images。放到/assets/www/js目录下。如图:【个中jquery.js是从demos的js目录里复制...

    js

1.6 noscript 标签

因为浏览器有五个剥夺js脚本的选项, 所以就有了noscript标签, 那个标签是用来在禁用js脚本的浏览器提示顾客的,

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

</head>
<body >
  <div id="data">123456</div>
  <script src="../a.js"></script>
  <noscript>不让js运行不给用, 哈哈哈哈</noscript>
</body>
</html>

这里是客商端的拍卖,以上正是全部代码了
工程地方已经上传到GitHub上了
能够透过以下地方查看或下载
代码查看

  my_editor.html();

  

  

 

本文由星彩网app下载发布于计算机编程,转载请注明出处:rails使用Kindeditor网页编辑器,Mobile和PhoneGap混合开

TAG标签: 星彩网app下载
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。