富文本 wangeditor insertFn 插入附件时如何在附件名称前插入图片

在 `insertFn` 中插入附件时，可以使用 `<img>` 标签来插入图片，并将图片与附件名称放在同一个元素中，例如：

// 获取需要插入的附件信息
var filename = '附件名称';
var fileurl = '附件链接';

// 构造需要插入的 HTML 代码
var content = '<p>附件：<a href="' + fileurl + '"><img src="图片链接" width="16" height="16" /> ' + filename + '</a></p>';

// 调用 insertFn 函数插入内容
editor.insertFn(content);

在上述代码中，使用 `<a>` 标签来创建附件链接，同时在链接中插入图片和附件名称，使得图片和附件名称在同一行中显示。

需要注意的是，上述代码中的图片链接需要替换为实际的图片链接，以便正确显示图片。同时，也可以根据实际需求调整图片的大小，或者使用其他图片样式来进行美化。

相关问题

富文本 wangeditor insertFn 插入自定义的图标不会显示

使用 `insertFn` 插入自定义的图标时，需要注意以下几点：

1. 图标需要使用 `font-family` 属性来进行定义，例如：

   .my-icon {
     font-family: 'my-icons';
     font-style: normal;
     font-weight: normal;
     font-variant: normal;
     text-transform: none;
     line-height: 1;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
   }
   @font-face {
     font-family: 'my-icons';
     src: url('my-icons.ttf') format('truetype');
   }

在上述代码中，定义了一个名为 `my-icons` 的自定义字体，并将其应用于 `.my-icon` 类，使得该类可以显示自定义的图标。

2. 在调用 `insertFn` 函数时，需要使用 HTML 实体字符来表示自定义图标，例如：

   // 获取需要插入的内容
   var content = '<p>自定义图标：<i class="my-icon">&#xe001;</i></p>';

   // 调用 insertFn 函数插入内容
   editor.insertFn(content);

在上述代码中，使用 HTML 实体字符 `&#xe001;` 来表示自定义图标，同时在 `<i>` 标签中应用了 `my-icon` 类来指定使用自定义字体。

如果按照上述方式仍然无法显示自定义的图标，可以检查以下几点：

1. 是否正确定义了自定义字体，并且在使用时已经加载成功。
2. 是否正确使用了 HTML 实体字符来表示自定义图标。
3. 是否正确应用了自定义字体的类名。

富文本 wangeditor insertFn属性

富文本编辑器 WangEditor 中的 insertFn 属性是一个函数，用于向编辑器中插入自定义内容。该函数接收一个参数，为需要插入的内容，可以是 HTML 字符串或者 DOM 元素。

例如，当用户点击某个按钮时，可以调用 insertFn 函数向编辑器中插入自定义的内容。具体的实现方式可以参考以下示例代码：

// 创建富文本编辑器
var editor = new wangEditor('editor');

// 自定义按钮的点击事件
$('#custom-button').click(function() {
  // 获取需要插入的内容
  var content = '<p>自定义内容</p>';

  // 调用 insertFn 函数插入内容
  editor.insertFn(content);
});

在上述代码中，当用户点击 `#custom-button` 按钮时，会获取需要插入的内容，然后调用 `editor.insertFn(content)` 函数将内容插入到编辑器中。

需要注意的是，WangEditor 的 insertFn 函数只能向当前光标所在位置插入内容，如果需要插入到其他位置，可以使用其他 API 来实现。