基於bootstrap的編輯器summernote學習一

阿新 • • 發佈：2019-01-19

最近接觸到的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多行註釋：

鳥哥的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

基於bootstrap的編輯器summernote學習一

相關推薦