TinyMCE是一款易用、且功能强悍的所见即所得的富文本编辑器。同类程序有:UEditor、Kindeditor、Simditor、CKEditor、wangEditor、Suneditor、froala等等。

  TinyMCE的优势:

  一、TinyMCE下载

  官方下载:

  github下载:

  Community为社区版,Dev Package为开发版。我建议大家用社区版。

  二者的差别是开发版包含未被压缩过的源码typecho 富文本编辑器,方便开发者学习剖析,魔改部份功能。开发版中包含社区版。

  二、TinyMCE本地化 汉化

  默认状况下,TinyMCE是英语,而且我们下载的TinyMCE软件包默认只是不带英文语言包的typecho 富文本编辑器,因此我们要单独弄一下。

  1、选择可用的语言包下载至本地。

  官方下载地址:

  其它下载地址:

  2、将语言包解压,将js文件装入tinymce根目录下的langs文件夹中(如不存在就自己改建一个),最后路径形如:XXX/tinymce/langs/zh_CN.js

  3、在TinyMCE例子配置参数中指定语言:

  <pre class="pure-highlightjs">`tinymce.init({

selector: '#tinydemo',
language:'zh_CN',//注意大小写
</pre>

  二、TinyMC安装

  TinyMCE是一个功能强悍且灵活的富文本编辑器,可以嵌入至任意Web应用中使用。

  1、解压 tinymce_5.7.1.zip 并把解压后的文件夹放到你的网站根目录。

  2、引入TinyMCE脚本

  在中插入如下这行代码,将tinymce.min.js源文件引进项目。

  <pre class="pure-highlightjs">``</pre>

  3、TinyMCE初始化

  这里我检测用的是“经典版”模式,我的经典版几乎包含了所有的插件,除了“axupimgs”ajax多图上传还要自己去下载。

  <pre class="pure-highlightjs">`

     var editor = tinymce.init({
         selector: '#editor',
         language:'zh_CN',
         height: 500,
         branding: false,
         plugins: "lists advlist anchor autosave code charmap codesample directionality emoticons hr image imagetools insertdatetime link table media pagebreak wordcount preview axupimgs nonbreaking print searchreplace toc", //依赖lists插件
         toolbar1: "formatselect fontselect fontsizeselect | bold italic underline strikethrough link hr removeformat | forecolor backcolor  | alignleft aligncenter alignright alignjustify |bullist numlist  outdent indent | blockquote codesample code",
         toolbar2:"preview print| subscript superscript anchor charmap emoticons nonbreaking pagebreak | image media axupimgs table | toc  searchreplace  insertdatetime | ltr rtl undo redo wordcount",
         autosave_prefix: "editor-autosave-{path}{query}-{id}-",
         autosave_restore_when_empty: true,
         images_upload_url: '/demo/upimg.php',
         imagetools_cors_hosts: ['mydomain.com', 'otherdomain.com'],
         imagetools_proxy: 'proxy.php',
         codesample_languages: [
             {text: 'HTML/XML', value: 'markup'},
             {text: 'JavaScript', value: 'javascript'},
             {text: 'CSS', value: 'css'},
             {text: 'PHP', value: 'php'},
             {text: 'Ruby', value: 'ruby'},
             {text: 'Python', value: 'python'},
             {text: 'Java', value: 'java'},
             {text: 'C', value: 'c'},
             {text: 'C#', value: 'csharp'},
             {text: 'C++', value: 'cpp'}
         ],
         fontsize_formats: '12px 14px 16px 18px 24px 36px 48px 56px 72px',
         font_formats: '微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;',
         default_link_target: "_blank",
         link_assume_external_targets:true,
         menubar:false
     });
re>

  最终疗效:

  三、TinyMCE 使用

  由于TinyMCE的配置以及其它使用方式特别的多,我就只说一些你们最常用的,具体请看指南:

  官方文档(英文):

  其它文档(中文):

  下面是我在用TinyMCE编辑器中,最常用的几个东西:

  <pre class="pure-highlightjs">`获取内容
tinyMCE.editors['tinydemo'].getContent();
获取格式化后的内容
tinyMCE.editors['tinydemo'].getContent({ format: 'text' });
同步内容到textarea
tinyMCE.editors['tinydemo'].save();
设置内容
tinyMCE.editors['tinydemo'].setContent('付杰博客www.fujieace.com');`</pre>

Last modification:April 29th, 2021 at 10:41 am
如果觉得我的文章对你有用,请随意赞赏