我正在使用最新的(0.3.0)版本的WSYIHTML5作为留言板.该板的一个特点是报价选项.我一直在试图弄清楚如何将引用附加到文本区域.
我有以下jQuery作为测试
$('.quote').click(function(){
$('textarea').append('test this');
alert($('textarea').text());
});
警报显示文本已附加到隐藏的textarea,但它不会在WYSIHTML5视图的iframe中更新.
奇怪的是,如果我在初始化WYSIHTML5之后直接附加文本,它会很好地附加.
有什么想法让这个工作？
我只是在做一个小小的网络服务.因此,我正在使用AJAX调用并将我的数据附加到我网站上的表中.在这里,我可以读取和更新现有条目或编写新条目.一切正常.
我希望有可能使用wysihtml5编辑器更新已存在的内容.我已经在我的网站上集成了这个编辑器,我可以在新的条目上使用它.这也有效.
但现在存在现有数据的问题.说到更新数据的表单,我希望现有数据显示为值.在所有输入上一切正常,只是wysihtml5不起作用.
我已经知道有一个iframe,这就是为什么我不能设置textarea的值.我搜索了一个解决方案并找到了以下代码(最后一行):
var editor = new wysihtml5.Editor("textareaid", { // id of textarea element
toolbar: "wysihtml5-toolbar", // id of toolbar element
parserRules: wysihtml5ParserRules, // defined in parser rules set
});
editor.setValue('Here's the content', true);
通常这应该工作,但没有内容出现,控制台告诉我:
错误:wysihtml5.Sandbox:尚未加载Sandbox iframe
我尝试使用超时功能,但没有任何作用.在互联网上搜索似乎没有其他人遇到这个问题.我希望你能帮帮我,会很棒!
有没有办法设定价值？
我正在使用 :
我有一个名为Booking_CancellationComments_CancellationPolicy的textarea,并使用此代码将其设为wysihtml5 textarea:
$('#Booking_CancellationComments_CancellationPolicy').wysihtml5(options);
我试图稍后使用以下方法更新它:
$('#Booking_CancellationComments_CancellationPolicy').val(data.Booking.CancellationComments.CancellationPolicy);
但textarea没有更新.我已经在Stack Overflow上查看了很多答案,并没有展示如何使用我使用的初始化方法更新textarea.
任何帮助赞赏.
我有一个id ="myTextArea"的文本区域,我能够获取文本区域的内容,但是一旦用户成功提交数据,我就无法清除内容.我正在使用wysihtml5插件作为我的文本编辑器.我的代码如下.
<textarea name="def_text" id="myTextArea" class="textarea"></textarea>
在我的jquery文件中,一旦用户成功提交数据,我就会按照以下方式进行操作.
$('#myTextArea').val('');
但它没有清除文本区域.我已经尝试了$('#myTextArea').html(''),但它对我不起作用.
我知道 vue-quill-editor。
但是，我遇到了困难。
首先，我从
vue vue-init nuxt / express myProject
和
npm install --save vue-quill-editor
~插件/quill.js
import Vue from 'vue'
if (process.BROWSER_BUILD) {
require('quill/dist/quill.snow.css')
require('quill/dist/quill.bubble.css')
require('quill/dist/quill.core.css')
Vue.use(require('vue-quill-editor/ssr'))
}
nuxt.config.js
plugins: [
{ src: '~plugins/quill.js' }
]
这是正确的方法吗？
如何在此处添加模块？例如，
Import {ImageImport} from '../modules/ImageImport.js'
Import {ImageResize} from '../modules/ImageResize.js'
Quill.register ('modules / imageImport', ImageImport)
Quill.register ('modules / imageResize', ImageResize)
我可以参考以下，
但它似乎不是 nuxt.js 环境的一个例子。所以我失败了。
https://github.com/surmon-china/vue-quill-editor/tree/master/examples
感谢您的帮助。
我正在使用bootstrap-wysihtml5,因此从textarea输入字段接收输入.为了改善用户体验,我想自动调整textarea以适应输入文本.
在这个Gist中的代码的帮助下,我可以在单击时调整textarea的大小,但不能在加载时调整大小.
这是我目前的实施:
var container = $("#container");
var textarea = $("<textarea />");
textarea.attr("style", "width: 90%;");
container.append(textarea);
textarea.wysihtml5({
"font-styles": false,
"emphasis": false,
"lists": false,
"html": false,
"link": false,
"image": false,
"color": false
});
textarea.val("<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div<div><br></div><div>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur..</div");
textarea.observe("load", function () {
var $iframe = $(this.composer.iframe);
var $body …据我所知,这段代码应该可行,但事实并非如此,而且我完全难过了.有什么想法吗？
jQuery的
$('.article_chooser').click(function() {
var src = $(this).attr('value');
$("#doc_edits_attributes_0_body").parent("iframe html body").html($("#article"+src).html());
console.log($("#doc_edits_attributes_0_body").parent("iframe html body").html());
});
HTML
<textarea class="editable_areas" cols="40" id="doc_edits_attributes_0_body" name="doc[edits_attributes][0][body]" rows="20" style="display: none;"></textarea>
<iframe class="wysihtml5-sandbox" security="restricted" allowtransparency="true" frameborder="0" width="0" height="0" marginwidth="0" marginheight="0">
<html>
<body marginwidth="0" marginheight="0" contenteditable="true" class="editable_areas wysihtml5-editor" spellcheck="true">
</body>
</html>
</iframe>
干杯!