1560天 瑾忆

重要的人越来越少,剩下的人也越来越重要 ​​

来简单了解一下TinyMCE吧

发布于 2年前 / 1.1k 次围观 / 8 条评论 / 杂七杂八 / 瑾忆

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>

QQ截图20181216143059.png

Demo

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

个人小集成的
  1. 2年前 (2018-12-24)
    @

    睡不着怎么办。

    • 2年前 (2018-12-24)
      @ NO

      @汉娜:凉拌炒鸡蛋

  2. 2年前 (2018-12-19)
    @

    赞 有空试试看

    • 2年前 (2018-12-19)
      @ NO

      @1梦:多好玩啊

      • 2年前 (2018-12-19)
        @ NO

        @瑾忆:这EMLOG有插件吗?,

        • 2年前 (2018-12-19)
          @ NO

          @1梦:没有,自己改上去就好了

          • 2年前 (2018-12-19)
            @ NO

            @瑾忆:简直差劲....

        • 2年前 (2018-12-19)
          @ NO

          @1梦:做成插件容易与原来那个产生冲突的。