jquery.qeditor——輕量級文本編輯器

時間 2019-11-13

標籤 jquery.qeditor jquery qeditor 輕量級文本編輯器欄目 JQuery 简体版

原文原文鏈接

1、jquery.qeditor簡介

一、連接地址

二、其餘富文本編輯器的優缺點

首先，正如你在找的不少富文本編輯器，功能有不少，也很複雜，可是不少功能根本用不到，儘管不少編輯器提供選擇功能的功能，但又界面很差看，或者加載較慢，代碼較多javascript

其次，不少編輯器調用麻煩，編輯的內容有太多的style標籤，影響佈局。css

3.jquery.qeditor編輯器功能介紹

1.界面乾淨整潔，很是適合於小博客或功能排版功能較少的頁面html

2.全部生成的標籤都是html的標準標籤，沒有css的樣式，保持了代碼的整潔java

3.自動根據一個 textarea 綁定，讓編輯器無縫的和 form 結合jquery

4.使用 Font-awsome 做爲 Toolbar 的按鈕圖標，使用簡單，而且支持 Retina Displaygit

5.沉浸式的全屏界面，讓你在全屏界面找到真實預覽的感受（這個真心推薦）github

4.我的認爲jquery.qeditor的小小不足

1.兼容性略有不足，其做者並無測試IE，可是我試了試，在IE9（包括）如下都不可使用web

2.沒有顏色的設置及字體的設置（其實爲了保持內容及代碼的乾淨，這些能夠沒有）編輯器

2、使用jquery.qeditor

jquery.qeditor的使用很簡單，這裏作一個簡單的示例與說明，能夠下載其git上的demo，在本地就行測試佈局

一、引入文件

該編輯器是基於jquery的，圖標是基於Font-awsome，此外，還要引入必須的一個js和css文件，以下：

<!DOCTYPE html>
<html>
<head>
      <meta charset=utf-8">
      <title>jquery.qeditor</title>
      <link href="//libs.baidu.com/fontawesome/4.0.3/css/font-awesome.min.css" rel="stylesheet">
      <link rel="stylesheet" href="css/jquery.qeditor.css" type="text/css">
      <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
      <script src="js/jquery.qeditor.js" type="text/javascript"></script>
</head>
<body>
    <textarea id="post_body" name="body" class="textarea" placeholder="Type your post"></textarea>
    <script type="text/javascript">
            $("#post_body").qeditor({});
    </script>
</body>
</html>

基本的格式即是如此，若是想讓邊界好看點，還能夠本身寫一點點的css，以下：

二、加點樣式

<style type="text/css" media="screen">
  .textarea {
        background-color: #ffffff;
        border: 1px solid #cccccc;
        -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
        -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
        -webkit-transition: border linear .2s, box-shadow linear .2s;
        -moz-transition: border linear .2s, box-shadow linear .2s;
        -o-transition: border linear .2s, box-shadow linear .2s;
        transition: border linear .2s, box-shadow linear .2s;
        padding: 4px 6px;
        font-size: 14px;
        line-height: 20px;
        color: #555555;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
        vertical-align: middle;
        outline: none;
        height: 400px;
  }
  </style>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。