山西网站开发公司电话,省网站建设,网页游戏在哪里制作,wordpress qq群项目中有一个需求#xff0c;要在前端给用户展示内容#xff0c;内容有 AI 生成的#xff0c;返回来的是 md 格式#xff0c;所以需要给用户展示 md 格式#xff0c;并且管理端也可以编辑这个 md 格式的文档。
使用组件库 v-md-editor。
https://code-farmer-i.github.i…项目中有一个需求要在前端给用户展示内容内容有 AI 生成的返回来的是 md 格式所以需要给用户展示 md 格式并且管理端也可以编辑这个 md 格式的文档。
使用组件库 v-md-editor。
https://code-farmer-i.github.io/vue-markdown-editor/zh/examples/base-editor.html#%E5%BC%95%E5%85%A5
使用npm 命令进行安装
# 使用 npm npm i kangc/v-md-editor -S对于用户端需要展示出来管理端需要编辑官方给的全局组件是用来编辑的。 我使用局部注册的来管理。 在 main.js 中 导入编辑和预览组件使用 Vue.use进行全局的注册。
import Vue from vue
import App from ./App.vueVue.config.productionTip falseimport VMdEditor from kangc/v-md-editor;
import kangc/v-md-editor/lib/style/base-editor.css;
import githubTheme from kangc/v-md-editor/lib/theme/github.js;
import kangc/v-md-editor/lib/theme/style/github.css;import VMdPreview from kangc/v-md-editor/lib/preview;
import kangc/v-md-editor/lib/style/preview.css;import kangc/v-md-editor/lib/theme/style/github.css;
import hljs from highlight.js;// highlightjsVMdEditor.use(githubTheme, {Hljs: hljs,
});
VMdPreview.use(githubTheme, {Hljs: hljs,
});
Vue.use(VMdEditor);
Vue.use(VMdPreview);import router from ./router; // 导入路由配置
new Vue({router,render: h h(App),
}).$mount(#app)editView
scriptexport default {data() {return {markdown: ,};}
};
/scripttemplatedivv-md-editor v-modelmarkdown height400px width400px/v-md-editor/div
/templatestyle scoped
/* 组件样式 */
/style
//通过 v-model 进行双向的绑定注意注册的组件时机选择应该是 created()不太清楚为什么。官方也没有给说明文档。
showView
templatedivv-md-preview :textmarkdown/v-md-preview/div
/templatescript
// 只在本组件内引入需要的模块
export default {data() {return {markdown: # 我的 Markdown 示例## 介绍Markdown 是一种轻量级标记语言常用于编写格式化文本常见应用包括文档编写、博客、GitHub 上的 README 文件等。## 示例代码\\\python
def add(a, b):return a bresult add(3, 5)
print(结果是:, result)
\\\};}
};
/scriptstyle scoped
/* 组件样式 */
/style实际的markdown 可以由后端的接口进行返回编辑界面
编写使用 markdown 语法右边显示初对应的内容。 展示界面 这个是一个简单的版本后面对于内容要保存到数据库中要看官方文档还有图片等上传。
