富文本编辑器的实现与回显

文本编辑器实现-wangeditor

写之前记得安装wangeditor插件,到时候报错别赖我

import "@wangeditor/editor/dist/css/style.css";

import { Editor, Toolbar } from "@wangeditor/editor-for-vue";

cpp 复制代码
defineOptions({
  name: "BaseEditor"
});

const mode = "default";
// 编辑器实例,必须用 shallowRef
const editorRef = shallowRef();

// 内容 HTML
const valueHtml = ref("<p>你好</p>");

// 模拟 ajax 异步获取内容
onMounted(() => {

});

const editorConfig = { placeholder: "请输入内容..." };

const handleCreated = editor => {
  // 记录 editor 实例,重要!
  editorRef.value = editor;
};

// 组件销毁时,也及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value;
  if (editor == null) return;
  editor.destroy();
});
cpp 复制代码
    <div class="wangeditor">
      <Toolbar :editor="editorRef" :defaultConfig="toolbarConfig" :mode="mode" style="border-bottom: 1px solid #ccc" />
      <Editor v-model="valueHtml" :defaultConfig="editorConfig" :mode="mode" style="height: 300px; overflow-y: hidden"
        @onCreated="handleCreated" />
    </div>

回显

复制代码
<p v-html="valueHtml"></p>
v-html绑定编辑器的数据
相关推荐
XTransfer技术4 小时前
RN也有微前端框架了? Xtransfer的RN优化实践(一)多bundle架构
前端·react native
Mintopia4 小时前
Next 全栈之 API 测试:Supertest 与 MSW 双雄记 🥷⚔️
前端·javascript·next.js
泽泽爱旅行4 小时前
awk 语法解析-前端学习
linux·前端
鹏多多4 小时前
纯前端人脸识别利器:face-api.js手把手深入解析教学
前端·javascript·人工智能
无奈何杨4 小时前
CoolGuard增加枚举字段支持,条件编辑优化,展望指标取值不同
前端·后端
掘金安东尼4 小时前
工具过多:如何管理前端工具泛滥?
前端
江城开朗的豌豆5 小时前
从生命周期到useEffect:我的React函数组件进化之旅
前端·javascript·react.js
brzhang5 小时前
当AI接管80%的执行,你“不可替代”的价值,藏在这20%里
前端·后端·架构
江城开朗的豌豆5 小时前
React组件传值:轻松掌握React组件通信秘籍
前端·javascript·react.js
Sailing5 小时前
别再放任用户乱填 IP 了!一套前端 IP 与 CIDR 校验的高效方案
前端·javascript·面试