如何从零开发一个Tinymce编辑器输入框，下拉框插件

[种地的码农]

先看看效果

 

 

 

Tinymce编辑器中插入--input输入框，下拉框

支持下拉选择，支持自定义ID命名，支持自定义Style样式，支持自定义下拉选择提示内容。

直接上所有代码，有问题可以联系我！！！

tinymce.PluginManager.add('jb-input', function (editor, url) {
	const openDialog = function () {
		let selectNode = editor.dom.getParent(editor.selection.getNode(), '[data-jb-input]')
		let initData = initDataFunc(selectNode)
		return editor.windowManager.open({
			title: '输入框配置',
			body: {
				type: 'panel',
				items: [
					{
						type: 'input',
						name: 'id',
						label: '唯一ID'
					},
					{
						type: 'input',
						name: 'width',
						label: '宽度'
					},
					{
						type: 'input',
						name: 'dataList',
						label: '候选词(使用,分隔)'
					}
				]
			},
			buttons: [
				{
					type: 'cancel',
					text: 'Close'
				},
				{
					type: 'submit',
					text: 'Save',
					primary: true
				}
			],
			initialData: initData,
			onSubmit: function (api) {
				const data = api.getData()
				console.log(data)
				// 判断是否是编辑
				if (selectNode) {
					let inputNode = selectNode.getElementsByTagName('input')[0]
					inputNode.style.width = data.width + 'px'
					// 更新dataList
					let dataListNode = selectNode.getElementsByTagName('datalist')[0]
					if (null === dataListNode) {
						dataListNode = document.createElement('datalist')
						dataListNode.id = data.id + '-dataList'
						selectNode.appendChild(dataListNode)
						let dataList = data.dataList.split(',')
						genOption(dataList, dataListNode)
						api.close()
					} else {
						dataListNode.innerHTML = ''
						let dataList = data.dataList.split(',')
						genOption(dataList, dataListNode)
						api.close()
					}
				} else {
					let content = `<span data-jb-input><input id="${data.id}" style="width: ${data.width}px" class="jb-input" list="${data.id}-dataList">`
					let dataList = data.dataList.split(',')
					if (dataList.length > 0) {
						content += `<datalist id="${data.id}-dataList">`
						for (let i = 0; i < dataList.length; i++) {
							content += `<option value="${dataList[i]}">`
						}
						content += `</datalist>`
					}
					content += `</span>`
					// 将输入框内容插入到内容区光标位置
					editor.insertContent(content)
					api.close()
				}
			}
		})
	}
	// 生成option
	const genOption = (dataList, dataListNode) => {
		if (dataList.length > 0) {
			for (let i = 0; i < dataList.length; i++) {
				let optionNode = document.createElement('option')
				optionNode.value = dataList[i]
				dataListNode.appendChild(optionNode)
			}
		}
	}

	// 初始化数据
	const initDataFunc = (selectNode) => {
		if (selectNode) {
			let dataList = []
			if (selectNode) {
				// 遍历所有的option
				let options = selectNode.getElementsByTagName('option')
				for (let i = 0; i < options.length; i++) {
					let option = options[i]
					dataList.push(option.value)
				}
			}
			let inputNode = selectNode.getElementsByTagName('input')[0]
			if (null === inputNode) {
				return {}
			}
			return {
				id: inputNode.id,
				width: parseFloat(inputNode.style.width).toString(),
				dataList: dataList.join(',')
			}
		} else {
			return {}
		}
	}

	// 注册一个工具栏按钮名称
	editor.ui.registry.addButton('jb-input', {
		text: '输入框',
		onAction: function () {
			openDialog()
		}
	})

	// 注册一个菜单项名称 menu/menubar
	editor.ui.registry.addMenuItem('jb-input', {
		text: '输入框',
		onAction: function () {
			openDialog()
		}
	})

	// 删除
	editor.ui.registry.addButton('jb-input-delete', {
		tooltip: 'Delete',
		text: '删除',
		icon: 'table-delete-table',
		onAction: function () {
			editor.execCommand('jbDeleteInput')
		}
	})
	editor.addCommand('jbDeleteInput', function () {
		try {
			editor.dom.getParent(editor.selection.getNode(), '[data-jb-input]').remove() //获得选中节点 删除即可
			editor.focus()
		} catch (error) {
			console.error(error)
		}
	})

	//上下文菜单配置 （已注册的按钮）
	const openurlToolbar = 'jb-input-delete \\| jb-input'
	if (openurlToolbar.length > 0) {
		//判断是否是 Openurl 用于触发上下文菜单
		const isOpen = function (_openurl) {
			return editor.dom.is(_openurl, '[data-jb-input]') && editor.getBody().contains(_openurl)
		}
		//注册上下文菜单
		editor.ui.registry.addContextToolbar('jb-input', {
			predicate: isOpen,
			items: openurlToolbar,
			scope: 'node',
			position: 'node'
		})
	}

	return {
		getMetadata: function () {
			return {
				//插件名和链接会显示在“帮助”→“插件”→“已安装的插件”中
				name: 'jb-input plugin', //插件名称
				url: 'http://exampleplugindocsurl.com' //作者网址
			}
		}
	}
})

 

这个文章写的也不错

制作一个插件 | TinyMCE中文文档中文手册 (ax-z.cn)

如果大家觉得不错，点赞，评论，关注。以后继续分享更多干货。