Hey do you get tinymce editor to show on a page?
I'm wanting to format my textarea when composing or editing blog posts.
But it's not displaying the little interface as expected - just the plain old textarea.
I've inserted the links and code (hopefully in the right place)
I'm using using laravel and bootstrap, also parsely for form validation.
Am I missing something?
Any tips would be great!
cheers.
here's my code:
{!! Html::style('css/parsley.css') !!}
{!! Html::style('css/select2.min.css') !!}
<script src="https://cloud.tinymce.com/stable/tinymce.min.js"></script>
<script>
tinymce.init({
selector: '#textarea',
plugins: 'Link code table',
menubar: 'table',
toolbar: 'table'
});
</script>
May be you need to add table plugin, like below.
<script>
tinymce.init({
selector: '#textarea',
plugins: 'table',
menubar: 'table',
toolbar: 'table'
});
</script>
Related
Good day,
I managed to keep Redactor loaded when interacted with other parts of the app (for example: Form Inputs). This is how I load and inject Redactor at the moment:
<div>
<div class="mt-1"
x-data="{
value: '',
init() {
let redactor = new Redactor(this.$refs.redactor , {
lang: '{{ app()->getLocale() }}',
minHeight: '300px',
imageUpload: '{{ route('redactor.store', ['_token' => csrf_token()]) }}',
imageManagerJson: '{{ route('redactor.index') }}',
plugins: [
'imagemanager'
],
}, this.value)
}
}"
wire:ignore
>
<textarea id="content" rows="10" x-ref="redactor" wire:model="content"></textarea>
</div>
</div>
But when I type something inside the editor, it doesnt update the property.
If I change the property via DevTools and switch to source/editor view, it loads the data.
Maybe I oversee something, for example a API method to send the data to the textarea back?
Official docs: https://imperavi.com/redactor/docs/
Hope someone here can help with this problem :)
Greetings Syntafin
I have a problem with the initialization of images in CKEditor 4.5.4 with the Enhanced Image plugin (image2). The first time a CKEditor instance is being loaded, the images don't get initialized correctly. See picture image not correctly initialised. The caption field does work correctly, but I cannot move or select the picture.
However, if I navigate to another web page in my web application, and then navigate back to the page where we use CKEditor, everything works fine. In other words if the CKEditor instance has been loaded before, everything works perfectly.
We are using AngularJS 1.4.4 together with ng-ckeditor. This is the editorOptions we use:
$scope.editorOptions = {
language: 'no',
customConfig: '/statisk/app/common/ckeditor/ckeditor-config.js',
extraPlugins: 'sharedspace,image2,widget,lineutils,uploadimage,uploadwidget,filetools',
extraAllowedContent: 'a(*); span(*); figure(align_center, align_left); div{*}; figure; figcaption; img[alt,!src]{width,height};',
toolbar: [
{name: 'paragraph', items: ['BulletedList', 'NumberedList']},
{name: 'links', items: ['Link']},
{name: 'insert', items: ['Image']}
],
sharedSpaces: { top: 'toolbar_hovedtekst' }
};
HTML:
<div id="hovedtekst" data-ng-show="modus.showEditorControls()">
<div id="toolbar_hovedtekst"></div>
<div class="ck_editor_hovedtekst test_hovedtekst" ckeditor="editorOptions" data-ng-model="hovedtekstCtrl.content"></div>
</div>
What could be wrong?
i have two buttons,How i can make alignment right and left based on below code Add entity is left and excel export is right.
CONFIG.JS
toolbar: [
{
template: kendo.template('<a href="" class=\'k-button k-button-icontext k-grid-add\' ng-click=\'addNewRole();\'><span class=\'k-icon k-add\'></span>Add Entity</a>')
},
{"name":"excel"}
],
I play around little bit and got the soultion.I added excel button into template and it worked.
template: '<button class="k-button k-grid-excel pull-right">Export to Excel</button>'
I would like to know how to modify the example grouped listview that comes with kendo mobile.
The list view shows both flat view and grouped view. How do you make the items in the list view clickable so they will navigate to a different web page when clicked?
I've tried creating a template with an anchor tag and href and it works in IE but does nothing when clicked on the android phone.
//The Template
<script type="text/x-kendo-tmpl" id="template">
<div class="myclass">
#:name#
</div>
</script>
//The data binding
function mobileListViewDataBindInitGrouped() {
$("#grouped-listview").kendoMobileListView({
dataSource: kendo.data.DataSource.create({ data: groupedData, group: "letter" }),
template: kendo.template($("#template").html()),
fixedHeaders: true
});
}
Thanks
After some trial and error I have found that if i remove the div tag in the template, the anchor tags work correctly. Not sure if this is a bug or by design.
Thanks Whizkid747 for your help.
//Updated Template (removed <div>)
<script type="text/x-kendo-tmpl" id="template">
#:name#
</script>
I have this fairly basic code within a $(document).ready listener:
$('#contact-us-button').fancybox({
padding: 20,
beforeLoad: function () {
$("#slideshow").data('nivoslider').stop();
},
afterClose: function () {
$("#slideshow").data('nivoslider').start();
}
});
$('.get-a-quote').fancybox({
padding: 20,
beforeLoad: function () {
$("#slideshow").data('nivoslider').stop();
},
afterClose: function () {
$("#slideshow").data('nivoslider').start();
}
});
Whereas the HTML:
<a id="contact-us-button" href="impianto/get-a-quote-form.php"></a>
[...]
<div class="product">
<h1>Ferrari California</h1>
<a href="dettaglio.php?id=7">
<img src="images/showcase/ferrari-california-showcase.jpg" />
</a>
<a class="get-a-quote" href="impianto/get-a-quote-form.php?id=7"></a>
</div>
Fancybox binds correctly but shows that message in place of my form. There are no conflicts among class names and IDs. Any ideas? Please note that Fancybox 1.3.4 behaves correctly with about the same code (different options).
Try adding the fancybox.ajax class to your links like
<a id="contact-us-button" class="fancybox.ajax" href="impianto/get-a-quote-form.php"></a>
and
<a class="get-a-quote fancybox.ajax" href="impianto/get-a-quote-form.php?id=7"></a>
Try using the property 'type' : 'iframe' if you want it to show another web page's content inside it like a window to the other page.
Something like this in your < head > tag:
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox({
'type' : 'iframe'
});
});
</script>
Also it might be obvious but if not... With this specific javascript enabling "fancybox" class links as popup links, your link to fire a popup would have class set as matching the class name in the javascript above, something like:
Link