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

By admin in 4858.com on 2019年3月27日

在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'
rails使用Kindeditor网页编辑器,Mobile和PhoneGap混合开发。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);

 4858.com 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遍, 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代码

4858.com,那种措施相同会设有上面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();

  

  

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有