博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
TinyMCE 富文本编辑器 ━━ 自定义插件之弹窗基础设置(整理)
阅读量:4116 次
发布时间:2019-05-25

本文共 3136 字,大约阅读时间需要 10 分钟。

TinyMCE弹窗很多时候并不需要单独做一个页面去引入,如非必要,直接利用现有配置我觉得更加合适。

这里先将stackoverflow回帖中的精华整理一下:

原贴引用

LE: textbox params: textbox settings table
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 , since it’s more useful than the new one it’s the only documentation available now

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 : '

container

is ANY html i guess...
but needs some styling?!?
' }, {
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"} ]});

展示如图

tinymce body element types

//获得选中内容editor.selection.getContent(txt);//修改选中内容editor.selection.setContent(txt);//获得全部内容editor.getContent(txt);//修改全部内容editor.setContent(txt);

转载地址:http://hpkpi.baihongyu.com/

你可能感兴趣的文章
深入理解JavaScript之揭秘命名函数表达式
查看>>
【前端面试题】—26道HTTP和HTTPS的面试题(附答案)
查看>>
设计模式之建造者模式
查看>>
【前端面试题】—19道有关前端测试的面试题(附答案)
查看>>
【前端面试题】—21道有关移动端的面试题(附答案)
查看>>
9种日常JavaScript编程中经常使用的对象创建模式
查看>>
深入理解JavaScript之立即调用的函数表达式
查看>>
设计模式之工厂模式
查看>>
程序员一大误区:盲目求追新技术,说的是你吗
查看>>
Function模式使用技巧汇总
查看>>
【前端面试题】—18道有关混合开发的面试题(附答案)
查看>>
深入理解JavaScript之变量对象(Variable Object)
查看>>
【前端面试题】—53道常见NodeJS基础面试题(附答案)
查看>>
设计模式之装饰者模式
查看>>
【一起读书】40个来自CSS世界中的实用技巧汇总
查看>>
解决jquery使用on()方法绑定事件被执行多次的问题
查看>>
【前端面试题】—有关CSS预编译、管理工具和网络安全的相关面试题
查看>>
设计模式之外观模式
查看>>
深入理解JavaScript与DOM
查看>>
3种前端实现.md文件转换成.html文件的方式
查看>>