蓝桉云顶

一、项目介绍

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”的内容，你了解清楚吗？希望对你有所帮助，任何问题可以给我留言，让我们下期再见吧。