TinyMCE如何使用

Posted 2023-04-07

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了TinyMCE如何使用相关的知识，希望对你有一定的参考价值。

我在html页面中加入 <html> <head> <title>MyHtml.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8">  <script type="text/javascript" src="/js/jscripts/tiny_mce/tiny_mce.js"></script> <script language="javascript" type="text/javascript"> tinyMCE.init( language : "zh_cn", mode : "textareas", theme : "advanced", plugins : "table,save,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,zoom,flash,searchreplace,print,contextmenu", theme_advanced_buttons1_add_before : "save,separator", theme_advanced_buttons1_add : "fontselect,fontsizeselect", theme_advanced_buttons2_add : "separator,insertdate,inserttime,preview,zoom,separator,forecolor,backcolor", theme_advanced_buttons2_add_before: "cut,copy,paste,separator,search,replace,separator", theme_advanced_buttons3_add_before : "tablecontrols,separator", theme_advanced_buttons3_add : "emotions,iespell,flash,advhr,separator,print", theme_advanced_toolbar_location : "top", theme_advanced_toolbar_align : "left", theme_advanced_path_location : "bottom", plugin_insertdate_dateFormat : "%Y-%m-%d", plugin_insertdate_timeFormat : "%H:%M:%S", extended_valid_elements : "a[name|href|target|title|onclick],img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name],hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style]", external_link_list_url : "example_data/example_link_list.js", external_image_list_url : "example_data/example_image_list.js", flash_external_list_url : "example_data/example_flash_list.js" ); </script> </head> <body> <textarea rows="20" cols="100"></textarea> </body> </html> 能够成功显示出来! 但是我把这些代码放到JSP页面中时，却怎么也显示不出来环境正常服务器成功启动别的模块都能正常运行！我想要一个在线编辑器来获取大文本域内容我想使用TnyMCE在线编辑器在一个JSP页面中写入了以上代码，但是只显示一个大文本域不能显示 TnyMCE在线编辑器这是为什么啊！！我看了它自带的例子是在HTML页面中的我把代码复制到JSP中可就是没显示！！！为什么啊！！

参考技术A 你把js文件的路径改成相对路径应该可以：
src="/js/jscripts/tiny_mce/tiny_mce.js"
没
记错
的话，这里的第一个/代表主机根目录
改成：
src="js/jscripts/tiny_mce/tiny_mce.js"
不行hi我

tinymce 5更新后，如何使用tinymce-vue

项目中原本使用的富文本编辑器是 wangEditor，这是一个很轻量、简洁编辑器

但是公司的业务升级，想要一个功能更全面的编辑器，我找了好久，目前常见的编辑器有这些：

UEditor：百度前端的开源项目，功能强大，基于 jQuery，但已经没有再维护，而且限定了后端代码，修改起来比较费劲

bootstrap-wysiwyg：微型，易用，小而美，只是 Bootstrap + jQuery...

kindEditor：功能强大，代码简洁，需要配置后台，而且好久没见更新了

wangEditor：轻量、简洁、易用，但是升级到 3.x 之后，不便于定制化开发。不过作者很勤奋，广义上和我是一家人，打个call

quill：本身功能不多，不过可以自行扩展，api 也很好懂，如果能看懂英文的话...

summernote：没深入研究，UI挺漂亮，也是一款小而美的编辑器，可是我需要大的

在有这么参考的情况下，我最终还是选择了 tinymce 这个不搭梯子连官网都打不开的编辑器（简直是自讨苦吃），主要因为两点：

1. GitHub 上星星很多，功能也齐全；

2. 唯一一个从 word 粘贴过来还能保持绝大部分格式的编辑器；

3. 不需要找后端人员扫码改接口，前后端分离；

4. 说好的两点呢！

项目使用vue-cli 3.x版本，tinymce5

1. 安装及引用

注：只安装tinymce-vue不可以，还需安装tinymce，否则会报错

npm install tinymce
npm install @tinymce/tinymce-vue

import tinymce from ‘tinymce/tinymce‘
import Editor from ‘@tinymce/tinymce-vue‘

2. 初始化编辑器（记录出现的问题和解决方案）

按示例初始化发现编辑器不显示，报“theme.js:1 Uncaught SyntaxError: Unexpected token <”这个错。

解决方案：手动引入tinymce主题，在init({})方法里加theme: ‘silver‘,没用。
```
import ‘tinymce/themes/silver‘
```
不报错了但是编辑器还是不显示，继续研究，发现还需要定义皮肤，在init({})里加skin: "oxide"没用。

解决方案：先在public目录下新建一个文件夹命名为tinymce，然后在node_modules里找到tinymce的skin包，复制到public/tinymce里，最后在初始化tinymce时的init里配置skin_url：
```
<editor :init="{skin_url:‘/tinymce/skins/ui/oxide‘}"></editor>
```
注：资源用绝对路径引入时，读取的是public文件夹里的资源。如果应用没有部署在域名的根部，那么需要为 URL 配置 publicPath前缀。
```
<editor :init="{skin_url:`${publicPath}tinymce/skins/ui/oxide`}"></editor>
...
data () {
    return {
      publicPath: process.env.BASE_URL
    }
}
```

3. 配置

一些常用的配置属性

  browser_spellcheck: true, // 拼写检查
  branding: false, // 去水印
  elementpath: false,  //禁用编辑器底部的状态栏
  statusbar: false, // 隐藏编辑器底部的状态栏
  paste_data_images: true, // 允许粘贴图像
  menubar: false, // 隐藏最上方menu

plugins

使用某个插件需要先引入这个插件，例：

import ‘tinymce/plugins/fullscreen‘
import ‘tinymce/plugins/preview‘

plugins: ‘fullscreen preview‘

toolbar

可以使用“|”给工具栏分组，把某一类功能划分成一组，例：
```
toolbar: ‘bold italic underline | alignleft aligncenter alignright‘
```

4. 定制

将语言改为中文

步骤：
1. 在官网下载语言包https://www.tiny.cloud/get-tiny/language-packages/
2. 把下载的语言包放到之前新建的tinymce文件夹里
3. 初始化时添加以下代码
```
      language_url: `/tinymce/langs/zh_CN.js`,
      language: ‘zh_CN‘,
```

在tinymce5工具栏添加自定义功能按钮

this.tinymceInit = {
...
toolbar: ‘imageUpload‘,
  setup: (editor) => {
    editor.ui.registry.addButton(‘imageUpload‘, {
      tooltip: ‘插入图片‘,
      icon: ‘image‘,
      onAction: () => {

      }
    })
  }
}

以上是关于TinyMCE如何使用的主要内容，如果未能解决你的问题，请参考以下文章

vue项目如何使用tinymce5

jsp 使用 tinymce

如何从 TinyMCE 获取高亮文本？

tinymce 5更新后，如何使用tinymce-vue

TinyMCE如何使用