基於bootstrap的編輯器summernote學習一
最近接觸到的bootstrap真的是很酷炫,對於我這種不會前端的人來說,就是。好,今天我們來學習一下summernote。
直接放出程式碼大家看下,如何在網頁中創建出summernote編輯器。1、線上引用summernote的css和js。2、網頁中定義div顯示編輯器。3、初始化編輯器。
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html>//html5的定義,如果不這麼定義編輯器格式會有問題 <html> <head> <span style="color:#3366FF;"><script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css"> <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <link href="http://cdn.bootcss.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"> <link rel="stylesheet" href="http://cdn.bootcss.com/summernote/0.5.1/summernote.css" /> <script src="http://cdn.bootcss.com/summernote/0.5.1/summernote.min.js"></script></span> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> </head> <body> <span style="color:#CC6600;"><div class="container"> <div id="summernote">Hello summernote</div> </div> <script></span> <span style="color:#990000;">$(document).ready(function() { $('#summernote').summernote({ height:300, focus:true, maxHeight:null, minHeight:null, }); });</span> </script> </body> </html>
效果如圖:
為大家轉一篇文章:http://blog.geekcome.com/bootstrap-online-text-editor-based-on-the-jquery-plugin-summernote-rpm,裡面有更加詳細的summernote教程和一些基本方法。
相關推薦
基於bootstrap的編輯器summernote學習一
最近接觸到的bootstrap真的是很酷炫,對於我這種不會前端的人來說,就是。好,今天我們來學習一下summernote。 直接放出程式碼大家看下,如何在網頁中創建出summernote編輯器。1、線上引用summernote的css和js。2、網頁中定義d
基於bootstrap的編輯器summernote學習三
經過前面兩篇文章的鋪墊,接下來就是重點了,最原始的summernote的圖片上傳功能還未完善,現在我們要做的就是修改這個功能,使其功能完善派上用場。 summernote提供了一些方法的重寫,我們就來重寫其上傳圖片的方法onImageUpload,然後將da
Laravel學習筆記之基於PHPStorm編輯器的Laravel開發
引言 本文主要講述在PHPStorm編輯器中如何使用PHPStorm的Laravel外掛和Laravel IDE Helper來開發Laravel程式,結合個人積累的一點經驗來說明使用PHPStorm編輯器來開發程式還是很順手的,內容主要基於PHPStorm官方文件Laravel Developm
Unity編輯器擴充套件學習筆記(一)——新增選單選項
以前一直沒用到編輯器擴充套件這一塊,上一次用還是當初在培訓機構老師教編寫打包工具的時候,那時候剛接觸unity聽不大懂也不知道幹啥用。轉眼就過去了好久。 最近遇到一些情況,有時候需要修改多個GameObject身上的屬性,有時候需要按照規律建立多個GameObject,這些
UEditor編輯器_記一次開發
alt aid tex 一次 .get html asp 初始化 下載 1.UEditor編輯器官網:http://ueditor.baidu.com/website/ 2.下載文件:選擇 1.4.3.3 .Net版本 UTF-8板 3.建一個ueditor文件夾,將下
Vim編輯器——入門學習
vim模式介紹 以下介紹內容來自維基百科:從vi演生出來的Vim具有多種模式,這種獨特的設計容易使初學者產生混淆。幾乎所有的編輯器都會有插入和執行命令兩種模式,並且大多數的編輯器使用了與Vim截然不同的方式
Unity 編輯器擴充套件總結 一:編輯器開發入門
編輯器擴充套件總結 工欲善其事必先利其器 引言: 在專案開發中,編輯器擴充套件為開發者提供了開發自定義工具的功能,讓開發者更加便利地使用編輯器開發專案。近期小生一直在學習編輯器擴充套件的知識,發現網路上關於編輯器知識點的部落格較為零散且混亂。當然,有一些大佬已經總結的很
Linux學習——編輯器Vim學習增項操作①
取消查詢操作 :set hlsearch 查詢時高亮顯示 :nohl 取消查詢操作帶來的高亮 vim命令列的支援 支援補全功能 tab鍵 支援縮寫 例如 :set autoindent 可以寫成:set ai 關於vim命令列歷史 :history 檢視v
編輯器三劍客(一)Sublime 安裝、啟用、漢化教程
前言 Sublime的灰色簡潔風格、簡單的佈局、強大的功能一下就圈粉了,這也是我最開始使用的一款編輯器,今天給大家寫一篇關於Sublime的安裝、啟用、漢化一條龍的教程,豬哥的口號是:做全網最詳細的啟用教程! 官網:http://www.sublimetext.com/ 簡介:A
Unity3D編輯器擴充套件(五)——常用特性(Attribute)以及Selection類 Unity3D編輯器擴充套件(一)——定義自己的選單按鈕 Unity3D編輯器擴充套件(二)——定義自己的視窗 Unity3D編輯器擴充套件(三)——使用GUI繪製視窗 Unity3D編輯器擴充套件(四)—
前面寫了四篇關於編輯器的: Unity3D編輯器擴充套件(一)——定義自己的選單按鈕 Unity3D編輯器擴充套件(二)——定義自己的視窗 Unity3D編輯器擴充套件(三)——使用GUI繪製視窗 Unity3D編輯器擴充套件(四)——擴充套件自己的元件 今天我們來講解在編輯器擴充套件中我們常用的特
一個簡約漂亮的富文字編輯器-summernote
首先是引入:<linkhref="~/Content/summernote/dist/summernote.css"rel="stylesheet"/> <scriptsrc="~/Content/summernote/dist/summernote.js"
關於富文字編輯器summernote的基本使用(二)
初始化配置 通過配置option和元件來自定義編輯器 自定義工具欄,彈出框 summernote允許自定義工具欄` $('#summernote').summernote({ toolbar: [ // [groupName, [li
unity編輯器拓展二——一鍵調整scene中物件座標朝向
1.描述 在專案中,我們遇到很多這種情況,美術製作的時候從來不管座標朝向,真正使用起來就會有各種問題。 需要美術來調整座標朝向的時候,物體數量很多,就會很麻煩,很枯燥的工作,還得耐主性子一個一個調整。 如圖,我們今天要做的是不動任何物體的情況下,一鍵控
Unity Editor 編輯器擴充套件 十一 Inspector可排序列表
目錄 可排序列表簡單使用 建立如下指令碼並掛載到物體上: using UnityEngine; using System.Collections; public class Example1 : MonoBehaviour { [
元資料編輯器-週記(一)
回顧思路: 1.需求:(11.16-11.24/2017) 2.完成路線: (1)基本架構搭建完成(新建表的按鈕(content),欄位顯示區域,欄位填寫提交區域); (2)點選按鈕–》新建表並顯示 (3)提交欄位(提交觸發儲存post——>後臺
在無GUI的Linux環境下將vim編輯器打造成一款Python開發IDE
vim編輯器對於每一個IT從業人員來說肯定不陌生,除了一般的文件編輯功能以外,還可以通過vim來打造一個屬於我們自己的IDE。作為一名Python開發使用者,之前寫Python都是在windows帶G
vi編輯器的學習使用(二十二)
我們在Vi編輯器的學習使用(六)學習了基本的視覺化模式,這時我們可以執行簡單的視覺化命令.在這裡我們將會討論更多的與視覺化相關的命令.這些命令中的許多隻有很少的觀眾,如果我們可以看這一次的學習,也許這很少的觀眾中就會包括我們.我們在Vi編輯器的學習使用(四)知道了如何來用暫存
vscode等編輯器正則一鍵剔除註釋的方法
pre 頁面 bsp 匹配 vscode 一鍵 bubuko class img 匹配HTML單行註釋: <!--(.*?)--> 匹配HTML多行註釋: <!--([\s\S|\r]*?)-->
鳥哥的Linux私房菜-第10/11/12/13章(vim程序編輯器、學習bash、正則表達式與文件格式化處理、學習Shell Scripts)
重定向 數據文件 bin 情況下 control 入侵檢測 nts 背景 成了 第10章 vim程序編輯器 可以將vim看做vi的進階版本,vim可以用顏色或底線等方式來顯示出一些特殊的信息。 為何要學習vim?因為: a. 所有的 Unix Like 系統都會內
unity編輯器擴充套件學習
擴充套件編輯器實際上就是在unity選單欄中新增一些按鈕,可以一鍵執行一些重複性的工作。 一.新增按鈕 1.簡單使用MenuItem特性 using UnityEngine; using UnityEditor; public class Tools { [MenuItem("Tools/test