Tinymce 6.0.0 Not Found Models

Vue3 TS Tinymce

字数统计: 3.1k阅读时长: 12 min

 2022/03/10 

问题出现

最近在整活一个Electron+Vue3+Vite2+TypeScript的个人项目，其中需要使用Tinymce这款富文本编辑器。

Tintmce前几天推送了6.0.0版本，但是更新后一直报错：

GET http://127.0.0.1:3344//models/dom/model.js net::ERR_ABORTED 404 (Not Found)

但是删除node_modules文件夹后，回滚到5.10.3版本后又正常，推测是6.0.0增加了新的特性。

但是在Tinymce Docs中又完全没有提及model这个文件的问题。

所以就对比查看了一下6.0.0和5.10.3的tinymce.js文件。

文件差别

const loadTheme = (editor, suffix) => {
  const theme = getTheme(editor);
  if (isString(theme) && !hasSkipLoadPrefix(theme) && !has$2(ThemeManager.urls, theme)) {
    const themeUrl = getThemeUrl(editor);
    const url = themeUrl ? editor.documentBaseURI.toAbsolute(themeUrl) : `themes/${ theme }/theme${ suffix }.js`;
    ThemeManager.load(theme, url).catch(() => {
      themeLoadError(editor, url, theme);
    });
  }
};
const loadModel = (editor, suffix) => {
  const model = getModel(editor);
  if (model !== 'plugin' && !has$2(ModelManager.urls, model)) {
    const modelUrl = getModelUrl(editor);
    const url = isString(modelUrl) ? editor.documentBaseURI.toAbsolute(modelUrl) : `models/${ model }/model${ suffix }.js`;
    ModelManager.load(model, url).catch(() => {
      modelLoadError(editor, url, model);
    });
  }
};

发现loadModel是新增的，而且404的地址也是指向node_modules/tinymce/models文件夹。

所以就很好办了。

修改Tinymce模板文件

仅需在Tinymce的vue文件中原来引入Theme的下方引入model即可。

1	import "tinymce/models/dom";

6.0.0 更新日志

贴一下机翻更新日志

新增

新的 editor.options API 来代替旧的 editor.settings 和 editor.getParam API #TINY-8206
新增 editor.annotator.removeAll API，用于按名称删除所有注释 #TINY-8195
新增Resource.unloadAPI，使之可以卸载资源 #TINY-8431
在 tinymce 全局中新增 FakeClipboard API #TINY-8353
新增dispatch()函数，以取代各种API中现已废弃的fire()函数 #TINY-8102
新的AutocompleterStart,AutocompleterUpdate和AutocompleterEnd事件#TINY-8279
新的mceAutompleterClose', mceAutompleterReload’命令 #TINY-8279
新增mceInsertTableDialog命令，打开插入表的对话框 #TINY-8273
新的 slider对话框组件 #TINY-8304
新的imagepreview对话框组件，允许预览和缩放任何图像URL #TINY-8333
对话框按钮组件新增buttonType属性，除了primary和secondary之外，还支持toolbar风格 #TINY-8304
tabindex属性现在可以从目标元素复制到iframe中 #TINY-8315

改进

为TinyMCE 6改头换面提供了新的默认主题样式，旧的皮肤可作为tinymce-5和tinymce-5-dark使用 #TINY-8373
编辑器的默认高度从200px增加到400px以提高编辑器的可用性 #TINY-6860
从editor.uploadImages()API返回的上传结果现在包括一个removed标志，反映出图片在上传失败后是否被删除 #TINY-7735
ScriptLoader、StyleSheetLoader、AddOnManager、PluginManager和ThemeManager APIs现在在加载资源时将返回一个Promise，而不是使用回调 #TINY-8325
如果主题加载失败，现在会触发一个 ThemeLoadError 事件 #TINY-8325
当向 editor.setContent API传递 AstNode 时，BeforeSetContent 事件现在将包括实际的序列化内容 #TINY-7996
改进了对编辑器中非可编辑元素之前或之后放置光标的支持 #TINY-8169
对editor.selection.setRng的调用现在可以更新焦点返回到编辑器时使用的光标位置书签 #TINY-8450
符号 “插件对话框、工具栏和菜单项已经更新，以使用更准确的 Emojis术语 #TINY-7631
对话框 redial API现在只重新渲染改变的组件，而不是整个对话框#TINY-8334
对话框APIsetData方法现在使用深度合并算法以支持部分嵌套对象 #TINY-8333
对话框规范的initialData类型现在是Partial<T>，以匹配底层实现细节 #TINY-8334
通知不再需要超时来禁用关闭按钮了 #TINY-6679
编辑器主题现在与图标、语言包和插件并行获取 #TINY-8453

