编程开源技术交流，分享技术与知识

网站首页 > 开源技术 正文

tinymce 富文本编辑器 常用插件（富文本编辑器app）

wxchong 2024-09-22 16:34:57 开源技术 78 ℃ 0 评论

白雨青工作站发文地址：tinymce 富文本编辑器 常用插件-白雨青工作站

Advanced Tables 基于table插件的增强表格插件，添加了排序功能。

tinymce.init({
  plugins: 'table advtable',
  menubar: 'table'
});

Anchor 锚点插件

tinymce.init({
  selector: "textarea",  // change this value according to your HTML
  plugins: "anchor",
  toolbar: "anchor",
  menubar: "insert"
});

Autolink 自动识别创建连接

tinymce.init({
  selector: "textarea",  // change this value according to your HTML
  plugins: "autolink"
});

Autoresize 自动调整编辑区大小

tinymce.init({
  selector: "textarea",  // change this value according to your HTML
  plugins: "autoresize"
});

autoresize_bottom_margin 编辑区下外边距

tinymce.init({
  selector: "textarea",  // change this value according to your HTML
  plugins: "autoresize",
  autoresize_bottom_margin: 50
});

autoresize_on_init 是否在初始化的时候调整大小

autoresize_overflow_padding 编辑区内边距

max_height 最大高度

min_height 最小高度

Code 用于查看文章HTML代码插件

tinymce.init({
  selector: "textarea",  // change this value according to your HTML
  plugins: "code",
  toolbar: "code",
  menubar: "tools"
});

Full Page

设置文档源数据，如title、keyword和description等信息，这些信息将会出现在html的head标签内。结合code插件使用，可以查看fullpage插件的效果。

tinymce.init({
  selector: "textarea",  // change this value according to your HTML
  plugins: "fullpage",
  menubar: "file",
  toolbar: "fullpage"
});　

fullpage_default_doctype 设置doctype，默认值是"<!DOCTYPE html>"

fullpage_default_encoding 设置默认编码，默认值是无

fullpage_default_font_size 设置body默认字体大小

fullpage_default_font_family 设置body默认字体样式

fullpage_default_title 设置默认标题

Full Screen

全屏插件使TinyMCE编辑区填充浏览器的可视区域。

tinymce.init({
  selector: "textarea",  // change this value according to your HTML
  plugins: "fullscreen",
  menubar: "view",
  toolbar: "fullscreen"
});　　

Link

支持在文档中插入一条连接

tinymce.init({
  selector: "textarea",  // change this value according to your HTML
  plugins: "link",
  menubar: "insert",
  toolbar: "link"
});

Image

图片插件

tinymce.init({
  selector: "textarea",  // change this value according to your HTML
  plugins: "image",
  menubar: "insert",
  toolbar: "image",
  image_list: [
    {title: 'My image 1', value: 'https://www.example.com/my1.gif'},
    {title: 'My image 2', value: 'http://www.moxiecode.com/my2.gif'}
  ]
});　　

file_picker_callback

file_picker_types

image_caption

image_list 预设图片列表，用处不大。

image_advtab 图片增强功能，用处不大。

image_class_list

image_description 是否展示图片描述字段输入框，默认是true展示。

image_dimensions 是否展示图片尺寸输入框，默认是true展示。

image_prepend_url 设置图片前缀。

image_title 是否展示图片标题输入框，默认是false不展示。

image_uploadtab 是否展示上传标签页，默认是true展示，必须配合image_upload_url使用。

images_upload_base_path 设置图片的基础路径，上传成功之后返回的图片路径加上该值即为图片的完整路径。

images_upload_credentials 上传操作是否携带证书。

images_upload_handler 设置一个函数来处理图片上传，函数可接收三个参数blobInfo、success和failure，第一个参数是一个FormData类型的表单数据，第二个参数是上传成功回调函数，最后一个是上传失败回调函数。

images_upload_url 设置上传路径。

Tags：

猜你喜欢

本文暂时没有评论，来添加一个吧(●'◡'●)

欢迎 你 发表评论:

最近发表
标签列表
赣ICP备2023011894号-2