首页 > 网站 > WEB开发 > 正文

jQuery富文本编辑器Notebook

2024-04-27 15:16:18
字体:
来源:转载
供稿:网友

文件链接:点击跳转百度云

这是一个非常简单轻巧实用的富文本编辑器notebook,它是基于jquery的插件,使用简单快捷。下面来看下他的用法吧

引入核心文件,即添加FontAwesome CSS和jQuery,Notebook css来你页面的头:

<link href="css/font-awesome.css" rel="stylesheet"><link rel="stylesheet" type="text/css" href="src/js/jquery.notebook.css">

创建编辑器所需的html代码

<div class="my-editor"></div>

写入JS,实现编辑器功能

$(document).ready(function(){ $('.my-editor').notebook();});

可用命令

按Ctrl /命令B – 粗体 按Ctrl /命令我 – 斜体 按Ctrl /命令u – 下划线 按Ctrl /命令F1 – 标题1 按Ctrl /命令F2 – 标题2 按Ctrl /命令z – 撤消

选项

以下是支持的选项和它们的默认值:

$.fn.notebook.defaults = { autoFocus: false, placeholder: 'Your text here...', mode: 'multiline', //多行或内嵌 modifiers: ['bold', 'italic', 'underline', 'h1', 'h2', 'ol', 'ul', 'anchor']};

转载请注明:jQ酷 » jQuery富文本编辑器Notebook


发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表