改变了

TinyMCE现在是MIT许可的 #TINY-2316
将paste插件的功能移到了TinyMCE核心中 #TINY-8310
paste_data_images 选项现在默认为true #TINY-8310
将noneditable插件移至TinyMCE核心 #TINY-8311
将noneditable_noneditable_class选项重命名为noneditable_class #TINY-8311
将noneditable_editable_class选项重命名为editable_class #TINY-8311
将textpattern插件移至TinyMCE核心 #TINY-8312
将textpattern_patterns选项更名为text_patterns #TINY-8312
将hr插件的功能移至TinyMCE核心 #TINY-8313
将print插件的功能移至TinyMCE核心 #TINY-8314
将非UI表的功能移到核心区 #TINY-8273
DomParserAPI不再在内部使用自定义解析器，而是使用本地DOMParserAPI #TINY-4627
editor.getContent() API可以通过防止和覆盖BeforeGetContent事件中的content来提供自定义内容。这使得它与editor.selection.getContent() API一致#TINY-8018
editor.setContent() API现在可以使用BeforeSetContent事件来阻止。这使得它与editor.selection.setContent() API一致 #TINY-8018
插件和主题等附加组件不再使用new操作符构建 #TINY-8256
一些不是适当的类的API不再使用new操作符构建 #TINY-8322
编辑器命令API将不再回退到执行浏览器的本地命令功能 #TINY-7829
编辑器查询命令API现在会在被删除的编辑器上返回false或空字符串#TINY-7829
mceAddEditor和mceToggleEditor命令现在使用一个对象作为其值来指定id和编辑器选项 #TINY-8138
mceInsertTable命令不能再打开插入表的对话框。使用mceInsertTableDialog命令代替 #TINY-8273
plugins选项现在返回一个string数组，而不是一个空格分隔的字符串 #TINY-8455
media插件不再将iframe、video、audio或object元素视为 “special”，并将根据模式验证其内容 #TINY-8382
images_upload_handler选项不再传递success或failure回调，而是要求随上传结果返回Promise #TINY-8325
tinymce.settings全局属性不再在初始化时被设置#TINY-7359
第一次修改时不再触发change 事件 #TINY-6920
现在GetContent事件将总是为content属性传递一个string#TINY-7996
当使用html5模式时，删除线格式的默认标签改为s标签 #TINY-8262
当使用html5模式时，strike标签会自动转换为s标签 #TINY-8262
将表格向左或向右对齐现在将使用margin样式而不是float样式 #TINY-6558
在模式 valid_elements 和 extended_valid_elements 选项中，: 控制字符已改为~#TINY-6726
对话框按钮的primary属性已被废弃。使用新的buttonType属性代替 #TINY-8304
将默认的状态栏元素路径分隔符从"改为' #TINY-8372
将 Powered by Tiny 品牌文字替换为Tiny标识 #TINY-8371
编辑器的默认最小高度改为100px，以防止调整大小时用户界面消失#TINY-6860
在解析或序列化内容时，RGB颜色不再被转换为十六进制值 #TINY-8163
为各种API替换了isDisabled()函数，改为isEnabled()函数 #TINY-8101
在各种API中用setEnabled(state)函数替换了enable()和disable()函数 #TINY-8101
在各种API中用 enabled 属性取代了 disabled 属性 #TINY-8101
在对话框API中用 setEnabled(name, state) 函数取代了 disable(name) 和 enable(name) 函数 #TINY-8101
将tinymce.Env.os.isOSXAPI重命名为tinymce.Env.os.isMacOS #TINY-8175
将tinymce.Env.browser.isChrome API重命名为tinymce.Env.browser.isChromium以更好地反映其功能#TINY-8300
将getShortEndedElements模式API重命名为getVoidElements #TINY-8344
将font_formats选项重命名为font_family_formats #TINY-8328
将 fontselect 工具栏按钮和 fontformats 菜单项更名为 fontfamily#TINY-8328
将fontsize_formats选项更名为font_size_formats #TINY-8328
将fontsizeselect工具栏按钮和fontsizes菜单项更名为fontsize #TINY-8328
重新命名formatselect工具栏按钮和blockformats菜单项为blocks #TINY-8328
重新命名styleselect工具栏按钮和formats菜单项为styles #TINY-8328
将lineheight_formats选项重命名为line_height_formats #TINY-8328
将SchemaAPI中的getWhiteSpaceElements()函数更名为getWhitespaceElements() #TINY-8102
将mceInsertClipboardContent命令的content属性重命名为html，以更好地反映传递的数据#TINY-8310
将default_link_target选项更名为link_default_target，用于link和autolink插件 #TINY-4603
为link插件重新命名rel_list选项为link_rel_list #TINY-4603
将link插件的target_list选项重命名为link_target_list #TINY-4603
link_default_protocol选项的默认值改为https而不是http #TINY-7824
element_format选项的默认值已改为html #TINY-8263
schema选项的默认值已改为html5 #TINY-8261
table_style_by_css选项的默认值已改为true #TINY-8259
table_use_colgroups选项的默认值已改为true #TINY-8259

