vue富文本编辑器组件

1.引用quill

<script src="/lib/quill/quill.min.js"></script>
<link href="/lib/quill/quill.snow.css" rel="stylesheet" />

2.RichEditorDemo.vue

<template><div class="yh-page"><h1>富文本编辑器演示</h1><div class="desc">Demo源代码：<code>/examples/components/modules/RichEditorDemo.vue</code></div><div class="yh-block"><el-row><el-col :span="13"><div id="editor" style="height:300px"></div><div style="margin-top:15px;text-align:center"><yh-button @click="onSave">保存</yh-button></div></el-col><el-col :span="11"><div id="re-content" style="background-color:#fefefe;height:300px;width:100%;padding:8px"></div></el-col></el-row></div><div class="yh-desc yh-block"><h2>引用quill</h2><pre>&lt;script src=&quot;/lib/quill/quill.min.js&quot;&gt;&lt;/script&gt;
&lt;link href=&quot;/lib/quill/quill.snow.css&quot; rel=&quot;stylesheet&quot; /&gt;</pre></div></div>
</template>
<script>
import yhbutton from "../comcompont/Button";
export default {name: "RichEditorDemo",data() {return {};},methods: {onSave() {var delta = this.$quill.getContents();console.log("delta " + JSON.stringify(delta));var html = this.$quill.root.innerHTML;$("#re-content").html(html);}},mounted() {var quill = new Quill("#editor", {modules: {toolbar: [[{ header: [1, 2, false] }],["bold", "italic", "underline"],[{ color: [] }, { background: [] }],[{ font: [] }],[{ align: [] }],["image", "link"]]},theme: "snow"});this.$quill = quill;},components: {"yh-button": yhbutton,}
};
</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style scope>
</style>

vue富文本编辑器组件相关推荐

vue中使用kindeditor编辑器_vue富文本编辑器组件vue-quill-edit使用教程
这篇文章主要为大家详细介绍了vue富文本编辑器组件vue-quill-edit使用教程,具有一定的参考价值,可以用来参考一下. 感兴趣的小伙伴,下面一起跟随512笔记的小编两巴掌来看看吧! 之前使用的 ...
tui-editor富文本编辑器组件
tui-editor富文本编辑器记录项目中使用富文本编辑器安装 npm init & npm install --save tui-editor 创建组件文档 tuieditor 在 de ...
Vue 富文本编辑器插件 vue-quill-editor 坑！
Vue3 + vue-quill-editor 安装步骤: vue3 安装vue-quill-editor npm install @vueup/vue-quill vue2 安装vue-quill- ...
原生手写富文本编辑器组件
H5富文本编辑器原理解析: 核心属性: 1.contentEditable="true"; //属性规定是否可编辑元素的内容 2.window.document.designMod ...
小程序editor 富文本编辑器组件
效果: 关于editor 富文本编辑器组件复制到组件common 里面.json 引用即可链接:https://pan.baidu.com/s/1_QIp28IOVuyVFfKfFZwxKQ 提取 ...
微信小程序富文本编辑器组件 editor
微信小程序富文本编辑器组件 editor <view class="container"><view class="titlebox"> ...
vue富文本编辑器 Vue-Quill-Editor
主流富文本编辑器对比前言:vue中很多项目都需要用到富文本编辑器,在使用了ueditor和tinymce后,发现并不理想.所以果断使用vue-quill-editor来实现. wangEditor( ...
uniapp微信小程序富文本编辑器组件
前言最近需要实现一个微信小程序的富文本编辑器,由于使用的是uniapp框架开发的小程序,因此就改造了一下微信小程序官方案例,并封装成了一个组件. uniapp-editor gitee仓库实现效果 ...
Element Tiptap Editor - 免费开源的 Vue 富文本编辑器，专门为搭配 Element UI 使用优化，使用很简单
一款很容易上手配置的富文本编辑器,和 Element plus 一起使用效果非常好,还能自定义功能. 关于 Element Tiptap Editor Element Tiptap Editor 是一 ...
Vue富文本编辑器vue-quill-editor-使用-bug问题-教程
vue-quill-editor npm install vue-quill-editor –save or yarn add vue-quill-editor 文件中使用 <template& ...

vue富文本编辑器组件

vue富文本编辑器组件相关推荐

最新文章

热门文章