I am testing and looking for a wysiwyg editor and I found a pretty functional one called nicEdit. Problem is that using firefox all functions are working properly but using chrome, when image is placed, resize option frame doesn't work! How to solve it? If not, any other similar one? Some functions of Tiny MCE are not working with chrome too. Thank you.
Use nicEdit and alter code this way in nicEdit.js:
var nicImageButton=nicEditorAdvancedButton.extend({addPane:function(){this.im=this.ne.selectedInstance.selElm().parentTag("IMG");this.addForm({"":{type:"title",txt:"Add/Edit Immagine"},width:{type:"text",txt:"Width",style:{width:"150px"}},src:{type:"text",txt:"URL",value:"http://",style:{width:"150px"}},alt:{type:"text",txt:"Alt Text",style:{width:"100px"}},align:{type:"select",txt:"Align",options:{none:"Default",left:"Left",right:"Right"}}},this.im)},submit:function(B){var C=this.inputs.src.value;if(C==""||C=="http://"){alert("You must enter a Image URL to insert");return false}this.removePane();if(!this.im){var A="javascript:nicImTemp();";this.ne.nicCommand("insertImage",A);this.im=this.findElm("IMG","src",A)}if(this.im){this.im.setAttributes({width:this.inputs.width.value,src:this.inputs.src.value,alt:this.inputs.alt.value,align:this.inputs.align.value})}}});nicEditors.registerPlugin(nicPlugin,nicImageOptions);
you have to add simply
,width:{type:"text",txt:"Width",style:{width:"150px"}}
and
width:this.inputs.width.value,
to add the option to insert width parameter.
Here is a full code with height edit option, in addition to the width
based on what Yuri Refolo explained
var nicImageButton=nicEditorAdvancedButton.extend({addPane:function(){this.im=this.ne.selectedInstance.selElm().parentTag("IMG");this.addForm({"":{type:"title",txt:"Add/Edit Image"},width:{type:"text",txt:"Width",style:{width:"150px"}},height:{type:"text",txt:"Height",style:{width:"150px"}},src:{type:"text",txt:"URL",value:"http://",style:{width:"150px"}},alt:{type:"text",txt:"Alt Text",style:{width:"100px"}},align:{type:"select",txt:"Align",options:{none:"Default",left:"Left",right:"Right"}}},this.im)},submit:function(B){var C=this.inputs.src.value;if(C==""||C=="http://"){alert("You must enter a Image URL to insert");return false}this.removePane();if(!this.im){var A="javascript:nicImTemp();";this.ne.nicCommand("insertImage",A);this.im=this.findElm("IMG","src",A)}if(this.im){this.im.setAttributes({width:this.inputs.width.value,height:this.inputs.height.value,src:this.inputs.src.value,alt:this.inputs.alt.value,align:this.inputs.align.value})}}});nicEditors.registerPlugin(nicPlugin,nicImageOptions);
Related
I want to include images in an aloha editable after a drop event, thus not using the toolbar button.
While some aloha commands may be executed programmatically, there is not so much doc about it and one must look into the code.
With the debugger i found that the relevant function is here so now i would go for copying the insertImg function body somewhere in my code and build my function.
On the other hand it would be much cleaner to reuse that code calling something like
Aloha.plugins.image.insertImg();
In a way similar to how it is done here. Is it possible to do such a thing?
A colleague explained me that there is nothing special required in order to insert an image. The function used by aloha is just a way to substitute jQuery and is not necessary.
Once the common/image plugin is loaded, it is sufficient to append an <img> tag inside the editable, also with jQuery, and the plugin will be triggered on it, adding the resize handle and showing the image toolbar when needed.
I'm implementing as simple image gallery.
This is what I got for now
function init(){
var elem = document.createElement("img");
elem.scr='upload/creative-design-modern-furniture.jpg';
elem.setAttribute("height", "768");
elem.setAttribute("width", "1024");
elem.setAttribute("alt", "furniture");
document.getElementById("imagegal").appendChild(elem);
}
<body onload='init();'>
<div id="imagegal" ></div>
Now, I know this is easy, but I dont get any errors in the console.
I see a white square with the word "furniture" inside (the alt text). I dont see the image.
The folder "upload" that contains all the images is inside the file that contains the script files (apache/htdocs/myproject/upload)
The images get uploaded by the user using website's interface. In the "upload" file, all the thumbs of the images have a little golden padlock on the side. What is that? What symbolizes? I dont know
Any help/tips?
Thanks in advance
EDIT
Yes , it was a typo. Thanks guys. I guess I deserve the down votes
But, anyway, whats with the golden padlock on the side of every thumbnail?
Thanks again
you have a typo in your code:
elem.src='upload/creative-design-modern-furniture.jpg';
// ^---- was 'scr' in your code
You have made typo
elem.scr='upload/creative-design-modern-furniture.jpg';
should be
elem.src='upload/creative-design-modern-furniture.jpg';
You have probably made a typo, using scr="..." instead of src="....".
I highly suggest that you use some element inspectors in browsers such as firebug (Mozilla Firefox), DragonFly (Opera) or Chrome built-in tool to check how the code is finally formed in the page when loaded and easily locate those types of errors. They are easy to use, they allow you to test and make such modifications in html/js/css on-the-fly and they can save you a lot of time.
You have a typo when you're setting the source. Instead of elem.scr it should be elem.src.
I've created a view, added the specific path and used 'rewrite results' to output the field as a link > path. This gives me the intended HTML view format. When I change to imageflow and one of the images, the behavior changes to open a larger version of the image (imageflow default behavior).
As I see it, it's an imageflow overwrite, and the plugin allows you to set an onClick parameter. I'm trying different values to try to make it link to content. This tends to break imageflow or not link at all.
Any similar experience or suggestions?
What is the kind of your field? Image, title?
Link the field to its node and then use this code inside the "OnClick Override" settings:
function() {window.open(this.url, '_blank');} // Or _parent to open it normally
The solution found was to use a different Drupal module jQFX. The links work without the need of the onClick statement. Unfortunately, the option reflex doesn't seem to work.
Unable to make text alignment buttons show up on CKEDITOR inline implementation. Tried with v4.1.1 and v4.1.2 on p,div but no luck. Inlineall.html sample file works but as soon as CKEDITOR is loaded in our application(node.js), all works but the alignment buttons.
What could be wrong here? What should I be looking at?
thanks in advance
First of all: check whether CKEDITOR.instances.yourInstance.plugins.justify is present. This is the first thing you got to know.
If the plugin is loaded in your instance, then I'm sure that the problem is Advanced Content Filter. For some reason, your instance doesn't allow the content required by the justify plugin to run. In such case, the feature is out. You got to configure config.(extra)allowedContent for your instance to have it working. If you don't use config.indentClasses, most likely something like this would solve your problem:
config.extraAllowedContent = 'p,div{text-align}';
For CKeditor V4 to enable text alignment options in the toolbar add the bellow inside your config.
config={{extraPlugins: ['justify'],}}
I need to insert code for flash to TinyMCE with JavaScript. If I insert the same code using HTML menu of TinyMCE, it automatically add flash icon to the editor. But if I insert the code using JavaScript, the actual code is inserted but it shows nothing on the screen.
One trick I found is toggle TinyMCE to normal textarea and back to TinyMCE. Then, it shows the flash icon. Is there a better way to do that?
Thanks.
Sam
Try this code...
var content=tinyMCE.get('comment').getContent()+"ur flash content";
tinyMCE.get('comment').setContent(content);
Since i dont know about flash. but using this way u can insert into tinymce
Have u tried using:mceRepaint ?
http://wiki.moxiecode.com/index.php/TinyMCE:Commands