澳门至尊网站-首页

您的位置:澳门至尊网站 > 软件综合 > rails使用Kindeditor网页编辑器

rails使用Kindeditor网页编辑器

2019-10-22 21:29

澳门至尊网站,在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>
// 上面的只是很少的功能, 如果再多点就基本无法维护了
  <%= 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 对象
}

    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>
  my_editor.html();

  

  

 

本文由澳门至尊网站发布于软件综合,转载请注明出处:rails使用Kindeditor网页编辑器

关键词:

  • 上一篇:没有了
  • 下一篇:没有了