瑾忆 admin
一直往前走,别往后看。要知道每一次回头,都会错过一些眼前的风景。 ​​​​
啥也不是 啥也不会 懒癌晚期 广西靓仔
文章
127
微语
181
评论
1036
个人档
Do you like me?
551

来简单了解一下TinyMCE吧

瑾忆 · 3年前
2018-12-16 · 杂七杂八 · 1.4k · 9

TinyMCE 是一个基于浏览器(例如MSIE或Mozilla)的强大的所见即所得的编辑器,它使用户可以方便的编辑HTML内容。

我喜欢它的简洁优美易扩展、自定义组件(工具栏)

特点

  • 易于集成,只需要简短几行代码
  • 支持主题和模板。
  • 易于使用自定义代码扩展(插件和回调)
  • 可定制HTML输出。屏蔽元素和强制属性。
  • 国际语言支持(通过语言包)。
  • 支持多种浏览器, 目前有 Mozilla (PC/Mac/Linux), MSIE (PC) 和 FireFox (PC/Mac/Linux)。

食用方式

<script src="./tinymce/tinymce.min.js"></script>
<script>
tinymce.init({
	skin: "lightgray",
	selector: '#content',    //页面元素选择器
	language: 'zh_CN',    //语言包
	height: '420px',    //高度
	menubar: false,    //禁用菜单

	plugins: [
		"advlist autolink lists link image charmap print preview anchor", 
		"searchreplace visualblocks code fullscreen", 
		"insertdatetime media table contextmenu paste imagetools wordcount",  
		'colorpicker emoticons hr help pagebreak tabfocus textcolor textpattern codesample',
	],
        //工具栏
	toolbar1: "bold italic underline forecolor | link unlink blockquote pagebreak | copy paste charmap removeformat | table  image codesample help |",
	toolbar2: "undo redo styleselect | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | code fullscreen",
	style_formats: [
		{title: "Header 1",format: "h1"}, 
		{title: "Header 2",format: "h2"}, 
		{title: "Header 3",format: "h3"}, 
		{title: "Header 4",format: "h4"}, 
	],
});
//都是可以自定义选择的
</script>
<textarea id="content" name="content"></textarea>

Demo

不知道你们觉得怎么样,反正我觉得蛮好的。

个人小集成的
December 16,2018 14:00:51
阅读1.4k
撰写评论
Comments
1581039632
6.0.1怎么升级,可以出个教程吗
#3 17小时前
回复
汉娜
睡不着怎么办。
#2 3年前 (2018-12-24)
回复
瑾忆
@汉娜:凉拌炒鸡蛋
#2-1 3年前 (2018-12-24)
回复
1梦
赞 有空试试看
#1 3年前 (2018-12-19)
回复
瑾忆
@1梦:多好玩啊
#1-1 3年前 (2018-12-19)
回复
1梦
@瑾忆:这EMLOG有插件吗?,
#1-2 3年前 (2018-12-19)
回复
瑾忆
@1梦:没有,自己改上去就好了
#1-3 3年前 (2018-12-19)
回复
1梦
@瑾忆:简直差劲....
#1-4 3年前 (2018-12-19)
回复
瑾忆
@1梦:做成插件容易与原来那个产生冲突的。
#1-4 3年前 (2018-12-19)
回复