html,,,
“,,这样即可快速集成wangEditor富文本编辑器。一、项目介绍
wangEditor是一款轻量级、简洁易用的Web富文本编辑器,支持JavaScript、Vue和React框架,适合开发者快速集成到项目中,它兼容常见的PC浏览器,如Chrome、Firefox、Safari、Edge、QQ浏览器以及IE11。
二、CDN引入方式
在Vue3项目中使用CDN引入wangEditor的步骤如下:
1、在index.html中引入wangEditor的CSS和JS文件:
<link href="https://cdn.bootcdn.net/ajax/libs/element-plus/2.2.2/index.css" rel="stylesheet"> <script src="https://unpkg.com/@wangeditor/editor@5.1.1/dist/index.js"></script>
2、在vue.config.js配置文件中配置外部依赖(可选):
如果需要,可以在vue.config.js
中配置外部依赖,以便更好地管理项目资源。
3、组件封装:
创建一个封装wangEditor的组件,以便在项目中重复使用,以下是一个示例组件:
<template> <div class="wang-ed"> <div id="toolbar-container"></div> <div id="editor-container"></div> </div> </template> <script setup> import { createEditor, createToolbar } from 'wang-editor' const that = factory() const props = defineProps(['detail']) const emits = defineEmits(['update:detail']) const editorConfig = { placeholder: '请输入内容' } editorConfig.onChange = () => { let text = editor.getHtml(); text = text === '<p><br></p>' ? "" : text emits("update:detail", text); } const toolbarConfig = { excludeKeys: ['fullScreen'] } let editor = undefined that.onMounted(() => { editor = createEditor({ selector: '#editor-container', config: editorConfig, mode: 'simple' // 或 default'simple' }) toolbar = createToolbar({ editor, selector: '#toolbar-container', config: toolbarConfig, mode: 'simple' // 或 'simple' }) }) that.watch(() => props.detail, (nv) => { (nv===""?editor.setHtml("<p><br></p>"):editor.setHtml(nv)); }) </script> <style lang="scss"> .wang-ed { width: 50%; border: 1px solid #dcdfe6; border-radius: 5px; overflow: hidden; #editor-container { height: 320px; } } </style>
4、使用组件:
在需要使用wangEditor的地方引入并使用该组件:
<template> <div> <wangEdi v-model:detail="detail"></wangEdi> <button @click="log">打印内容</button> </div> </template> <script setup> import { ref } from "vue" import wangEdi from "@/components/wangEditor.vue"; const detail = ref(""); function log() { console.log(detail.value); } </script>
三、注意事项与常见问题解决
1、依赖包安装失败问题:
检查网络连接是否正常,确保能够访问npm或yarn的仓库,如果网络问题导致安装失败,可以尝试使用国内的npm镜像源,例如淘宝镜像:
npm config set registry https://registry.npmmirror.com
然后重新运行安装命令:
npm install wangeditor
2、配置文件错误问题:
确保配置文件(如config.js)没有语法错误,特别是JSON格式的配置文件,参考官方文档中的配置示例,逐项检查配置项是否正确,在开发环境中启用调试模式,查看控制台输出的错误信息,根据错误提示进行修正。
3、样式冲突问题:
将wangEditor的样式文件与其他项目的样式文件隔离,避免全局样式冲突,如果项目支持CSS Modules,建议使用CSS Modules来管理样式,避免样式污染,如果需要自定义编辑器的样式,建议在项目中覆盖wangEditor的默认样式,而不是直接修改源码。
小伙伴们,上文介绍了“wangeditor cdn”的内容,你了解清楚吗?希望对你有所帮助,任何问题可以给我留言,让我们下期再见吧。
原创文章,作者:未希,如若转载,请注明出处:https://www.kdun.com/ask/1301078.html
本网站发布或转载的文章及图片均来自网络,其原创性以及文中表达的观点和判断不代表本网站。如有问题,请联系客服处理。
发表回复