Select TinyMCE 文本区域中的跨度 jquery

Question

我在 jquery 的应用程序中使用 tinymce。我还使用 tinymce 的 jquery 插件在本地加载它。

我对 jquery 很菜鸟，但我想我应该能够像这样得到它。

<h1 class="class">John</h1>
<form>
    <textarea id="id">
        <p>Hello <span class="class">John</span>,</p>
    </textarea>
</form>

<script>
    // Doesn't work for either
    $('form#id.class').text('Mark');

    // Doesn't Work Either for the textarea but does the h1
    $('.class').text('Mark');
</script>

但是当然它不起作用或者我为什么要发布这个。我做错了什么？

我正在导入 jquery 并且可以像这样抓取其他东西并且它有效。

Answer 1

您要导入 jQuery 库吗？

如果没有，您要么想要下载 jQuery here or use the CDN which can be found here。

如果这不是您的问题，请查看 API jQuery 的文档，看看您是否正确使用了 .text()。

这是link：http://api.jquery.com/text/

此外，您不应该在文本区域中使用 html 标签。 Textareas 将其中的所有内容呈现为文本。您需要使用可编辑的内容 div，它看起来像这样 <div contenteditable="true"></div>

Answer 2

<textarea>的内容是一个文本字符串。

所以您需要像操作任何其他文本字符串一样操作它。

工作示例：

var textArea = document.getElementsByTagName('textarea')[0];
var textAreaContent = textArea.textContent;
textAreaContent = textAreaContent.replace('<span class="class">John</span>','<span class="class">Mark</span>');
textArea.textContent = textAreaContent;

<form>
    <textarea id="id">
        <p>Hello <span class="class">John</span>,</p>
    </textarea>
</form>

N.B. 上面的 javascript 的 jQuery 是：

$(document).ready(function(){

$('textarea').text($('textarea').text().replace('<span class="class">John</span>','<span class="class">Mark</span>'));

});

Answer 3

当您加载 TinyMCE 以替换 <textarea> 时，您输入的内容不会自动与原始 <textarea> 同步。加载 TinyMCE 后，您将在 iFrame 中工作 - 而不是原始 <textarea>。当您使用标准表单提交表单时，TinyMCE 会在提交表单之前自动更新底层 <textarea>。如果你想从编辑器中获取当前值，你可以做以下两件事之一：

使用 get() API 直接与 TinyMCE 对话
在尝试使用 <textarea>

triggerSave()

<textarea>

get() API 允许您定位页面上编辑器的特定实例，然后使用 getContent() API 获取数据。

triggerSave() API 告诉 TinyMCE 立即更新基础 <textarea> ，之后您可以与 <textarea> 中的数据交互以获得您需要的内容。

https://www.tinymce.com/docs/api/tinymce/root_tinymce/#triggersave

Select TinyMCE 文本区域中的跨度 jquery

Select a span in a TinyMCE textarea with jquery

html

javascript

jquery

tinymce-4