修正

如果编辑器被删除，从editor.fire() API返回的对象是不正确的 #TINY-8018
editor.selection.getContent() API未获取no_events参数 #TINY-8018
editor.annotator.remove API在删除注释时没有保留选择#TINY-8195
当使用editor.selection.getContent() API获得tree或text格式时，GetContent事件没有被触发 #TINY-8018
删除内容时，beforeinput 和 input 事件有时不能按预期触发 #TINY-8168 #TINY-8329
table插件有时不能正确处理tfoot部分的标题 #TINY-8104
在插件初始化之前，silver主题的用户界面会被错误地呈现#TINY-8288
颜色选择器对话框的阿里亚标签未被翻译 #TINY-8381
修正了屏幕阅读器无法读取的子菜单项目。补丁由westonkd贡献 #TINY-8417
对话框标签和其他基于文本的UI属性没有逃脱HTML标记 #TINY-7524
当使用 allow_html_in_named_anchor 选项时，锚点元素的渲染不正确 #TINY-3799
当 AstNode HTML序列化器包含换行时，不能正确序列化 pre 或 textarea 元素 #TINY-8446
修正了屏幕阅读器无法读取的子菜单项目。补丁由westonkd提供 #TINY-8417
Home或End键会移出包含在非可编辑元素中的可编辑元素 #TINY-8201
在编辑器被渲染之前，对话不能以内联模式打开 #TINY-8397
如果 onAction 函数导致菜单关闭，点击菜单项可能会导致一个意外的控制台警告 #TINY-8513
修正了深色皮肤的各种颜色和对比度问题 #TINY-8527

已删除

