Javascript Angular-base64图像存在ng模型绑定文本区域性能问题

我正在开发一款应用程序，它使用了Summernote WYSIWYG，包装在angular指令中。我在图像上传上使用默认行为，基本上是在base64中对所选图像进行编码，并将其作为

标记放入

不幸的是，当测试它时，图像确实被插入到框中，但是整个站点开始变得非常糟糕

守则基本上是：

在CreateController.js中：

// This object holds all the post info
self.post = {};

// This object holds all the post info
<div id="summernote" summernote ng-model="Create.post.Content" config="Create.snOptions"> </div>

在create view.html中：

// This object holds all the post info
self.post = {};

// This object holds all the post info
<div id="summernote" summernote ng-model="Create.post.Content" config="Create.snOptions"> </div>

但是，此选择不返回任何内容，因为summernote指令（）中有一些更复杂的DOM元素

有人知道我该怎么做吗

---

谢谢

如本文所述，为

onImageUpload

编写一个自定义函数，然后手动处理表单提交上的

img src

属性（base64编码）。@SergiuParaschiv您能详细说明一下吗？你所说的“手动处理”是什么意思？为什么我需要定制

onImageUpload

？上传的图像被编码为base64。好吧，问题在于数据绑定观察器减慢了一切。即使我创建了一个在表单提交时被调用的函数，我提到的一个问题是，我无法找到一种方法来从该函数内部的summernote中提取内容。你不能依赖summernote WYSIWYG来序列化图像，因为每次更改内容时它都会这样做。所以你需要以某种方式禁用它。据我所知，覆盖onImageUpload是实现这一点的方法。下一步，在保存之前，您需要自己进行序列化。我假设您认为summernote代码正在对每个$digest文件的图像进行重新编码。我不明白为什么会是这样，图像已经被编码，并且在summernote的文本区域内有一个完全工作的Base64 img标签。我认为除非我尝试上传另一张图片，否则不会再次触发onImageUpload的

onImageUpload

。但是Summernote完成的某些处理会被$digest触发，并导致延迟，这至少是您描述的。如果不是图像，那就是别的东西。我还猜测您将无法在其上使用

ng model

，但必须提出自己的解决方案。请按此处所述为

onImageUpload

编写自定义函数，然后手动处理表单提交上的

img src

属性。@SergiuParaschiv您能详细说明吗？你所说的“手动处理”是什么意思？为什么我需要定制

onImageUpload

？上传的图像被编码为base64。好吧，问题在于数据绑定观察器减慢了一切。即使我创建了一个在表单提交时被调用的函数，我提到的一个问题是，我无法找到一种方法来从该函数内部的summernote中提取内容。你不能依赖summernote WYSIWYG来序列化图像，因为每次更改内容时它都会这样做。所以你需要以某种方式禁用它。据我所知，覆盖onImageUpload是实现这一点的方法。下一步，在保存之前，您需要自己进行序列化。我假设您认为summernote代码正在对每个$digest文件的图像进行重新编码。我不明白为什么会是这样，图像已经被编码，并且在summernote的文本区域内有一个完全工作的Base64 img标签。我认为除非我尝试上传另一张图片，否则不会再次触发onImageUpload的

onImageUpload

。但是Summernote完成的某些处理会被$digest触发，并导致延迟，这至少是您描述的。如果不是图像，那就是别的东西。我还猜测，您将无法在其上使用

ng model

，但必须提出自己的解决方案。