原创

HTML中使用JS实现文档编辑器

本篇是介绍一款tinymce富文本实现编辑器。

TinyMCE是一个轻量、简洁、功能强大的编辑器，跟其他富文本编辑器相比，有着丰富的插件，支持多种语言，能够满足日常的业务需求并且免费。

首先要引入TinyMCE脚本，直接在head中引入tinymce.min.js文件

<script type="text/javascript" src="你的网站路径/tinymce/tinymce.min.js"></script>

但是上面这种引入需要在官网申请一个api_key,不过是免费的，如果你觉得麻烦，就到官网吧
社区版及开发版官方最新打包地址：https://www.tiny.cloud/get-tiny/self-hosted/
不过官网下载比较慢，国外网站嘛，可以到GitHub下https://github.com/tinymce/
我这边是放在static目录下，需要用到的界面再引入

<script type="text/javascript" src="../tinymce/tinymce.min.js"></script>

TinyMCE本身不支持中文的，要下载需要的汉化包，官网上也有下载https://www.tinymce.com/download/language-packages/
将语言包解压，将js文件放入tinymce根目录下的langs文件夹中（如不存在就自己新建一个）

tinymce.init({
  selector:'#dataInfo',          //&lt;textarea&gt;中为编辑区域
  theme: "modern",                  //主题
  language: "zh_CN",                //语言 ，可自行下载中文，区分大小写
});

如果不想将汉化包放指定langs文件夹下，就需要使用language_url指定语言包存放的URL。

tinymce.init({
  selector: '#dataInfo',
  theme: "modern",                  //主题
  language_url: '/languages/zh_CN.js',
  language:'zh_CN',//语言 ，可自行下载中文，区分大小写
});

TinyMCE初始化，使用tinymce.init()来进行初始化。

tinymce.init({
  selector:'textarea#templateInfo',          //&lt;textarea&gt;中为编辑区域
  theme: "modern",                  //主题
  language: "zh_CN",                //语言 ，可自行下载中文
  height: 500,
  plugins: [                             //插件，可自行根据现实内容删除
         "advlist autolink lists charmap print preview hr anchor pagebreak spellchecker",
         "searchreplace wordcount visualblocks visualchars fullscreen insertdatetime  nonbreaking",
         "save table contextmenu directionality emoticons powerpaste textcolor"
  ],
  powerpaste_word_import: 'propmt',// 参数可以是propmt, merge, clear，效果自行切换对比
  powerpaste_html_import: 'propmt',// propmt, merge, clear
  powerpaste_allow_local_images: true,
  toolbar: "insertfile undo redo | styleselect fontselect fontsizeselect| bold italic | " +
"alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | l      " +
"| print preview fullpage | forecolor backcolor",   //工具栏，可根据需求删除
  style_formats: [                        //初始时提供的默认格式
    {title: 'Bold text', inline: 'b'},
    {title: 'Red text', inline: 'span', styles: {color: '#ff0000'}},
    {title: 'Red header', block: 'h1', styles: {color: '#ff0000'}},
    {title: 'Example 1', inline: 'span', classes: 'example1'},
    {title: 'Example 2', inline: 'span', classes: 'example2'},
    {title: 'Table styles'},
    {title: 'Table row 1', selector: 'tr', classes: 'tablerow1'}
  ]
});

获取编辑框内容，是一个html内容

var htmlData= tinymce.get('templateInfo').getContent();      //此函数可获得编辑框内容

设置编辑框初始化内容

tinymce.get('templateInfo').setContent(obj.fileData);        //此函数可设置编辑框内容

引入TinyMCE富文本后，成功启动项目，效果图如下

正文到此结束

所属分类：前端技术

本文标签： html 富文本编辑器 tinymce编辑器
本文链接： http://www.ysxbohui.com/article/6
版权声明： 本文由狂奔的程序猿原创发布，转载请遵循《署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)》许可协议授权

HTML中使用JS实现文档编辑器

热门推荐

相关文章

关于我

近期评论

网站信息