删除了对Microsoft Internet Explorer 11的支持 #TINY-8194 #TINY-8241
从开源粘贴功能中删除了对Microsoft Word的支持 #TINY-7493
删除了对plugins选项的支持，该选项允许混合使用字符串阵列和空格分隔的字符串 #TINY-8399
删除了对 forced_root_block 选项中已废弃的 false 值的支持 #TINY-8260
删除了jQuery的集成 #TINY-4518
删除了 imagetools 插件，该插件现在被列为高级插件 #TINY-8209
删除了 imagetools 对话框组件 #TINY-8333
删除了 toc 插件，该插件已被列为高级插件 #TINY-8250
删除了 tabfocus 插件 #TINY-8315
删除了textpattern插件的API，作为将其转移到核心的一部分 #TINY-8312
删除了table插件的API #TINY-8273
删除了EditorUploadAPI的回调 #TINY-8325
从EnvAPI中删除了传统的浏览器检测属性 #TINY-8162
从DomParserAPI中删除了filterNode方法 #TINY-8249
删除了 SaxParser API #TINY-8218
删除了 tinymce.utils.Promise API #TINY-8241
删除了DOMUtils和StylesAPI的toHex函数 #TINY-8163
从插件和主题接口中删除了execCommand处理函数 #TINY-7829
删除了editor.settings属性，因为它已被新的Options API取代 #TINY-8236
删除了tinymce.html.Node类中的shortEnded和fixed属性 #TINY-8205
删除了mceInsertRawHTML命令#TINY-8214
删除了image插件对话框高级标签中的样式字段 #TINY-3422
删除了paste_filter_drop选项，因为不再支持本地拖放处理 #TINY-8511
删除了传统的mobile主题 #TINY-7832
删除了过时的$、Class、DomQuery 和 Sizzle API #TINY-4520 #TINY-8326
删除了已废弃的颜色、JSON、JSONP和JSONRequest #TINY-8162
删除了废弃的XHRAPI #TINY-8164
删除了已废弃的setIconStroke拆分工具条按钮API #TINY-8162
从EditorManager中删除了过时的editors属性 #TINY-8162
从Editor中删除了过时的execCallback和setModeAPI #TINY-8162
从AddOnManager中移除已废弃的addComponents和dependenciesAPI #TINY-8162
从Delay中删除了过时的clearInterval, clearTimeout, debounce, requestAnimationFrame, setInterval, setTimeout和throttle APIs #TINY-8162
删除了废弃的Schema选项 #TINY-7821
删除了已废弃的file_browser_callback_types, force_hex_style_colors和images_dataimg_filter选项 #TINY-7823
删除了已废弃的filepicker_validator_handler, force_p_newlines, gecko_spellcheck, tab_focus, table_responsive_width 和toolbar_drawer选项 #TINY-7820
删除了media插件中已废弃的media_scripts选项 #TINY-8421
删除了已废弃的editor_deselector, editor_selector, elements, mode和types等TinyMCE初始选项#TINY-7822
删除了废弃的content_editable_state和padd_empty_with_br选项 #TINY-8400
删除了 autoresize 插件中已废弃的 autoresize_on_init 选项 #TINY-8400
删除了已废弃的fullpage、spellchecker、bbcode、legacyoutput、colorpicker、contextmenu和textcolor插件 #TINY-8192
删除了无文档的editor.editorCommands.hasCustomCommandAPI #TINY-7829
删除了未记录的mceResetDesignMode、mceRepaint和mceBeginUndoLevel命令 #TINY-7829

废弃的

对话框按钮组件的primary属性已被废弃，并将在下一个主要版本中被删除。使用新的buttonType属性代替 #TINY-8304
tinymce.Editor、tinymce.dom.EventUtils、tinymce.dom.DOMUtils、tinymce.util.Observable和tinymce.util.EventDispatcher的fire()函数已被弃用，将在下一个主要版本中删除。请使用dispatch()函数代替 #TINY-8102
SetContent 事件中的 content 属性已被弃用，将在下一个主要版本中删除 #TINY-8457
editor.setContentAPI的返回值已被弃用，并将在下一个主要版本中删除 #TINY-8457

原文作者：ZiGma

原文链接：http://www.zigma.cc/72d8b6920fbe/

发表日期：March 10th 2022, 9:58:34 am

更新日期：March 10th 2022, 11:27:15 am

Next Post

利用TailwindCss仿制Mac的TrafficLight
Previous Post

玩转Moon FM之自建播客

CATALOG

1. 问题出现
2. 文件差别
3. 修改Tinymce模板文件
4. 6.0.0 更新日志