1500字范文,内容丰富有趣,写作好帮手!
1500字范文 > 前端踩坑之TinyMCE富文本编辑器表情插件报错解决

前端踩坑之TinyMCE富文本编辑器表情插件报错解决

时间:2018-12-22 02:39:55

相关推荐

前端踩坑之TinyMCE富文本编辑器表情插件报错解决

最近项目中需要使用文本编辑器,比较了下最终选择了TinyMCE这款富文本编辑器。

我安装的是TinyMCE v5但是在使用表情插件的时候,表情一直都出不来,报错信息如下:

Uncaught SyntaxError: Unexpected token '<'Failed to load emoticons: Script at URL"http://xxxx/static/js/plugins/emoticons/js/emojis.js" did not call`tinymce.Resource.add('tinymce.plugins.emoticons', data)` within 1 second

这个是路径出问题了,导致emojis.js没有被正确导入,所以表情也就没有出来。

经过测试,发现解决办法是设置emoticons_database_url

先把emojis.js放在public目录下(注:vue-cli2是static目录),然后设置emoticons_database_url为public下emojis.js的路径。

完整代码如下:

template:

<template><div><editorid="tinymce"v-model="tinymceHtml":init="editorInit"></editor></div></template>

script:

<script>import tinymce from 'tinymce/tinymce'import Editor from '@tinymce/tinymce-vue'import 'tinymce/plugins/emoticons'//插入表情插件export default{componens:{Editor},data(){return {editorInit:{height: 300,plugins: 'emoticons',emoticons_database_url: '/emojis.js',toolbar:'undo redo | formatselect | emoticons | removeformat',}}}}</script>

最后出来的效果如下:

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。