npmapps 1.0.25 → 1.0.27

package/app/src/views/element/quillEditor/example.vue

@@ -0,0 +1,314 @@
+<template>
+  <div class="quill-demo">
+    <PageHeader
+      title="Quill 富文本编辑器"
+      :description="versionTip"
+      usage="&lt;QuillEditor v-model=&quot;content&quot; :toolbar-preset=&quot;'default'&quot; :height=&quot;300&quot; /&gt; toolbar-preset 可选 simple/default/full，通过 ref 调用 getHtml()/getText()/clear()/focus()"
+    />
+
+    <!-- 卡片① 工具栏预设切换 -->
+    <el-card class="demo-card" shadow="never">
+      <div slot="header" class="demo-card__header">
+        <span class="demo-card__title">① 工具栏预设切换（toolbarPreset）</span>
+        <el-radio-group v-model="presetMode" size="small">
+          <el-radio-button label="simple">精简</el-radio-button>
+          <el-radio-button label="default">默认</el-radio-button>
+          <el-radio-button label="full">全部</el-radio-button>
+        </el-radio-group>
+      </div>
+      <p class="demo-tip">
+        切换上方单选即可实时更换工具栏。当前预设：<b>{{ presetMode }}</b>
+        （组件通过 <code>:key</code> 重新挂载以应用新工具栏，内容经 v-model 自动保留）。
+      </p>
+      <QuillEditor
+        :key="presetMode"
+        v-model="presetContent"
+        :toolbar-preset="presetMode"
+        :height="240"
+      />
+    </el-card>
+
+    <!-- 卡片② 基础编辑器 + HTML 源码联动 -->
+    <el-card class="demo-card" shadow="never">
+      <div slot="header" class="demo-card__title">② 基础编辑器 + HTML 源码联动（实例1）</div>
+      <QuillEditor v-model="content1" :height="260" @ready="onReady" />
+      <div class="source-head">
+        <span class="demo-card__subtitle">HTML 源码（可编辑）</span>
+        <div>
+          <el-button type="primary" size="small" @click="applySource">应用到编辑器1</el-button>
+          <el-button size="small" @click="refreshSource">从编辑器1刷新源码</el-button>
+        </div>
+      </div>
+      <el-input
+        v-model="source1"
+        type="textarea"
+        :rows="6"
+        class="source-box"
+        placeholder="在此编辑 HTML，点「应用到编辑器1」整体写回上方编辑器"
+      />
+      <p class="demo-tip">
+        编辑器1 的内容变化会实时同步到源码框；点「应用到编辑器1」把源码整体写回编辑器（Quill 会规范化 HTML）。
+      </p>
+    </el-card>
+
+    <!-- 卡片③ 只读 / 禁用 -->
+    <el-card class="demo-card" shadow="never">
+      <div slot="header" class="demo-card__title">③ 只读 / 禁用模式</div>
+      <el-row :gutter="16">
+        <el-col :span="12">
+          <div class="demo-card__subtitle">只读 readonly（可选可看，不可改）</div>
+          <QuillEditor v-model="content2" :readonly="true" :height="220" />
+        </el-col>
+        <el-col :span="12">
+          <div class="demo-card__subtitle">禁用 disabled（整体灰掉）</div>
+          <QuillEditor v-model="content3" :disabled="true" :height="220" />
+        </el-col>
+      </el-row>
+    </el-card>
+
+    <!-- 卡片④ 自定义工具栏 -->
+    <el-card class="demo-card" shadow="never">
+      <div slot="header" class="demo-card__title">④ 自定义工具栏（传 toolbar 数组）</div>
+      <p class="demo-tip">
+        传入 <code>:toolbar</code> 数组即可完全自定义（优先级高于 toolbarPreset）。本例只保留：加粗 / 斜体、列表、链接、清除。
+      </p>
+      <QuillEditor :toolbar="customToolbar" v-model="content4" :height="200" />
+    </el-card>
+
+    <!-- 卡片⑤ Ref 方法调用 -->
+    <el-card class="demo-card" shadow="never">
+      <div slot="header" class="demo-card__title">⑤ 通过 ref 调用组件方法</div>
+      <QuillEditor ref="refDemo" v-model="content5" toolbar-preset="simple" :height="180" />
+      <div class="btn-row">
+        <el-button size="small" @click="callGetHtml">getHtml()</el-button>
+        <el-button size="small" @click="callGetText">getText()</el-button>
+        <el-button size="small" @click="callClear">clear()</el-button>
+        <el-button size="small" @click="callFocus">focus()</el-button>
+      </div>
+      <el-input
+        v-model="methodOutput"
+        type="textarea"
+        :rows="4"
+        readonly
+        class="source-box"
+        placeholder="方法返回值显示在这里"
+      />
+    </el-card>
+
+    <!-- 卡片⑥ 事件监听 -->
+    <el-card class="demo-card" shadow="never">
+      <div slot="header" class="demo-card__header">
+        <span class="demo-card__title">⑥ 事件监听（focus / blur / change）</span>
+        <el-button size="small" @click="eventLogs = []">清空日志</el-button>
+      </div>
+      <QuillEditor
+        v-model="content6"
+        toolbar-preset="simple"
+        :height="180"
+        @focus="onEvtFocus"
+        @blur="onEvtBlur"
+        @change="onEvtChange"
+      />
+      <div class="log-panel">
+        <div v-if="!eventLogs.length" class="log-empty">（在上方编辑器中操作以触发事件）</div>
+        <div v-for="(log, i) in eventLogs" :key="i" class="log-line">{{ log }}</div>
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import QuillEditor from './index.vue';
+import PageHeader from '@/components/PageHeader/index.vue';
+
+const SAMPLE_WITH_TABLE = `<h2>富文本编辑器示例</h2>
+<p>这是一个 <strong>Quill</strong> 富文本编辑器示例，包含以下功能：</p>
+<ul>
+  <li>基础格式：加粗、斜体、下划线、删除线</li>
+  <li>标题、段落、引用、列表</li>
+  <li>字号、颜色、对齐、缩进</li>
+  <li>图片（支持 base64 内联）</li>
+  <li>表格（quill-table-better）</li>
+</ul>
+<table>
+  <thead>
+    <tr><th>姓名</th><th>年龄</th><th>城市</th></tr>
+  </thead>
+  <tbody>
+    <tr><td>张三</td><td>28</td><td>北京</td></tr>
+    <tr><td>李四</td><td>32</td><td>上海</td></tr>
+  </tbody>
+</table>
+<p>试着编辑上方内容，查看下方 <code>HTML 源码</code> 输出。</p>`;
+
+const SIMPLE_SAMPLE = '<p>这是一个<strong>精简</strong>示例，可在上方编辑触发事件。</p>';
+
+export default {
+  name: 'QuillEditorDemo',
+  components: { QuillEditor, PageHeader },
+  data() {
+    return {
+      versionTip:
+        '基于 Quill 2 + quill-table-better，支持表格 / 图片 / 撤销重做，工具栏已中文化。',
+      // 卡片① 预设切换
+      presetMode: 'default',
+      presetContent: SAMPLE_WITH_TABLE,
+      // 卡片② 基础编辑器 + 源码联动
+      content1: SAMPLE_WITH_TABLE,
+      source1: SAMPLE_WITH_TABLE,
+      // 卡片③ 只读 / 禁用
+      content2: SAMPLE_WITH_TABLE,
+      content3: SAMPLE_WITH_TABLE,
+      // 卡片④ 自定义工具栏
+      content4: '<p>自定义工具栏示例：<strong>加粗</strong>、<em>斜体</em>、列表。</p>',
+      customToolbar: [
+        ['bold', 'italic'],
+        [{ list: 'ordered' }, { list: 'bullet' }],
+        ['link'],
+        ['clean'],
+      ],
+      // 卡片⑤ ref 方法
+      content5: '<p>点下方按钮调用组件方法（getHtml / getText / clear / focus）。</p>',
+      methodOutput: '',
+      // 卡片⑥ 事件监听
+      content6: SIMPLE_SAMPLE,
+      eventLogs: [],
+    };
+  },
+  watch: {
+    // 编辑器1 内容变化时，实时把源码同步到下方文本框
+    content1(val) {
+      this.source1 = val;
+    },
+  },
+  methods: {
+    onReady(quill) {
+      this.versionTip = `基于 Quill ${quill.version} + quill-table-better，支持表格 / 图片 / 撤销重做，工具栏已中文化。`;
+    },
+    // 卡片② 源码 → 编辑器1（整体写回）
+    applySource() {
+      this.content1 = this.source1;
+      if (this.$message) this.$message.success('已写回编辑器1');
+    },
+    // 卡片② 编辑器1 → 源码（手动刷新）
+    refreshSource() {
+      this.source1 = this.content1;
+    },
+    // 卡片⑤ ref 方法
+    callGetHtml() {
+      this.methodOutput = this.$refs.refDemo.getHtml();
+    },
+    callGetText() {
+      this.methodOutput = this.$refs.refDemo.getText();
+    },
+    callClear() {
+      this.$refs.refDemo.clear();
+      this.methodOutput = '(已清空)';
+    },
+    callFocus() {
+      this.$refs.refDemo.focus();
+    },
+    // 卡片⑥ 事件
+    onEvtFocus() {
+      this.pushLog('focus 获得焦点');
+    },
+    onEvtBlur() {
+      this.pushLog('blur 失去焦点');
+    },
+    onEvtChange(html) {
+      this.pushLog(`change 内容长度 ${html.length}`);
+    },
+    pushLog(text) {
+      const t = new Date().toLocaleTimeString();
+      this.eventLogs.unshift(`[${t}] ${text}`);
+      if (this.eventLogs.length > 20) this.eventLogs.splice(20);
+    },
+  },
+};
+</script>
+
+<style scoped>
+.quill-demo {
+  padding: 20px;
+}
+
+.demo-alert {
+  margin-bottom: 16px;
+}
+
+.demo-card {
+  margin-bottom: 16px;
+}
+
+.demo-card__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.demo-card__title {
+  font-size: 15px;
+  font-weight: 600;
+  color: #303133;
+}
+
+.demo-card__subtitle {
+  display: block;
+  margin: 8px 0;
+  font-size: 13px;
+  color: #606266;
+}
+
+.demo-tip {
+  margin: 8px 0;
+  font-size: 12px;
+  line-height: 1.6;
+  color: #909399;
+}
+
+.demo-tip code,
+.demo-card code {
+  padding: 1px 4px;
+  border-radius: 3px;
+  background: #f5f7fa;
+  color: #c7254e;
+  font-family: Consolas, 'Courier New', monospace;
+}
+
+.source-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: 12px 0 8px;
+}
+
+.source-box >>> .el-textarea__inner {
+  font-family: Consolas, 'Courier New', monospace;
+  font-size: 12px;
+}
+
+.btn-row {
+  margin: 12px 0;
+}
+
+.log-panel {
+  margin-top: 12px;
+  max-height: 160px;
+  padding: 8px 12px;
+  overflow: auto;
+  border: 1px solid #ebeef5;
+  border-radius: 4px;
+  background: #f5f7fa;
+  font-family: Consolas, 'Courier New', monospace;
+  font-size: 12px;
+}
+
+.log-line {
+  line-height: 1.8;
+  color: #475669;
+}
+
+.log-empty {
+  color: #909399;
+}
+</style>