vue使用vue-markdown编辑框,实现简单保存文本和html内容

安装vue-markdown

npm install vue-markdown --save

在main.js文件中全局引用

//编辑框
import mavonEditor from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
Vue.use(mavonEditor)

vue文件使用

@save: 按下 ctrl + s 时触发,@change: 当值发生改变时 触发
<mavon-editor style="min-height: 600px" v-model="value"  @save="saveDoc"
              @change="updateDoc"/>
methods:{
  updateDoc(markdown, html) {
    // 此时会自动将 markdown 和 html 传递到这个方法中
    console.log("markdown内容: " + markdown);
    console.log("html内容:" + html);
  },
  saveDoc(markdown, html) {
    // 此时会自动将 markdown 和 html 传递到这个方法中
    console.log("markdown内容:" + markdown);
    console.log("html内容:" + html);
  }
}

测试结果:

 

  • 2
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue2 中使用 tinymce-markdown 插件将 tinymce 富文本框的内容转换为 Markdown 格式,可以参考以下步骤: 1. 安装 tinymce 和 tinymce-markdown 插件。 ```bash npm install tinymce@5.8.0 tinymce-markdown@3.0.2 --save ``` 2. 在 vue 组件中引入 tinymce 和 tinymce-markdown 的 js 文件。 ```vue <template> <div> <textarea ref="editor"></textarea> </div> </template> <script> import tinymce from 'tinymce/tinymce'; import 'tinymce/themes/silver'; import 'tinymce/plugins/code'; import 'tinymce/plugins/link'; import 'tinymce/plugins/paste'; import 'tinymce/plugins/table'; import 'tinymce/plugins/lists'; import 'tinymce/plugins/imagetools'; import 'tinymce/plugins/media'; import 'tinymce/plugins/advlist'; import 'tinymce/plugins/autosave'; import 'tinymce/plugins/searchreplace'; import 'tinymce/plugins/wordcount'; import 'tinymce/plugins/hr'; import 'tinymce/plugins/anchor'; import 'tinymce/plugins/pagebreak'; import 'tinymce/plugins/nonbreaking'; import 'tinymce/plugins/fullscreen'; import 'tinymce/plugins/help'; import 'tinymce/plugins/preview'; import 'tinymce/plugins/print'; import 'tinymce/plugins/quickbars'; import 'tinymce/plugins/insertdatetime'; import 'tinymce/plugins/fullpage'; import 'tinymce/plugins/importcss'; import 'tinymce/plugins/colorpicker'; import 'tinymce/plugins/textcolor'; import 'tinymce/plugins/colorpicker'; import 'tinymce/plugins/directionality'; import 'tinymce/plugins/emoticons'; import 'tinymce/plugins/emoticons/js/emojis'; import 'tinymce/plugins/charmap'; import 'tinymce/plugins/visualblocks'; import 'tinymce/plugins/visualchars'; import 'tinymce/plugins/template'; import 'tinymce/plugins/toc'; import 'tinymce/plugins/imagetools'; import 'tinymce/plugins/help'; import 'tinymce/plugins/codesample'; import 'tinymce/plugins/autosave'; import 'tinymce/plugins/contextmenu'; import 'tinymce/plugins/autoresize'; import 'tinymce/plugins/wordcount'; import 'tinymce/plugins/lists'; import 'tinymce/plugins/table'; import 'tinymce/plugins/preview'; import 'tinymce/plugins/searchreplace'; import 'tinymce/plugins/advlist'; import 'tinymce/skins/ui/oxide/skin.min.css'; import 'tinymce/skins/content/default/content.min.css'; import 'tinymce/icons/default/icons.min'; import 'tinymce/plugins/markdown'; import 'tinymce-markdown/dist/tinymce-markdown.min'; export default { mounted() { this.initEditor(); }, methods: { initEditor() { tinymce.init({ selector: this.$refs.editor, height: 400, plugins: 'code link paste table lists imagetools media advlist autosave searchreplace wordcount hr anchor pagebreak nonbreaking fullscreen help preview print quickbars insertdatetime fullpage importcss colorpicker textcolor directionality emoticons charmap visualblocks visualchars template toc codesample autosave contextmenu autoresize markdown', toolbar: 'undo redo | bold italic underline strikethrough | link | alignleft aligncenter alignright alignjustify | table | bullist numlist outdent indent | formatselect fontselect fontsizeselect | fullscreen | code | emoticons | preview', setup: (editor) => { editor.on('init', () => { // 将 tinymce 编辑器中的内容转换为 markdown 格式 const content = editor.getContent(); const markdown = editor.plugins.markdown.parse(content); console.log(markdown); }); }, }); }, }, }; ``` 在组件中引入了 tinymce 和 tinymce-markdown 插件,以及一些常用的 tinymce 插件和样式。在初始化代码中,我们启用了 markdown 插件,并添加了一个名为 markdown 的按钮到编辑器的工具栏中。在 `setup` 回调函数中,我们监听了编辑器的 `init` 事件,并在事件回调函数中调用了 `editor.plugins.markdown.parse(content)` 方法,将编辑器中的内容转换为 Markdown 格式,并输出到控制台中。 3. 使用转换后的 Markdown 格式进行后续操作。 在转换后,你可以使用转换后的 Markdown 格式进行后续操作,例如将它保存到数据库中,或者将它在网页中渲染为 HTML 格式。可以使用一些流行的 Markdown 渲染库,例如 marked 或 markdown-it 来将 Markdown 转换为 HTML 格式。 ```javascript // 使用 marked 将 Markdown 转换为 HTML const html = marked(markdown); console.log(html); ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值