jQuery和FontAwesome 最小富文本编辑器 RichText

  • 源码大小:55.58KB
  • 所需积分:1积分
  • 源码编号:19JP-3258
  • 浏览次数:484次
  • 最后更新:2023年05月23日
  • 所属栏目:文本
我要下载
加入收藏
本站默认解压密码:19jp.com 或 19jp_com

简介

只是所见即所得富文本编辑器的另一个jQuery实现,它使用Font Awesome Iconic Font作为编辑器图标。根据AGPL-3.0许可。

如何使用它:

1.加载所需的Font Awesome 4或Font Awosome 5标志性字体:

<link rel="stylesheet" href="/path/to/font-awesome.min.css" />

2.加载richtext.min.css格式为编辑器设置样式。

<link rel="stylesheet" href="richtext.min.css">

3.加载JQuery库和richtext.min.js格式在网页的末尾。

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/jquery.richtext.min.js"></script>

4.创建法线文本区域元素。

<textarea class="content" name="example"></textarea>

5.调用插件将转换文本区域元素转换为基本的所见即所得富文本编辑器。

$('.content').richText();

6.通过覆盖以下参数选项来自定义编辑器。

$('.content').richText({

  // text formatting
  bold: true,
  italic: true,
  underline: true,

  // text alignment
  leftAlign: true,
  centerAlign: true,
  rightAlign: true,
  justify: true,

  // lists
  ol: true,
  ul: true,

  // title
  heading: true,

  // fonts
  fonts: true,
  fontList: ["Arial",
    "Arial Black",
    "Comic Sans MS",
    "Courier New",
    "Geneva",
    "Georgia",
    "Helvetica",
    "Impact",
    "Lucida Console",
    "Tahoma",
    "Times New Roman",
    "Verdana"
  ],
  fontColor: true,
  fontSize: true,

  // uploads
  imageUpload: true,
  fileUpload: true,

  // media
  videoEmbed: true,

  // link
  urls: true,

  // tables
  table: true,

  // code
  removeStyles: true,
  code: true,

  // colors
  colors: [],

  // dropdowns
  fileHTML: '',
  imageHTML: '',

  // translations
  translations: {
    'title': 'Title',
    'white': 'White',
    'black': 'Black',
    'brown': 'Brown',
    'beige': 'Beige',
    'darkBlue': 'Dark Blue',
    'blue': 'Blue',
    'lightBlue': 'Light Blue',
    'darkRed': 'Dark Red',
    'red': 'Red',
    'darkGreen': 'Dark Green',
    'green': 'Green',
    'purple': 'Purple',
    'darkTurquois': 'Dark Turquois',
    'turquois': 'Turquois',
    'darkOrange': 'Dark Orange',
    'orange': 'Orange',
    'yellow': 'Yellow',
    'imageURL': 'Image URL',
    'fileURL': 'File URL',
    'linkText': 'Link text',
    'url': 'URL',
    'size': 'Size',
    'responsive': 'Responsive',
    'text': 'Text',
    'openIn': 'Open in',
    'sameTab': 'Same tab',
    'newTab': 'New tab',
    'align': 'Align',
    'left': 'Left',
    'justify': 'Justify',
    'center': 'Center',
    'right': 'Right',
    'rows': 'Rows',
    'columns': 'Columns',
    'add': 'Add',
    'pleaseEnterURL': 'Please enter an URL',
    'videoURLnotSupported': 'Video URL not supported',
    'pleaseSelectImage': 'Please select an image',
    'pleaseSelectFile': 'Please select a file',
    'bold': 'Bold',
    'italic': 'Italic',
    'underline': 'Underline',
    'alignLeft': 'Align left',
    'alignCenter': 'Align centered',
    'alignRight': 'Align right',
    'addOrderedList': 'Add ordered list',
    'addUnorderedList': 'Add unordered list',
    'addHeading': 'Add Heading/title',
    'addFont': 'Add font',
    'addFontColor': 'Add font color',
    'addFontSize': 'Add font size',
    'addImage': 'Add image',
    'addVideo': 'Add video',
    'addFile': 'Add file',
    'addURL': 'Add URL',
    'addTable': 'Add table',
    'removeStyles': 'Remove styles',
    'code': 'Show HTML code',
    'undo': 'Undo',
    'redo': 'Redo',
    'close': 'Close'
  },

  // privacy
  youtubeCookies: false,

  // preview
  preview: false,

  // placeholder
  placeholder: '',

  // dev settings
  useSingleQuotes: false,
  height: 0,
  heightPercentage: 0,
  id: "",
  class: "",
  useParagraph: false,
  maxlength: 0,
  useTabForNext: false,

  // callback function after init
  callback: undefined,

});

更新日志:

2022-12-15

  • chore(日志):删除console.Log

2022-11-26

  • 专长(背景):添加文本背景颜色功能

2021-12-10

  • 通过adaptiveHeight和粘性工具栏改善用户体验

2021-12-10

  • 添加占位符选项
  • 固定-未指定按钮类型

2021-02-26

  • 在同一页面上通过输入元素和RichText编辑器实现选项卡切换
  • 正在清理事件处理程序

2020-6-21

  • 初始化编辑器后添加回调

2019-11-20

  • 设置文本格式时固定光标

2019-08-28

  • JS更新

2019-04-24

  • 修复引导站点的工具栏布局

2019-04-13

  • 添加最大长度功能

2019-01-17

  • 修复多个编辑器的撤消/重做历史记录

2018-08-27

  • 修复使用p标签时的响应视频嵌入

2018-08-18

  • 次要布局更新

2018-07-17

  • 修复FF中的键盘选择问题

2018-07-16

  • youtube视频默认使用youtube-nocookie.com

2018-06-13

  • youtube视频默认使用youtube-nocookie.com

2018-05-26

  • URL弹出窗口的小修复
  • 修复选择、框架和小弹出问题

2018-05-01

  • 实现.unRichText()以取消设置textarea.richtext()

2018-03-14

  • 更新字体大小功能。

2018-02-21

  • 修复图像定位

2018-02-09

  • 修复选择问题

2018-01-25

  • 添加缺少的翻译和标题属性

2018-01-24

  • 自动删除空标签并防止将h[1-6]节点与其他h[1-6]nodes包装

2018-01-15

  • 为链接和图像添加上下文菜单

2018-01-03

  • 轻微的代码改进

2017-12-09

  • 修复代码视图和编辑器之间的切换

2017-11-21

  • 修复多个编辑器的粗体、斜体和下划线格式

2017-10-19

  • 修复选择问题

2017-10-01

  • 修复恢复选择

2017-09-20

  • 修复编辑器和代码视图之间的选择

2017-09-18

  • 将所选内容从编辑器复制到代码视图

2017-09-15

  • 删除日志。

2017-09-11

  • 修复第一行HTML标记

2017-09-10

  • 为新文本块实现段落选项

2017-09-02

  • 添加字体格式

2017-09-01

  • 更新代码颜色

2017-08-26

  • 通过在表中按TAB键实现添加新行

2017-08-24

  • 允许自定义编辑器高度(百分比)

2017-08-18

  • 修复拖动图像。图像不仅可以在右下角调整大小

2017-08-17

  • 移除控制台输出

2017-08-09

  • 修复冲突

2017-08-04

  • 删除控制台日志

2017-08-01

  • 次要事件侦听器和单引号更新

2017-07-30

  • 一致性更新

2017-07-11

  • 修复Safari选择问题

 

预览截图