ZiGma

Tinymce 6.0.0 Not Found Models

字数统计: 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.05.10.3tinymce.js文件。

文件差别

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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.settingseditor.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,AutocompleterUpdateAutocompleterEnd事件#TINY-8279
  • 新的mceAutompleterClose', mceAutompleterReload’命令 #TINY-8279
  • 新增mceInsertTableDialog命令,打开插入表的对话框 #TINY-8273
  • 新的 slider对话框组件 #TINY-8304
  • 新的imagepreview对话框组件,允许预览和缩放任何图像URL #TINY-8333
  • 对话框按钮组件新增buttonType属性,除了primarysecondary之外,还支持toolbar风格 #TINY-8304
  • tabindex属性现在可以从目标元素复制到iframe中 #TINY-8315

改进

  • 为TinyMCE 6改头换面提供了新的默认主题样式,旧的皮肤可作为tinymce-5tinymce-5-dark使用 #TINY-8373
  • 编辑器的默认高度从200px增加到400px以提高编辑器的可用性 #TINY-6860
  • editor.uploadImages()API返回的上传结果现在包括一个removed标志,反映出图片在上传失败后是否被删除 #TINY-7735
  • ScriptLoaderStyleSheetLoaderAddOnManagerPluginManagerThemeManager 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
  • mceAddEditormceToggleEditor命令现在使用一个对象作为其值来指定id和编辑器选项 #TINY-8138
  • mceInsertTable命令不能再打开插入表的对话框。使用mceInsertTableDialog命令代替 #TINY-8273
  • plugins选项现在返回一个string数组,而不是一个空格分隔的字符串 #TINY-8455
  • media插件不再将iframevideoaudioobject元素视为 “special”,并将根据模式验证其内容 #TINY-8382
  • images_upload_handler选项不再传递successfailure回调,而是要求随上传结果返回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,用于linkautolink插件 #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获得treetext格式时,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
  • 删除了DOMUtilsStylesAPI的toHex函数 #TINY-8163
  • 从插件和主题接口中删除了execCommand处理函数 #TINY-7829
  • 删除了editor.settings属性,因为它已被新的Options API取代 #TINY-8236
  • 删除了tinymce.html.Node类中的shortEndedfixed属性 #TINY-8205
  • 删除了mceInsertRawHTML命令#TINY-8214
  • 删除了image插件对话框高级标签中的样式字段 #TINY-3422
  • 删除了paste_filter_drop选项,因为不再支持本地拖放处理 #TINY-8511
  • 删除了传统的mobile主题 #TINY-7832
  • 删除了过时的$ClassDomQuery Sizzle API #TINY-4520 #TINY-8326
  • 删除了已废弃的颜色JSONJSONPJSONRequest #TINY-8162
  • 删除了废弃的XHRAPI #TINY-8164
  • 删除了已废弃的setIconStroke拆分工具条按钮API #TINY-8162
  • EditorManager中删除了过时的editors属性 #TINY-8162
  • Editor中删除了过时的execCallbacksetModeAPI #TINY-8162
  • AddOnManager中移除已废弃的addComponentsdependenciesAPI #TINY-8162
  • Delay中删除了过时的clearInterval, clearTimeout, debounce, requestAnimationFrame, setInterval, setTimeoutthrottle APIs #TINY-8162
  • 删除了废弃的Schema选项 #TINY-7821
  • 删除了已废弃的file_browser_callback_types, force_hex_style_colorsimages_dataimg_filter选项 #TINY-7823
  • 删除了已废弃的filepicker_validator_handler, force_p_newlines, gecko_spellcheck, tab_focus, table_responsive_widthtoolbar_drawer选项 #TINY-7820
  • 删除了media插件中已废弃的media_scripts选项 #TINY-8421
  • 删除了已废弃的editor_deselector, editor_selector, elements, modetypes等TinyMCE初始选项#TINY-7822
  • 删除了废弃的content_editable_statepadd_empty_with_br选项 #TINY-8400
  • 删除了 autoresize 插件中已废弃的 autoresize_on_init 选项 #TINY-8400
  • 删除了已废弃的fullpagespellcheckerbbcodelegacyoutputcolorpickercontextmenutextcolor插件 #TINY-8192
  • 删除了无文档的editor.editorCommands.hasCustomCommandAPI #TINY-7829
  • 删除了未记录的mceResetDesignModemceRepaintmceBeginUndoLevel命令 #TINY-7829

废弃的

  • 对话框按钮组件的primary属性已被废弃,并将在下一个主要版本中被删除。使用新的buttonType属性代替 #TINY-8304
  • tinymce.Editortinymce.dom.EventUtilstinymce.dom.DOMUtilstinymce.util.Observabletinymce.util.EventDispatcherfire()函数已被弃用,将在下一个主要版本中删除。请使用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

版权声明:本文采用知识共享署名-非商业性使用 4.0 国际许可协议进行许可

CATALOG
  1. 1. 问题出现
  2. 2. 文件差别
  3. 3. 修改Tinymce模板文件
  4. 4. 6.0.0 更新日志
    1. 4.1. 新增
    2. 4.2. 改进
    3. 4.3. 改变了
    4. 4.4. 修正
    5. 4.5. 已删除
    6. 4.6. 废弃的