Vditor富文本编辑器支持NUXT下SSR服务端渲染。

分享一款新发现的非常好用的所见即所得的富文本编辑器，不同于其它的富文本编辑器，Vditor使用了Markdown基础编辑方式的同时引入所见即所得、即时渲染、分屏预览几种模式可选择。 Vditor官方网站https://b3log.org/vditor/也有对Vditor描述为一款浏览器端的 Markdown 编辑器，支持所见即所得、即时渲染（类似 Typora）和分屏预览模式。它使用 TypeScript 实现，支持原生 JavaScript、Vue、React、Angular，提供桌面版。 具体的使用方法和渲染模式等都可以在官网上找到，这里我们主要演示一下Vditor在Nuxt中如何使用及支持SSR服务端渲染。 1.安装Vditor ``` npm i vditor --save ``` 2.调用编辑器嵌入页面 这里提供的参数比较有限，包括渲染预览模式，工具栏配置等，更多的参数可以官方查阅。编辑器内容值可以直接以Markdown格式写入数据库或保存为md文件，不建议转为html保存。 ``` <script setup lang="ts"> //导入依赖 import Vditor from 'vditor'; import '@/assets/editor.css'; onMounted(()=>{ vditor.value = new Vditor('vditor', { toolbar: [//toolbar配置 ], placeholder: '写点什么……', mode: 'wysiwyg',//编辑及渲染模式，官方可查 toolbarConfig: { pin: true, },//固定工具栏 counter: { enable: true, max: 20000 },//最大字符数，mysql中text最多存储中文21800 }); }); </script> <template> <div id="vditor"></div> </template> ``` 3.读取内容并渲染结果，同时支持Nuxt的SSR服务端渲染。在components文件下新建VRender.vue，注意不能使用client标记，否则不能支持SSR渲染。 ``` <script setup lang="ts"> //导入组件 import Vditor from 'vditor'; import '@/assets/editor.css'; //组件通信 const props = defineProps({ content: { type: String, require: true, default: '' } }); //定义$ref对象 const mdObj: Ref = ref<any>(); //钩子函数 onMounted(async () => { if (process.client) Vditor.preview(mdObj.value, props.content);//全文渲染 //Vditor.speechRender(mdObj.value, 'zh_CN');//启用中文阅读渲染后用户选中的文字 }); </script> <template> <div ref="mdObj">{{ content }}</div> </template> ``` 4.页面调用VRender组件渲染结果。渲染时会自动屏蔽掉一些XXS代码,但不完整，一些非安全代码仍然需要写入或读取时进行过滤。 ``` <script setup lang="ts"> const content=mysql.result/nodefs.read//从数据库或文件读取内容 </script> <template> <Vrender :content="content" /> </template> ```