menu:{
view: {title: 你敢点我试试!, items: 'cut, copy, paste'}
利用这些配置,你已经可以在应用里构建一个tinyMCE了。你可以在这里了解更多的配置:https://www.tinymce.com/docs/configure/。或者在这里了解更多可用的插件:https://www.tinymce.com/docs/plugins/。当然,后续我们也会提到这些内容。
内联编辑
tinyMCE有两种模式,经典模式和内联模式。经典模式又称为表单模式。我们之前提到的inline配置,就与此有关。
表单模式下,tinyMCE将替换掉selector指定的元素,内联模式下,tinyMCE将成为指定元素的内容。当你希望通过tinyMCE编辑页面时,想要达到所见即所得的效果,那么,你应该了解一下内联模式。
表单模式下,编辑器永远是表单的一部分,属于表单的一个域。而内联模式下,编辑器的内容将成为页面的一部分。你可以很容易的预览到你创建的页面的效果。编辑器内容形成的页面元素,也会继承其父元素的CSS特性等。
你可以通过将inline设置为true来启用内联模式,另外,内联模式下的tinyMCE,应该初始化到某个div或者其它适合的非表单元素中。
在内联模式下,你可能更想要在一个页面中使用多个tinyMCE。它们可以共用一套配置,也可以独立的配置。使用上来说,也很简单。某个配置能够把哪些元素初始化为tinyMCE,完全取决于元素选择器,即selector的配置。
高级使用方式
你可能还想要通过一些更高级的方式来使用tinyMCE。
比如npm: npm install tinymce
bower: bowerinstall tinymce 或者
bower install tinymce-src=git://github.com/tinymce/tinymce
composer: php composer.phar require"tinymce/tinymce" ">= 4"
nuget: Install-PackageTinyMCE
sdk: 你可以在这里下载:https://www.tinymce.com/download/
jQuery: 如果你希望得到一个jQuery插件形式的tinyMCE,你可以在这里定制:https://www.tinymce.com/download/custom-builds/。你可以根据你的意愿,定制你需要的功能。这样,你可以得到一个尽可能小的适用的tinyMCE。
插件
tinyMCE有很多插件可以使用,比如代码编辑模式、高亮模式,图片上传等等。插件拓展或新增了tinyMCE的功能。或者,你也可以自定义一些插件。
关于插件的内容过多,不进行翻译,后续一些插件也以挂出官网的链接形式展示。
自主义UI
主题和皮肤
你可以定制主题和皮肤,通过threm和spin来配置它们。
尺寸
这些配置帮助你定制尺寸,width、height、min_width、max_width、min_height、max_height。
你可能还需要自适应尺寸(https://www.tinymce.com/docs/plugins/autoresize/)的插件来帮助你使尺寸更智能。或者,你可以使用resize配置。
样式
content_css 可用帮助你定制主体区域的样式。
statusbar 设为false可以隐藏状态栏。
源码模式
https://www.tinymce.com/docs/get-started/customize-ui/。页尾。
上传图片
https://www.tinymce.com/docs/get-started/upload-images/
拼写检查
https://www.tinymce.com/docs/get-started/spell-checking/
内容过滤
https://www.tinymce.com/docs/get-started/filter-content/
---------------------
作者:lanming0326
来源:CSDN
原文:https://blog.csdn.net/lanming0326/article/details/80860158
版权声明:本文为博主原创文章,转载请附上博文链接!