俄罗斯贵宾会-俄罗斯贵宾会官网
做最好的网站

rails使用Kindeditor网页编辑器

在gemfile中加入(后面版本别丢)

1在html 中的使用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>

   $ 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>

创建配置文件,并且引入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')
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 没有这个问题

  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代码

 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>
// 上面的只是很少的功能, 如果再多点就基本无法维护了

本文由俄罗斯贵宾会发布于编程,转载请注明出处:rails使用Kindeditor网页编辑器

您可能还会对下面的文章感兴趣: