TinyMCE 富文本编辑器 ━━ 自定义插件之弹窗基础设置(整理)
TinyMCE弹窗很多时候并不需要单独做一个页面去引入,如非必要,直接利用现有配置我觉得更加合适。
这里先将stackoverflow回帖中的精华整理一下:
原贴引用
LE: textbox params: textbox settings table https://www.tinymce.com/docs/api/tinymce.ui/tinymce.ui.textbox/
LE2: you can try and browse all the tinymce.ui.* elements mentioned down and check if it has a settings table, I think it may be used as a valid parameter for body if they have it
LE3: this is the old documentation http://archive.tinymce.com/wiki.php/api4:index, since it’s more useful than the new one it’s the only documentation available now https://www.tinymce.com/docs/api/
editor.windowManager.open({"title": "tinymce body element types","body":[{type : 'listbox',name : 'listbox',label : 'listbox',values : [{ text: 'Test1', value: 'test1' },{ text: 'Test2', value: 'test2' },{ text: 'Test3', value: 'test3' }],value : 'test2' // Sets the default},{type : 'combobox',name : 'combobox',label : 'combobox',values : [{ text: 'Test', value: 'test' },{ text: 'Test2', value: 'test2' }]},{type : 'textbox',name : 'textbox',label : 'textbox',tooltip: 'Some nice tooltip to use',value : 'default value'},{type : 'container',name : 'container',label : 'container',html : '<h1>container<h1> is <i>ANY</i> html i guess...<br/><br/><pre>but needs some styling?!?</pre>'},{type : 'tooltip',name : 'tooltip',label : 'tooltip ( you dont use it like this check textbox params )'},{type : 'button',name : 'button',label : 'button ( i dont know the other params )',text : 'My Button'},{type : 'buttongroup',name : 'buttongroup',label : 'buttongroup ( i dont know the other params )',items : [{ text: 'Button 1', value: 'button1' },{ text: 'Button 2', value: 'button2' }]},{type : 'checkbox',name : 'checkbox',label : 'checkbox ( it doesn`t seem to accept more than 1 )',text : 'My Checkbox',checked : true},{type : 'colorbox',name : 'colorbox',label : 'colorbox ( i have no idea how it works )',// text : '#fff',values : [{ text: 'White', value: '#fff' },{ text: 'Black', value: '#000' }]},{type : 'panelbutton',name : 'panelbutton',label : 'panelbutton ( adds active state class to it,visible only on hover )',text : 'My Panel Button'},{type : 'colorbutton',name : 'colorbutton',label : 'colorbutton ( no idea... )',// text : 'My colorbutton'},{type : 'colorpicker',name : 'colorpicker',label : 'colorpicker'},{type : 'radio',name : 'radio',label : 'radio ( defaults to checkbox, or i`m missing something )',text : 'My Radio Button'}],"width": 450,"height": 180,"buttons": [{"text":"Start uploading","subtype":"primary","onclick":settings.format_function},{"text":"Close","onclick":"close"}]
});
展示如图
//获得选中内容
editor.selection.getContent(txt);
//修改选中内容
editor.selection.setContent(txt);//获得全部内容
editor.getContent(txt);
//修改全部内容
editor.setContent(txt);
TinyMCE 富文本编辑器 ━━ 自定义插件之弹窗基础设置(整理)相关推荐
- tinymce富文本编辑器扩展插件-设置段落间距
项目中使用到tinymce富文本编辑器,由于官方并没有设置段落间距插件,所以自己开发了一个段落间距扩展插件.可以将其配置为toolbar,也可以配置成菜单项. 使用方法: 方式一: 1. 使用npm安 ...
- 前端踩坑之TinyMCE富文本编辑器表情插件报错解决
最近项目中需要使用文本编辑器,比较了下最终选择了TinyMCE这款富文本编辑器. 我安装的是TinyMCE v5但是在使用表情插件的时候,表情一直都出不来,报错信息如下: Uncaught Synta ...
- TinyMCE 富文本编辑器 ━━ 一键排版功能所需正则表达式整理及学习
如果是公文发布,客户往往喜欢直接把word内容复制粘贴,这也导致大量的出错.最近客户的对格式的需求比较强烈,正好借机弄一弄.之前已经放了tinymce的插件及弹窗开发相关内容,今天进入一点关键内容~~ ...
- TinyMCE富文本编辑器自动链接插件 AutoLink配置
TinyMCE富文本编辑器 AutoLink 插件默认是不支持全角字符的,意味着你就算是全角字符,也必须要在字符后面跟随一个空格,然后再跟随网址,这时候地址才会自动转换为超链接 a 标签 通过如下设置 ...
- vue 是否有word编辑控件_GitHub - C84882428/editor-ui: vue集成 tinymce 富文本编辑器,增加导入 word 模板...
editor-ui vue 集成 tinymce 富文本编辑器 自定义 tinymce 富文本编辑器, 在原来的编辑器中增加上传 word 模板 最终展示效果: 主要代码: 整体思路: 1,在编辑器原 ...
- tinymce富文本编辑器的视频插件如何上传本地视频
最近使用了tinymce富文本编辑器的视频上传功能,发现默认只能填写视频链接,不能上传本地的视频.为此,我专门研究下如何上传本地视频. 版本:tinymce版本是^5.0.16,@tinymce/ti ...
- tinymce富文本编辑器的使用
tinymce富文本编辑器的使用 1.基本介绍 tinymce富文本官网:https://www.tiny.cloud/ 中文文档:http://tinymce.ax-z.cn/ tinymce-np ...
- 在vue3.0项目中使用tinymce富文本编辑器
目录 一.安装 二.完整代码 三.事项说明 四.参考文档 之前看了好几篇关于 vue项目中使用 tinymce的文章, import引入大量 tinymce插件, /node_modules/ti ...
- 基于jQuery的富文本编辑器summernote插件的使用教程
基于jQuery的富文本编辑器summernote插件的使用教程 基于jQuery的富文本编辑器summernote插件的使用教程 一:最近项目中遇到使用富文本编辑器的功能, JQuery的富文本编辑 ...
- Tinymce富文本编辑器图片上传即编辑配置详解
Tinymce富文本编辑器 本站使用的也是Tinymce富文本编辑器,非常的好用,就是图片上传和编辑配置上有点麻烦,当时没有看完Tinymce官网的资料,导致浪费了点时间,下面就把图片上传的配置分享给 ...
最新文章
- 提高IIS网站服务器的效率的八种方法 (转载)
- 中国AI创新者论坛将于3月21日在清华大学举办
- vs2015 全局头文件 库文件引用设置方法
- 【机器学习基础】半监督算法概览(Python)
- GEETEST极验召集互联网大佬齐聚光谷,共同探讨交互安全问题
- RHEL 8 - 配置基于安装 ISO 文件的 YUM Repo
- 工业机器人编程与操作(1)工业机器人:发展、分类、ABB工业机器人介绍
- 文件打开模式r,w,a,r+,w+,a+的区别和联系
- 网站在线客服系统源码|在线客服代码下载 (2021最新版)
- 16进制颜色识别和搭配规律 (实用)
- 怎样找回u盘里误删的文件
- JAVA计算机毕业设计漫画网站系统(附源码、数据库)
- telnet 不是内部或外部命令,也不是可运行的程序解决方案
- 智学.com查成绩 html,智学.com查分数
- 河南科技大学计算机专业就业情况,河南科技大学好就业吗?附河南科技大学就业率最高的专业名单...
- leaflet加载OSM地图
- 射频混频器matlab,一个很多射频/天线工程师不知道的神奇网站
- java.io.IOException: unexpected end of stream on https://xxx.xxx.xxx.xxx:84/
- 对象与对象变量 LJY第二周
- 关于mac系统下的一些快捷键符号对应键盘上的键